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

更新時間：2017年02月13日 08:38:21 作者：ywhluck

本文主要分享了js實現(xiàn)打地鼠小游戲的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧

話不多說，請看代碼：

<!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, //分數(shù)
 beat = 0, //鼠標點擊次數(shù)
 success = 0, //命中率
 knock = 0, //鼠標點中老鼠圖片的次數(shù)
 countDown = 30, //倒計時
 interId = null, //指定 setInterval()的變量
 timeId = null; //指定 setTimeout()的變量
 //游戲結束
 function GameOver(){
 timeStop();
 playing = false;
  clearMouse();
 alert("游戲結束！\n 你獲得的分數(shù)為："+score+"\n 命中率為："+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); 
 }
 //隨機循環(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="結束游戲" onclick="GameOver()" />
 <form name="form1" id="form1">
  <label>分數(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ù)、命中率顯示重置為“0”，倒計時開始（默認為30秒）
老鼠圖片不斷顯示、隱藏，玩家可點擊鼠標左鍵進行游戲
當30秒倒計時結束或者玩家主動點擊“結束按鈕”時，游戲結束并顯示游戲結果

實例中用到的圖片附件下載

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

js
打地鼠

JavaScript中獲取未知對象屬性的代碼
JavaScript中獲取未知對象屬性的代碼，需要的朋友可以參考下。
2011-04-04
JavaScript+H5實現(xiàn)微信搖一搖功能
這篇文章主要為大家詳細介紹了JavaScript+H5實現(xiàn)微信搖一搖功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
JavaScript綁定事件監(jiān)聽函數(shù)的通用方法
這篇文章主要為大家詳細介紹了JavaScript綁定事件監(jiān)聽函數(shù)的通用方法，感興趣的朋友可以參考一下
2016-05-05
javascript實現(xiàn)小型區(qū)塊鏈功能
這篇文章主要介紹了javascript實現(xiàn)小型區(qū)塊鏈功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
科訊商業(yè)版中用到的ajax空間與分頁函數(shù)
科訊商業(yè)版中用到的ajax空間與分頁函數(shù)...
2007-09-09
JS面向對象編程淺析
下面就結合我自己的體會和所學習的東東和大家一起來學習在JS中如何使用面向對象的編程。
2011-08-08
layer彈出層中H5播放器全屏出錯的解決方法
本文主要介紹了layer彈出層中H5播放器全屏出錯解決&屬性poster底圖占滿video的方法，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
表單提交(插入效果)javascript
表單提交(插入效果)javascript...
2006-08-08
JavaScript數(shù)組every方法的應用場景實例
every方法確定數(shù)組中的每一項的結果都滿足所寫的條件的時候,就會返回true,否則返回false,這篇文章主要給大家介紹了關于JavaScript數(shù)組every方法應用場景的相關資料,需要的朋友可以參考下
2022-12-12
Javascript設計模式之觀察者模式的多個實現(xiàn)版本實例
這篇文章主要介紹了Javascript設計模式之觀察者模式的多個實現(xiàn)版本實例,本文給出3種實現(xiàn)版本代碼,同時給出了Jquery實現(xiàn)版本,需要的朋友可以參考下
2015-03-03