JavaScript實現打地鼠小遊戲，javascript打地鼠

JavaScript實現打地鼠小遊戲，javascript打地鼠

在寫這個打地鼠的遊戲開始首先要清楚每一步該做什麼
然後再一步一步搭好架構再完善功能。

1.建立table三行三列，用來存放坑（圖片）
2.獲得所有的圖片標籤
3.老鼠的動作有①.冒出來
4.②. 老鼠跑了
5.③.老鼠被打死了
6.完善功能

一、首先實現第一步，用table建立一個三行三列的坑

<div id = "content"><h2>打地鼠</h2><br/><table id = "background"><tr><td><img src="./images/keng.gif" ></td><td><img src="./images/keng.gif" ></td><td><img src="./images/keng.gif" ></td></tr><tr><td><img src="./images/keng.gif" ></td><td><img src="./images/keng.gif" ></td><td><img src="./images/keng.gif" ></td></tr><tr><td><img src="./images/keng.gif" ></td><td><img src="./images/keng.gif" ></td><td><img src="./images/keng.gif" ></td></tr></table>

接下來就是寫js函數。

二、首先獲得所有的坑的集合

var image = document.getElementsByTagName(‘img');

三、老鼠的動作有：①.冒出來

老鼠冒出來的坑得獲得一個隨機的坑，然後將坑的圖片替換成地鼠的圖片
再將每個老鼠綁定click事件。然後要麼打死觸發die()函數。要麼隔一段時間觸發paole()函數

function chulai(){ ranK = Math.floor(Math.random() * 9); image[ranK].src = "./images/dishu.gif"; image[ranK].style.marginTop = "0px"; image[ranK].setAttribute("onclick","die()"); setTimeout("paole()", Math.random()*400+800);}

四、老鼠的動作： ②.老鼠很幸運的跑了
如果執行老鼠跑了的這個函數，那麼得做一些改變。首先圖片得換成預設的坑的圖片。然後移除掉綁定到它身上的click事件。最後再繼續調用老鼠出來的函數，chulai();

function paole(){ image[ranK].src = "./images/keng.gif"; image[ranK].style.marginTop = "31px"; image[ranK].removeAttribute("onclick"); setTimeout("chulai()", Math.random()*400+800);}

五、老鼠的動作： ③.老鼠很不幸的被我們打死了
老鼠執行該事件得進行以下改變，同樣也得移除它身上的click事件，將它的圖片換成受傷的圖片。

function die(){ image[ranK].src = "./images/shang.gif"; image[ranK].removeAttribute("onclick"); image[ranK].style.marginTop = "3px"; }

在寫完了上面這些代碼後，貌似有了完整的功能，實際上卻不能執行。因為少了一個入口的函數，即老鼠出來的函數應該被調用，當然，這個函數也應該在Math.random()的隨機時間中被調用，即整合後的代碼如下。

<script type="text/javascript">//1 先擷取到所有的坑(圖片)var image = document.getElementsByTagName('img');var ranK;//隨機時間調用入口函數setTimeout("chulai()",Math.random()*400+800);//讓老鼠隨機出現在一個坑裡function chulai(){ ranK = Math.floor(Math.random() * 9); image[ranK].src = "./images/dishu.gif"; image[ranK].style.marginTop = "0px"; image[ranK].setAttribute("onclick","die()"); setTimeout("paole()", Math.random()*400+800);}//2 老鼠回去了function paole(){ image[ranK].src = "./images/keng.gif"; image[ranK].style.marginTop = "31px"; image[ranK].removeAttribute("onclick"); setTimeout("chulai()", Math.random()*400+800);}//3 老鼠被打死了function die(){ image[ranK].src = "./images/shang.gif"; image[ranK].removeAttribute("onclick"); image[ranK].style.marginTop = "3px";}</script>

在通過設定css樣式後，就可以完美的執行了。如下。

上面的主體代碼已經完成了。接下來就添加功能。

添加功能一、記錄當前打死的老鼠數

如果想要添加計數功能，那麼在body中定義一個div塊，用來顯示當前打死多少只老鼠的字串。在這裡我們設定為id為score。再定義一個變數count，記錄當前打死的老鼠數。在die()函數中進行count++。
部分代碼如下：

function die(){ image[ranK].src = "./images/shang.gif"; image[ranK].removeAttribute("onclick"); image[ranK].style.marginTop = "3px"; count++; score.innerHTML =count; }

如下：

添加功能二、儲存曆史最佳紀錄

要實現儲存曆史最佳紀錄那麼要使用本機存放區localStorage對象。在這兒我們主要使用該對象的
localStorage.setItem(“鍵名”,”值”)，將值以索引值對的形式儲存到本地。localStorage.getItem(“鍵名”)；通過鍵名獲得值。

在這裡我們只需將利用var preScore = localStorage.getItem(“鍵名”)獲得曆史的最佳記錄，然後與當前的count進行對比，如果preScore大於當前的count，則不更新歷史最佳記錄。如果preScore小於了當前的count，那麼使preScore=count；再本輪遊戲結束後進行儲存。

添加功能三、設定倒計時器，控制遊戲結束

那麼本輪遊戲什麼時候可以結束，那麼就要設定一個計時器。在這裡我寫了一個一分鐘的倒計時器。當sencond等於0，時遊戲結束，然後再對
localStorage.setItem(“bestScore”,preScore)，進行更新。
添加功能二和三的代碼如下：

function die(){ try{ image[ranK].src = "./images/shang.gif"; image[ranK].removeAttribute("onclick"); image[ranK].style.marginTop = "3px"; count++; score.innerHTML =count; if( count > preScore) {  score1.innerHTML = count;  preScore = count; } localStorage.setItem("bestScore",preScore); }catch(ex){ }}//設定一個定時器var seconds = 59;var speed = 1000;function countDown(seconds,speed){ var txt = "剩餘時間：" + ((seconds < 10) ? "0" + seconds : seconds) +"秒"; div.innerHTML = txt; var timeId = setTimeout("countDown(seconds--,speed)",speed); //如果時間到了 if(seconds == 0){ //對最佳記錄進行儲存，不管當前有沒有打破記錄 localStorage.setItem("bestScore",preScore);  clearTimeout(timeId);  if(cover.style.display == "none"){  cover.style.display = "block";  //當沒有打到一隻老鼠的話顯示該資訊 if(count === undefined)  text.innerHTML = "當前成績為："+0+"分"+"<br/>"+"遊戲結束！"; //超越了記錄，此時localStorage.getItem("bestScore")儲存的值時當前的count值。顯示該資訊 else if(count == localStorage.getItem("bestScore")) { text.innerHTML = "當前成績為："+count+"分"+"<br/>"+"恭喜您打破紀錄"+"<br/>"+"遊戲結束！"; } else  text.innerHTML = "當前成績為："+count+"分"+"<br/>"+"遊戲結束！";   } }}countDown(seconds,speed);

如下：

最後附上完整的原始碼

<!DOCTYPE html><html><head><mata charset = "utf-8" /> <title>打地鼠</title> <script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> *{ margin: 0px; padding: 0px; } #background{ background: url(./images/beijing.jpg); } h2{  font-family: "微軟雅黑";  font-size: 30px;  padding-left: 100px; } table td{  width: 100px;  height: 100px; } img{  margin-top: 31px; } #content{  z-index: 1;  margin-left: 40%; } #count{ width: 320px; height: 40px; background-color:#E8E8E8;  padding-left: 0px; text-align: center; color: red; font-size: 18px; line-height: 30px; font-family: "微軟雅黑"; } #count .score{ text-align: center; color: lightgreen; font-size: 20px; line-height: 30px; font-family: "微軟雅黑"; } #history #id{ text-align: center; color: lightgreen; font-size: 20px; line-height: 30px; font-family: "微軟雅黑"; } #history{ position: absolute; top:60px; right:240px; width: 180px; height: 90px; background-color: #E8E8E8; color: lightblue; font-size:20px; line-height: 80px; text-align: center; } .clock{ position: absolute; top:0px; right:240px; width: 180px; height: 60px; background-color: lightblue; color: red; font-size: 20px; text-align: center; line-height: 60px; } #cover{  margin-top: 0px; position: absolute; z-index: 2; width: 800px; height: 600px; top: 0px;  left: 0px;  right: 0px;  bottom: 0px;  margin: auto;  background :rgba(128,128,128,0.5); color: red; font-size: 30px; text-align: center; vertical-align: middle; } </style></head><body><div id = "content"><h2>打地鼠</h2><br/><table id = "background"> <tr> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> </tr> <tr> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> </tr> <tr> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> </tr></table><div id = "count">當前得分 ：<span class = "score"> 0 </span>分</div><div id = "history">最佳記錄: <span id = "score1"> 0 </span>分</div><div class = "clock"></div></div><div id = "cover" style="display:none"> <span id = "text"></span></div><script type="text/javascript">//1 先擷取到所有的坑(圖片)var content = document.getElementById('content');var cover = document.getElementById('cover');var image = document.getElementsByTagName('img');var countMouse = document.getElementById('count');var score = countMouse.querySelector(".score");var history = document.getElementById("history");var score1 = document.getElementById("score1");var div = document.querySelector(".clock");var text = document.getElementById("text");var preScore = 0;var ranK;var count = 0;// localStorage.removeItem("bestScore");// localStorage.removeItem("scoreshow");preScore = localStorage.getItem("bestScore");console.log(preScore);score1.innerHTML = preScore;//讓老鼠隨機出現在一個坑裡setTimeout("chulai()",Math.random()*400+800);function chulai(){ try{ ranK = Math.floor(Math.random() * 9); image[ranK].src = "./images/dishu.gif"; image[ranK].style.marginTop = "0px"; image[ranK].setAttribute("onclick","die()"); setTimeout("paole()", Math.random()*400+800); }catch(ex){}}//2 老鼠回去了function paole(){ try{ image[ranK].src = "./images/keng.gif"; image[ranK].style.marginTop = "31px"; image[ranK].removeAttribute("onclick"); setTimeout("chulai()", Math.random()*400+800); }catch(ex){}}//3 老鼠被打死了function die(){ try{ image[ranK].src = "./images/shang.gif"; image[ranK].removeAttribute("onclick"); image[ranK].style.marginTop = "3px"; count++; score.innerHTML =count; if( count > preScore) {  score1.innerHTML = count;  preScore = count; } localStorage.setItem("bestScore",preScore); }catch(ex){ }}//設定一個定時器var seconds = 59;var speed = 1000;function countDown(seconds,speed){  var txt = "剩餘時間：" + ((seconds < 10) ? "0" + seconds : seconds) +"秒";  div.innerHTML = txt;  var timeId = setTimeout("countDown(seconds--,speed)",speed);  if(seconds == 0){   //localStorage.setItem("scoreshow",count);   localStorage.setItem("bestScore",preScore);   clearTimeout(timeId);   if(cover.style.display == "none"){    cover.style.display = "block";   if(count === undefined)    text.innerHTML = "當前成績為："+0+"分"+"<br/>"+"遊戲結束！";   else if(count == localStorage.getItem("bestScore")){    text.innerHTML = "當前成績為："+count+"分"+"<br/>"+"恭喜您打破紀錄"+"<br/>"+"遊戲結束！";    }   else    text.innerHTML = "當前成績為："+count+"分"+"<br/>"+"遊戲結束！";    }    }}countDown(seconds,speed);</script></body></html>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。