分享一个html+js实现打地鼠游戏的实例代码

话不多说，请看代码：

 !doctype html  html  head  meta charset= utf-8  title 打地鼠 /title  style type= text/css  #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; #form1 { margin:20px 0; table { margin:0 auto; cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto; td { width:95px; height:95px; background:#00ff33; /style  script type= text/javascript  var td = new Array(), //保存每个格子的地鼠 playing = false, //游戏是否开始 score = 0, //分数 beat = 0, //鼠标点击次数 success = 0, //命中率 knock = 0, //鼠标点中老鼠图片的次数 countDown = 30, //倒计时 interId = null, //指定 setInterval()的变量 timeId = null; //指定 setTimeout()的变量 //游戏结束 function GameOver(){ timeStop(); playing = false; clearMouse(); alert( 游戏结束！ 你获得的分数为： +score+  命中率为： +success); success = 0; score = 0; knock = 0; beat = 0; countDown = 30; //显示当前倒计时所剩时间 function timeShow(){ document.form1.remtime.value = countDown; if(countDown == 0){ GameOver(); return; }else{ countDown = countDown-1; timeId = setTimeout( timeShow() ,1000); //主动停止所有计时 function timeStop() { clearInterval(interId); clearTimeout(timeId);  //随机循环显示老鼠图片 function show(){ if(playing){ var current = Math.floor(Math.random()*25); document.getElementById( td[ +current+ ] ).innerHTML = img src= http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png  setTimeout( document.getElementById( td[ +current+ ] ).innerHtml= ,3000); //使用 setTimeout()实现3秒后隐藏老鼠图片 //清除所有老鼠图片 function clearMouse(){ for(var i=0;i i++){ document.getElementById( td[ +i+ ] ).innerHTML=  //点击事件函数，判断是否点中老鼠 function hit(id){ if(playing == false){ alert( 请点击开始游戏!  return; }else{ beat += 1; if(document.getElementById( td[ +id+ ] ).innerHTML != ){ score += 1; knock += 1; success = knock/beat; document.form1.success.value = success; document.form1.score.value = score; document.getElementById( td[ +id+ ] ).innerHTML =  }else{ score += -1; success = knock/beat; document.form1.success.value = success; document.form1.score.value = score; //游戏开始 function GameStart(){ playing = true; interId = setInterval( show() ,1000);  document.form1.score.value = score; document.form1.success.value = success; timeShow(); /script  /head  body  p id= content  input type= button value= 开始游戏 quot;GameStart() /  input type= button value= 结束游戏 quot;GameOver() /  form name= form1 id= form1  label 分数： /label  input type= text name= score size= 5  label 命中率： /label  input type= text name= success size= 10  label 倒计时： /label  input type= text name= remtime size= 5  /form  table  td id= td[0] quot;hit(0) /td  td id= td[1] quot;hit(1) /td  td id= td[2] quot;hit(2) /td  td id= td[3] quot;hit(3) /td  td id= td[4] quot;hit(4) /td  /tr  td id= td[5] quot;hit(5) /td  td id= td[6] quot;hit(6) /td  td id= td[7] quot;hit(7) /td  td id= td[8] quot;hit(8) /td  td id= td[9] quot;hit(9) /td  /tr  td id= td[10] quot;hit(10) /td  td id= td[11] quot;hit(11) /td  td id= td[12] quot;hit(12) /td  td id= td[13] quot;hit(13) /td  td id= td[14] quot;hit(14) /td  /tr  td id= td[15] quot;hit(15) /td  td id= td[16] quot;hit(16) /td  td id= td[17] quot;hit(17) /td  td id= td[18] quot;hit(18) /td  td id= td[19] quot;hit(19) /td  /tr  td id= td[20] quot;hit(20) /td  td id= td[21] quot;hit(21) /td  td id= td[22] quot;hit(22) /td  td id= td[23] quot;hit(23) /td  td id= td[24] quot;hit(24) /td  /tr  /table  /body  /html 

流程设计：

点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样

分数、命中率显示重置为“0”，倒计时开始（默认为30秒）

老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏

当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。