js打地鼠游戏

最新推荐文章于 2018-06-18 17:47:17 发布

weixin_33922672

最新推荐文章于 2018-06-18 17:47:17 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

文章标签：游戏 python javascript ViewUI

原文链接：https://my.oschina.net/kitty0107/blog/1633113

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       table{
           background-image: url("img/beijing.png");
       }
       table caption{
           font-family: "微软雅黑";
           font-size: 30px;
       }
       table td{
           width: 100px;
           height: 100px;

       }
       #sum,#sum1{
           font-size: 20px;
           font-weight: bold;
       }

   </style>
</head>
<body>
   <table>
       <tr>
           <td><img src="img/keng.png"></td>
           <td><img src="img/keng.png"></td>
           <td><img src="img/keng.png"></td>
       </tr>
       <tr>
           <td><img src="img/keng.png"></td>
           <td><img src="img/keng.png"></td>
           <td><img src="img/keng.png"></td>
       </tr>
       <tr>
           <td><img src="img/keng.png"></td>
           <td><img src="img/keng.png"></td>
           <td><img src="img/keng.png"></td>
       </tr>

   </table>
   <div id="sum"></div>
   <div id="sum1"></div>
   <script type="text/javascript">
   //1.先获取到所有的图片
   var imgs=document.getElementsByTagName('img');
   var sum=0;
   var i=0;

   //2.让老鼠随机在不同的坑里面冒出来
   setTimeout("go()",Math.random()*400+800);
   var num;
   //不加1的原因是因为用num做下标
   function go(){
       num=Math.floor(Math.random()*9);
       imgs[num].src="img/dishu.png";
       imgs[num].setAttribute("onclick","da()");//给每个老鼠身上绑定点击事件
       imgs[num].style.marginTop="0px";
       setTimeout("run()",Math.random()*400+800);
       i++;
       document.getElementById('sum').innerHTML="一共出现了"+i+"只老鼠";
   }
   //3.老鼠出来的情况一：被打死了
   function da(){

       imgs[num].src="img/shang.png";
       imgs[num].removeAttribute("onclick");
       imgs[num].style.marginTop="3px";
       sum++;
       document.getElementById('sum1').innerHTML="一共打死了"+sum+"只老鼠";

   }
   //4.老鼠出来的情况二：跑掉了
   function run(){

       imgs[num].src="img/keng.png";
       imgs[num].removeAttribute("onclick");
       imgs[num].style.marginTop="31px";
       setTimeout("go()",Math.random()*400+800);

}

</script>
</body>
</html>

转载于:https://my.oschina.net/kitty0107/blog/1633113