如何用JavaScript实现打地鼠游戏

这篇文章主要讲解了“如何用JavaScript实现打地鼠游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用JavaScript实现打地鼠游戏”吧！

游戏说明：

点击"开始游戏"按钮，在图中随机产生老鼠，老鼠消失前单击老鼠进行击打，打中一次即可获得100的积分，没有打中老鼠，扣取100积分

css模块

<style>     #div0{      text-align: center;      width: 1360px;      height: 600px;      margin: 60px auto;      background-image: url("images/bg.jpg");      position: relative;     }     #div_top{      text-align: left;      color:brown;      width: 360px;      height: 100px;      position: absolute;      left: 500px;     }     #div_left{      width: 350px;      height: 320px;      position: absolute;      left: 300px;      top: 150px;     }     #tab_data{      width:350px;      height:320px;     }     #div_right{      width: 350px;      height: 320px;      position: absolute;      right: 380px;      top: 150px;     }     #tab{      width:320px;      height:320px;     }     #tab td{      background-image:url("images/00.jpg");      background-repeat:no-repeat;      background-position:center;     } </style>

html模块

<div id="div0">    <div id="div_top">      游戏说明:<br/>     点击"开始游戏"按钮，在下图中随机产生老鼠，老鼠消失前单击老鼠进行击打，<br/>     打中一次即可获得100的积分，没有打中老鼠，扣取100积分。快快行动吧，考验<br/>您的     反应和眼力！<br/>    </div>    <div id="div_left">     <table id="tab_data">      <tr>       <th>游戏时间：</th>       <td><input type="text" name="text_time" value="1" />分钟</td>      </tr>      <tr>       <th>倒计时：</th>       <td><input type="text" name="text_CD" value="60" disabled="disabled"/>秒</td>      </tr>      <tr>       <th>出现间隔：</th>       <td><input type="text" name="text_hide" value="1" />秒</td>      </tr>      <tr>       <th>停留时间：</th>       <td><input type="text" name="text_show" value="1" />秒</td>      </tr>      <tr>       <th>得分情况：</th>       <td><span id="span_score"></span></td>      </tr>      <tr>       <th colspan="2">        <input type="button" value="开始游戏" id="but_start"/>        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <input type="button" value="结束游戏" id="but_end"/>       </th>      </tr>     </table>    </div>    <div id="div_right">         </div> </div>

js模块

<script>    var collTd=[];//记录所有的td    var oTdMouse;//记录被选中的td    //定义变量记录页面中的标签元素    var oButStart,oButEnd;    var oTextTime,oTextHide,oTimeShow,oTimeCD;    var oSpanScore;    //定义变量记录时间参数：    var iAll,iCD,iShow,iHide,iCount,iGet;    var iCDId,iRandomId,iShow,iChangeId;    window.onload=function(){     //创建表格     createTable();     //给标签元素变量赋值     init();     //给按钮注册事件     oButStart.onclick=startGame;     oButEnd.onclick=endGame;    }    //开始游戏    function startGame(){     iAll=parseInt(oTextTime.value)*60;     iCD=iAll;     //每隔1秒钟执行一次倒计时     iCDId=window.setInterval(setCD,1000);     iShow=parseInt(oTextShow.value);     iHide=parseInt(oTextHide.value);     iCount=0;     iGet=0;     //每隔iShow+Hide随机一个td     randomId();     iRandomId=window.setInterval(randomId,(iShow+iHide)*1000);     oButStart.disabled="disabled";     oButEnd.disabled="";    }    //随机td    function randomId(){     iCount++;     var index=parseInt(Math.random()*collTd.length);     oTdMouse=collTd[index];     //更改背景图片     oTdMouse.style.backgroundImage="url('images/01.jpg')";     //等待show时间结束后 把背景图片设置回来     iShowId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",iShow*1000);    }    //设置倒计时    function setCD(){     iCD--;     oTextCD.value=iCD;     //每隔一秒钟记录一下分数     var message="共"+iCount+"只，打中"+iGet+"只！";     oSpanScore.innerHTML=message.fontcolor("blue").bold();     if(iCD<=0){      endGame();     }    }    //结束游戏    function endGame(){     oButEnd.disabled="disabled";     oButStart.disabled="";     window.clearInterval(iCDId);     window.clearInterval(iRandomId);    }    //给标签元素变量赋值    function init(){     oButStart=document.getElementById("but_start");     oButEnd=document.getElementById("but_end");          oTextTime=document.getElementsByName("text_time")[0];     oTextCD=document.getElementsByName("text_CD")[0];     oTextHide=document.getElementsByName("text_hide")[0];     oTextShow=document.getElementsByName("text_show")[0];          oSpanScore=document.getElementById("span_score");     oTextCD.value=60;     oButEnd.disabled="disabled";    }    //动态生成表格    function createTable(){     var oDivRight=document.getElementById("div_right");     var oTab=document.createElement("table");     oTab.id="tab";     for(var i=0;i<6;i++){      var oTr=document.createElement("tr");      for(var j=0;j<5;j++){       var oTd=document.createElement("td");       oTr.appendChild(oTd);       collTd.push(oTd);       //给所有的td添加点击事件       oTd.onclick=function(){        if(this==oTdMouse){         //判断当前单元格的背景图片是不是01.jpg         if(this.style.backgroundImage.indexOf("01.jpg")!=-1){          //得一分          iGet++;          //背景图片更改为02.jpg          oTdMouse.style.backgroundImage="url('images/02.jpg')";          //等待0.2秒更改为00.jpg          iChangeId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",200);          var message="共"+iCount+"只，打中"+iGet+"只！";          oSpanScore.innerHTML=message.fontcolor("blue").bold();         }                 }       }      }      oTab.appendChild(oTr);     }     oDivRight.appendChild(oTab);    } </script>

感谢各位的阅读，以上就是“如何用JavaScript实现打地鼠游戏”的内容了，经过本文的学习后，相信大家对如何用JavaScript实现打地鼠游戏这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！