使用javascript实现简单的龟兔赛跑小游戏

以下是实现代码

//javascript实现代码
function start(){t=document.getElementById('t')r=document.getElementById('r')t.style.left='200px';t.style.top='200px';r.style.left='200px';r.style.top='300px';t.style.display='block'r.style.display='block'star=setInterval(move,100)
}
function move(){t=document.getElementById('t')r=document.getElementById('r')rleft=r.style.lefttleft=t.style.leftrleft=Number.parseInt(rleft.split('px')[0])tleft=Number.parseInt(tleft.split('px')[0])rleft+=10tleft+=5t.style.left=tleft+'px';r.style.left=rleft+'px';//alert(t.style.left)if(t.style.left=='1000px'){clearInterval(star)alert('游戏已结束！乌龟取得胜利！')t.style.left='200px'r.style.left='200px'}else if(r.style.left=='1000px'){clearInterval(star)alert('游戏已结束！兔子取得胜利！')t.style.left='200px'r.style.left='200px'}
}
function stop(){clearInterval(star)
}
function restart(){star=setInterval(move,100)
}

css代码

#map{width: 800px;height: 400px;position: absolute;left: 200px;top: 100px;border: solid 1px #90E090;text-align: center;
}
img{display: none;position: absolute;width: 32px;height: 32px;}

html代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/mystyle.css" /><script type="text/javascript" src="js/myjs1.js" ></script></head><body><div id='map'><input type="button" value="开始" onclick="start()"/><input type="button" value="暂停" onclick="stop()"/><input type="button" value="继续" onclick="restart()"/></div><img id='r' src="img/r.jpg" /><img id='t' src="img/t.jpg" /></body>
</html>

以下为实现展示

使用javascript实现简单的龟兔赛跑小游戏相关推荐

Python简单龟兔赛跑小游戏
Python实现简单的龟兔赛跑小游戏基于CSS 和 js的基础之上实现: 具体代码如下>>: HTML代码文件 <!DOCTYPE html> <html>< ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
python简单小游戏代码_一个简单的python小游戏---七彩同心圆
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理用pygame做一个简单的python小游戏-七彩同心圆玩法:每次点击鼠标时,会以鼠标为圆心,不断 ...
基于C语言Ncurse库和链表的简单贪吃蛇小游戏
参考:基于C语言Ncurse库和链表的简单贪吃蛇小游戏作者:三速何时sub20 发布时间:2020-09-29 10:23:51 网址:https://blog.csdn.net/weixin_44 ...
用pygame做一个简单的python小游戏---贪吃蛇
用pygame做一个简单的python小游戏-贪吃蛇贪吃蛇游戏博客链接:(方法一样,语言不一样) c++贪吃蛇:https://blog.csdn.net/weixin_46791942/artic ...
用pygame做一个简单的python小游戏---七彩同心圆
用pygame做一个简单的python小游戏-七彩同心圆这个小游戏原是我同学python课的课后作业,并不是很难,就简单实现了一下,顺便加强一下pygame库的学习. 玩法:每次点击鼠标时,会以鼠标 ...
用pygame做一个简单的python小游戏---生命游戏
用pygame做一个简单的python小游戏-生命游戏生命游戏(Game of Life) 生命游戏(Game of Life)是剑桥大学约翰·何顿·康威(John Horton Conway)教授 ...
python七彩同心圆_用pygame做一个简单的python小游戏---七彩同心圆
用pygame做一个简单的python小游戏---七彩同心圆用pygame做一个简单的python小游戏-七彩同心圆这个小游戏原是我同学python课的课后作业,并不是很难,就简单实现了一下,顺便 ...
做一个简单的java小游戏--单机版五子棋
做一个简单的java小游戏–单机版五子棋学了java有一段时间了,今天就来搞一个简单的单机版五子棋游戏. 实现功能:那必须能进行基础的输赢判断.还有重新开始的功能,悔棋的功能,先手设置的功能和退出的 ...

使用javascript实现简单的龟兔赛跑小游戏

使用javascript实现简单的龟兔赛跑小游戏

使用javascript实现简单的龟兔赛跑小游戏相关推荐

最新文章

热门文章