龟兔赛跑

最新推荐文章于 2024-11-07 21:24:38 发布

zhanglijie__1

最新推荐文章于 2024-11-07 21:24:38 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/zhanglijie__1/article/details/101101883

版权

简单的龟兔赛跑小游戏

基于js的事件监听处理，符合常理的文件结构，具体代码如下：

HTML文件：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>龟兔赛跑</title>
       <link rel="stylesheet" type="text/css" href="css/game_style.css"/>
       <script type="text/javascript" src="js/game.js" ></script>
   </head>
   <body>
       <div id="map">
           <input type="button" value="开始游戏" οnclick="start()"/>
       </div>
       <img src="img/兔子.jpg" id="r"/>
       <img src="img/乌龟.jpg" id="w"/>
       <div id="result">
           兔子赢了！游戏结束！
       </div>
   </body>
</html>

CSS文件：

#map{
   width: 660px;
   height: 270px;
   position: absolute;
   top: 100px;
   left: 200px;
   background-image: url(../img/背景.jpg);
   text-align: center;
}

img{
   display: none;
   position: absolute;
   height: 32px;
   width: 32px;
}

#result{
   display: none;
   font-size: 50px;
   text-align: center;
   color: red;
}

JS文件：

var timerObj = -1;
var i = 0;
function start(){
   if(timerObj!=-1)
       clearInterval(timerObj);//如果点了好几次开始，必须清空之前的timerObj = setInterval(move,100)

   r = document.getElementById('r')
w = document.getElementById('w')
e = document.getElementById('result')
   r.style.left = '200px';
   r.style.top = '200px';
   w.style.left = '200px';
   w.style.top = '300px';

   e.style.display = 'none';
   r.style.display = 'block';
   w.style.display = 'block';

   timerObj = setInterval(move,100)//每0.1秒调用一次move函数
}