話不多說，請看代碼：

 !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秒倒計時結束或者玩家主動點擊“結束按鈕”時，游戲結束并顯示游戲結果

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。