在寫這個(gè)打地鼠的游戲開始首先要清楚每一步該做什么
然后再一步一步搭好框架再完善功能。
1.創(chuàng)建table三行三列，用來(lái)存放坑（圖片）
2.獲得所有的圖片標(biāo)簽
3.老鼠的動(dòng)作有①.冒出來(lái)
4.②. 老鼠跑了
5.③.老鼠被打死了
6.完善功能
一、首先實(shí)現(xiàn)第一步，用table創(chuàng)建一個(gè)三行三列的坑
<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>
接下來(lái)就是寫js函數(shù)。
二、首先獲得所有的坑的集合
var image = document.getElementsByTagName(‘img');
三、老鼠的動(dòng)作有：①.冒出來(lái)
老鼠冒出來(lái)的坑得獲得一個(gè)隨機(jī)的坑，然后將坑的圖片替換成地鼠的圖片
再將每個(gè)老鼠綁定click事件。然后要么打死觸發(fā)die()函數(shù)。要么隔一段時(shí)間觸發(fā)paole()函數(shù)
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);}四、老鼠的動(dòng)作： ②.老鼠很幸運(yùn)的跑了
如果執(zhí)行老鼠跑了的這個(gè)函數(shù)，那么得做一些改變。首先圖片得換成默認(rèn)的坑的圖片。然后移除掉綁定到它身上的click事件。最后再繼續(xù)調(diào)用老鼠出來(lái)的函數(shù)，chulai();
function paole(){ image[ranK].src = "./images/keng.gif"; image[ranK].style.marginTop = "31px"; image[ranK].removeAttribute("onclick"); setTimeout("chulai()", Math.random()*400+800);}五、老鼠的動(dòng)作： ③.老鼠很不幸的被我們打死了
老鼠執(zhí)行該事件得進(jìn)行以下改變，同樣也得移除它身上的click事件，將它的圖片換成受傷的圖片。
function die(){ image[ranK].src = "./images/shang.gif"; image[ranK].removeAttribute("onclick"); image[ranK].style.marginTop = "3px"; }在寫完了上面這些代碼后，貌似有了完整的功能，實(shí)際上卻不能執(zhí)行。因?yàn)樯倭艘粋€(gè)入口的函數(shù)，即老鼠出來(lái)的函數(shù)應(yīng)該被調(diào)用，當(dāng)然，這個(gè)函數(shù)也應(yīng)該在Math.random()的隨機(jī)時(shí)間中被調(diào)用，即整合后的代碼如下。
<script type="text/javascript">//1 先獲取到所有的坑(圖片)var image = document.getElementsByTagName('img');var ranK;//隨機(jī)時(shí)間調(diào)用入口函數(shù)setTimeout("chulai()",Math.random()*400+800);//讓老鼠隨機(jī)出現(xiàn)在一個(gè)坑里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>在通過(guò)設(shè)置css樣式后，就可以完美的執(zhí)行了。效果圖如下。
上面的主體代碼已經(jīng)完成了。接下來(lái)就添加功能。
添加功能一、記錄當(dāng)前打死的老鼠數(shù)
如果想要添加計(jì)數(shù)功能，那么在body中定義一個(gè)div塊，用來(lái)顯示當(dāng)前打死多少只老鼠的字符串。在這里我們?cè)O(shè)置為id為score。再定義一個(gè)變量count，記錄當(dāng)前打死的老鼠數(shù)。在die()函數(shù)中進(jìn)行count++。
部分代碼如下：
function die(){ image[ranK].src = "./images/shang.gif"; image[ranK].removeAttribute("onclick"); image[ranK].style.marginTop = "3px"; count++; score.innerHTML =count; }效果圖如下：
添加功能二、保存歷史最佳紀(jì)錄
要實(shí)現(xiàn)保存歷史最佳紀(jì)錄那么要使用本地存儲(chǔ)localStorage對(duì)象。在這兒我們主要使用該對(duì)象的
localStorage.setItem(“鍵名”,”值”)，將值以鍵值對(duì)的形式存儲(chǔ)到本地。localStorage.getItem(“鍵名”)；通過(guò)鍵名獲得值。
在這里我們只需將利用var preScore = localStorage.getItem(“鍵名”)獲得歷史的最佳記錄，然后與當(dāng)前的count進(jìn)行對(duì)比，如果preScore大于當(dāng)前的count，則不更新歷史最佳記錄。如果preScore小于了當(dāng)前的count，那么使preScore=count；再本輪游戲結(jié)束后進(jìn)行存儲(chǔ)。
添加功能三、設(shè)置倒計(jì)時(shí)器，控制游戲結(jié)束
那么本輪游戲什么時(shí)候可以結(jié)束，那么就要設(shè)置一個(gè)計(jì)時(shí)器。在這里我寫了一個(gè)一分鐘的倒計(jì)時(shí)器。當(dāng)sencond等于0，時(shí)游戲結(jié)束，然后再對(duì)
localStorage.setItem(“bestScore”,preScore)，進(jìn)行更新。
添加功能二和三的代碼如下：
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){ }}//設(shè)置一個(gè)定時(shí)器var seconds = 59;var speed = 1000;function countDown(seconds,speed){ var txt = "剩余時(shí)間：" + ((seconds < 10) ? "0" + seconds : seconds) +"秒"; div.innerHTML = txt; var timeId = setTimeout("countDown(seconds--,speed)",speed); //如果時(shí)間到了 if(seconds == 0){ //對(duì)最佳記錄進(jìn)行存儲(chǔ)，不管當(dāng)前有沒(méi)有打破記錄 localStorage.setItem("bestScore",preScore); clearTimeout(timeId); if(cover.style.display == "none"){ cover.style.display = "block"; //當(dāng)沒(méi)有打到一只老鼠的話顯示該信息 if(count === undefined) text.innerHTML = "當(dāng)前成績(jī)?yōu)椋?+0+"分"+"<br/>"+"游戲結(jié)束！"; //超越了歷史記錄，此時(shí)localStorage.getItem("bestScore")保存的值時(shí)當(dāng)前的count值。顯示該信息 else if(count == localStorage.getItem("bestScore")) { text.innerHTML = "當(dāng)前成績(jī)?yōu)椋?+count+"分"+"<br/>"+"恭喜您打破紀(jì)錄"+"<br/>"+"游戲結(jié)束！"; } else text.innerHTML = "當(dāng)前成績(jī)?yōu)椋?+count+"分"+"<br/>"+"游戲結(jié)束！"; } }}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">當(dāng)前得分 ：<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;//讓老鼠隨機(jī)出現(xiàn)在一個(gè)坑里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){ }}//設(shè)置一個(gè)定時(shí)器var seconds = 59;var speed = 1000;function countDown(seconds,speed){ var txt = "剩余時(shí)間：" + ((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 = "當(dāng)前成績(jī)?yōu)椋?+0+"分"+"<br/>"+"游戲結(jié)束！"; else if(count == localStorage.getItem("bestScore")){ text.innerHTML = "當(dāng)前成績(jī)?yōu)椋?+count+"分"+"<br/>"+"恭喜您打破紀(jì)錄"+"<br/>"+"游戲結(jié)束！"; } else text.innerHTML = "當(dāng)前成績(jī)?yōu)椋?+count+"分"+"<br/>"+"游戲結(jié)束！"; } }}countDown(seconds,speed);</script></body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
