^{<noscript id="oqsl8"></noscript>}

js實現(xiàn)打地鼠小游戲

2019-11-19 17:37:33

字體：大中小

供稿：網(wǎng)友

話不多說，請看代碼：

<!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, //分?jǐn)?shù) beat = 0, //鼠標(biāo)點擊次數(shù) success = 0, //命中率 knock = 0, //鼠標(biāo)點中老鼠圖片的次數(shù) countDown = 30, //倒計時 interId = null, //指定 setInterval()的變量 timeId = null; //指定 setTimeout()的變量 //游戲結(jié)束 function GameOver(){ timeStop(); playing = false;  clearMouse(); alert("游戲結(jié)束！/n 你獲得的分?jǐn)?shù)為："+score+"/n 命中率為："+success); success = 0; score = 0; knock = 0; beat = 0; countDown = 30; } //顯示當(dāng)前倒計時所剩時間 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);  } //隨機(jī)循環(huán)顯示老鼠圖片 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()實現(xiàn)3秒后隱藏老鼠圖片 } } //清除所有老鼠圖片 function clearMouse(){ for(var i=0;i<25;i++){ document.getElementById("td["+i+"]").innerHTML=""; } } //點擊事件函數(shù)，判斷是否點中老鼠 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> <div id="content"> <input type="button" value="開始游戲" onclick="GameStart()" /> <input type="button" value="結(jié)束游戲" onclick="GameOver()" /> <form name="form1" id="form1">  <label>分?jǐn)?shù)：</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>  <tr>  <td id="td[0]" onclick="hit(0)"></td>    <td id="td[1]" onclick="hit(1)"></td>  <td id="td[2]" onclick="hit(2)"></td>  <td id="td[3]" onclick="hit(3)"></td>  <td id="td[4]" onclick="hit(4)"></td>  </tr>  <tr>  <td id="td[5]" onclick="hit(5)"></td>  <td id="td[6]" onclick="hit(6)"></td>  <td id="td[7]" onclick="hit(7)"></td>  <td id="td[8]" onclick="hit(8)"></td>  <td id="td[9]" onclick="hit(9)"></td>  </tr>  <tr>  <td id="td[10]" onclick="hit(10)"></td>  <td id="td[11]" onclick="hit(11)"></td>  <td id="td[12]" onclick="hit(12)"></td>  <td id="td[13]" onclick="hit(13)"></td>  <td id="td[14]" onclick="hit(14)"></td>  </tr>  <tr>  <td id="td[15]" onclick="hit(15)"></td>  <td id="td[16]" onclick="hit(16)"></td>  <td id="td[17]" onclick="hit(17)"></td>  <td id="td[18]" onclick="hit(18)"></td>  <td id="td[19]" onclick="hit(19)"></td>  </tr>  <tr>  <td id="td[20]" onclick="hit(20)"></td>  <td id="td[21]" onclick="hit(21)"></td>  <td id="td[22]" onclick="hit(22)"></td>  <td id="td[23]" onclick="hit(23)"></td>  <td id="td[24]" onclick="hit(24)"></td>  </tr> </table> </div></body></html>

流程設(shè)計：