原生js完成打地鼠小游戏

：这是首页，有简单模式和地狱模式两种模式进行选择

这是选择完模式之后的游戏界面：30秒一局游戏倒计时，每打中一只老鼠加一分，没砸中减一分，没砸不加不减

首先准备几张图片

html代码：

 <!-- 初始界面 -->
     <div class="cover">
         <input type="button" value="简单模式" id="easy">
         <input type="button" value="地狱模式" id="hard">
     </div>

     <div id="content">

         <div class="data-box">
             <label>分数</label><input type="text" value="0" id="txtScore">
             <label>分数</label><input type="text" value="30" id="txtRemtime">
         </div>

         <!-- 快捷写法：(tr>td*4)*5   表示4行5列 -->
         <table id="tb">
             <tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             </tr>
         </table>
     </div>

css代码：

     <style>
         html,
         body {
             height: 100%;
         }

         body {
             margin: 0px;
             background: url(img/bj.jpg) no-repeat center / cover;
         }

         .data-box {
             text-align: center;
             /* margin-top: 0px; */
         }

         table {
             margin: 20px auto;
             /* 改变鼠标指针 */
             cursor: url(img/favicon1.ico), auto;
         }

         td {
             width: 100px;
             height: 100px;

             background: url(img/rat-hole.png) no-repeat center / cover;
             border-radius: 50%;
             /* 透明度 */
             opacity:0.9;
             text-align: center;
         }

         img {
             width: 70px;
             height: 70px;
         }

         .cover {
             width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
         }

         .cover>input {
             width: 180px;
             height: 60px;
             position: absolute;
             left: 50%;
             top: 50%;
             margin-left: -90px;
             margin-top: -100px;
             border-radius: 20px;
             border: none;
             outline: none;

             background-image: linear-gradient(45deg, green, yellowgreen);
             font-size: 18px;

         }

         .cover>#hard {
             margin-top: 0px;
         }

         #content{
             display: none;
         }
     </style>

js代码：主要内容就在这了，注释很详细

     <script>
         //找到所有的td
         var tdList = document.getElementsByTagName('td');

         //找到倒计时的文本框
         var txtRemtime = document.getElementById("txtRemtime");
         //准备一个变量来倒计时
         var time = txtRemtime.value;
         //找到table   为了修改他的锤子
         var tb = document.getElementById("tb");
         //找到分数的文本框
         var txtScore = document.getElementById("txtScore");
         //准备一个变量
         var score = 0;

         //找到遮罩层
         var cover = document.querySelector('.cover');
         //找到游戏内容
         var content = document.getElementById('content');

         for (var i = 0; i < tdList.length; i++) {
             //鼠标按下的事件
             tdList[i].onmousedown = function () {
                 //修改table的锤子
                 tb.style.cursor = "url(img/favicon.ico), auto";
             }

             tdList[i].onmouseup = function () {
                 //复原锤子
                 tb.style.cursor = "url(img/favicon1.ico), auto";

                 //判断咋的那个td里边有没有img ，有img就带变砸中了
                 if (this.children.length != 0) {
                     //分数+1
                     score++;

                     //把这个img图片替换成哭的图片
                     this.children[0].src = "img/mouse2.png";
                 } else {
                     //分数-1
                     score--;
                 }
                 //把分数值赋值给文本框
                 txtScore.value = score;
             }
         }

         //找到简单模式  给他家点击事件
         document.getElementById('easy').onclick = function () {
             startGame(1500, 1000);
         }

         //找到地狱模式  给他家点击事件
         document.getElementById('hard').onclick = function () {
             startGame(600, 500);
         }

         //开始游戏
         function startGame(creaTime, disTime) {
             //隐藏大的遮罩层
             cover.style.display = "none";
             //游戏内容
             content.style.display = "block";

             //生成随机小老鼠
             var mouseID = setInterval(function () {
                 //生成一个0-最大下标的随机数
                 var idx = parseInt(Math.random() * tdList.length);
                 //在生成的随机数对应的id的td添加小老鼠图片
                 tdList[idx].innerHTML = '<img src="img/mouse1.png">';

                 // 清楚小老鼠
                 setTimeout(function () {
                     tdList[idx].innerHTML = '';
                 }, disTime);
             }, creaTime)

             //倒计时游戏时间
             var timerID = setInterval(function () {
                 time--;
                 txtRemtime.value = time;

                 if (time == 0) {
                     //停止倒计时
                     clearInterval(timerID);
                     //停止生成随机小老鼠
                     clearInterval(mouseID);
                     alert("游戏结束！");
                 }

                 //计时器每秒执行一次

             }, 1000);
         }
     </script>