原生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>

巴特西

原生js完成打地鼠小游戏

最新文章

热门文章