Javascript實現(xiàn)打地鼠小游戲_第1頁
Javascript實現(xiàn)打地鼠小游戲_第2頁
Javascript實現(xiàn)打地鼠小游戲_第3頁
Javascript實現(xiàn)打地鼠小游戲_第4頁
Javascript實現(xiàn)打地鼠小游戲_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

1、JavaScrip便現(xiàn)打地鼠小游戲本項目名為打地鼠，是大家耳熟能詳?shù)囊豢罱?jīng)典的小游戲。 游戲最終將會以html 文件形式完成，需要使用Firefox等瀏覽器打開才能看到游戲的最終效果。止匕外， 游戲?qū)捎肑avaScript實現(xiàn)整個邏輯流程，所以建議沒有 JavaScript基礎(chǔ)的同 學(xué)首先學(xué)習(xí)javaScript教程。游戲最終效果截圖如下：分?jǐn)?shù)】0 命中率t 0倒計時t 22:、核心方法介紹在打地鼠小游戲中將會多次用到JavaScript中的計時函數(shù)：? setTimeout() ? setInterval()這兩個函數(shù)的作用很大，不僅僅在本次的小游戲中，在很多的JavaScript程序中

2、都會有 他們”的身影。接下來將會詳細(xì)的剖析這兩個函數(shù)。1. setTimeout()用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式(只執(zhí)行一次，可通過創(chuàng)建一個函數(shù)循環(huán)重復(fù)調(diào)用setTimeout ,來實現(xiàn)重復(fù)操作)用法示例? setTimeout("functionName()",1000);? setTimeout(functionName,1000);調(diào)用一個無參的方法很簡單，但當(dāng)我們需要調(diào)用一個帶有參數(shù)的函數(shù)時，問題就來了。解決的方法就是再寫一個函數(shù)，該函數(shù)返回一個不帶參數(shù)的函數(shù)。示例如下：function show(name) alert(name +", 你好

3、！ ");function returnFun(name) return function() show(name); setTimeout(returnFun("小明")，1000);clearTimeout()立即終止setTimeout() 方法。示例：var timeId = set Timeout(.);clearTimeout(timeId);2. setInterval()可按照指定的周期(毫秒)來調(diào)用函數(shù)或計算表達(dá)式。與setTimeout() 不同，不論調(diào)用的函數(shù)或計算表達(dá)式需要多長時間才能執(zhí)行完, 它都只是簡單的每隔一定時間就重復(fù)執(zhí)行一次那個函

4、數(shù)或計算表達(dá)式。用法示例? setInterval("functionName()",1000);? setInterval(functionName,1000);clearInterval()立即終止setInterval() 方法。示例：var interld =set Interval，.)；clearlnterval(interld);、游戲制作3. 功能邏輯設(shè)計功能包括：? 得分統(tǒng)計? 計算成功率? 老鼠圖片的隱藏、顯示? 判斷是否點中老鼠? 最終結(jié)果顯不'? 錯誤提示流程設(shè)計：? 點擊開始游戲”按鈕游戲開始，否則將提示 請點擊開始游戲”字樣? 分?jǐn)?shù)、命中

5、率顯示重置為 “0,”倒計時開始(默認(rèn)為 30秒)? 老鼠圖片不斷顯示、隱藏，玩家可點擊鼠標(biāo)左鍵進行游戲? 當(dāng)30秒倒計時結(jié)束或者玩家主動點擊結(jié)束按鈕”時，游戲結(jié)束并顯示游戲結(jié)果游戲設(shè)計簡單， 并未添加其他豐富的游戲設(shè)計， 也沒有添加動畫、 聲音等特殊效果，其目的是想帶領(lǐng)大家從簡潔的游戲邏輯設(shè)計中清楚地體會到從設(shè)計到開發(fā)、完善的樂趣，能通過簡單的幾行代碼也能輕松實現(xiàn)一個屬于自己制作的小游戲。4. 框架設(shè)計游戲通過 html 文件實現(xiàn)，自然離不開html 標(biāo)簽，常見的打地鼠游戲都是規(guī)則的幾個固定位置隨機出現(xiàn)老鼠，因此本次游戲設(shè)計將會采用 <table> 標(biāo)簽來布局，得分、命中率等結(jié)果

6、顯示將使用<input>標(biāo)簽。html代碼(包括cs§如下：<!DOCTYPE html><html><head><title> 打地鼠 </title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">#content width: 960px;margin: 0 auto;text-align: c

7、enter;table margin: 0 auto;table:hover cursor: url('img/chuizi.png'),auto;/此處圖片路徑要依據(jù)自己的路徑來修改td width: 95px;height: 95px;background-color: #00ff33;</style><script> / 下一節(jié)將會詳細(xì)講解</script></head><body><div id="content"><input type="button"

8、; value=" 開始游戲 " onclick="GameStart()"><input type="button" value=" 結(jié)束游戲 " onclick="GameOver()"><form name="form1"><label> 分?jǐn)?shù)：</label><input type="text" name="score" size="5">&l

9、t;label> 命中率：</label><input type="text" name="success" size="10"><label> 倒計時：</label><input type="text" name="remtime" size="5"></form><table><tr><td id="td0" onclick="hit

10、(0)"></td><td id="td1" onclick="hit"></td><td id="td2" onclick="hit(2)"></td><td id="td3" onclick="hit(3)"></td><td id="td4" onclick="hit(4)”></td></tr><t

11、r><td id="td5" onclick="hit(5)"></td><td id="td6" onclick="hit(6)"></td><td id="td7" onclick="hit(7)"></td><td id="td8" onclick="hit(8)"></td><td id="td9" o

12、nclick="hit(9)"></td></tr><tr><td id="td10" onclick="hit(10)"></td><td id="td11" onclick="hit(11)"></td><td id="td12" onclick="hit(12)"></td><td id="td13" oncli

13、ck="hit(13)"></td><td id="td14" onclick="hit(14)”></td></tr><tr><td id="td15" onclick="hit(15)"></td><td id="td16" onclick="hit(16)"></td><td id="td17" onclick="

14、;hit(17)"></td><td id="td18" onclick="hit(18)"></td><td id="td19" onclick="hit(19)"></td></tr><tr><td id="td20" onclick="hit(20)"></td><td id="td21" onclick="hi

15、t(21)"></td><td id="td22" onclick="hit(22)"></td><td id="td23" onclick="hit(23)"></td><td id="td24" onclick="hit(24)"></td></tr></table></div></body></html>這樣打地

16、鼠小游戲的結(jié)構(gòu)設(shè)計就完成了，可以保存后通過Firefox 瀏覽器查看當(dāng)前效果。5. 功能邏輯實現(xiàn)代碼配上詳細(xì)注解：var td =playing =score =beat =success =knock =countDown =interId =timeId =/ 游戲結(jié)束 timeStop();playing = clearMouse();new Array (), false , 0, 0,0,0,30, null , null ;/ 保存每個格子的地鼠/ 游戲是否開始/ 分?jǐn)?shù)/ 鼠標(biāo)點擊次數(shù)/ 命中率/ 鼠標(biāo)點中老鼠圖片次數(shù)/ 倒計時/ 指定 setInterval() 的變量/ 指定

17、setTimeout() 的變量function GameOver() false ;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 =

18、countdown-1;timeId = setTimeout("timeShow()" , 1000);/ 主動停止所有計時 function timeStop() clearInterval(interId);/clearInterval() 方法返回 setInterval() 方法的 idclearTimeout(timeId);/clearTime() 方法返回 setTimeout() 的 id/ 隨機循環(huán)顯示老鼠圖片 function show() if (playing)var current =Math.floor(Math.random()*25);/

19、這里的路徑也需要根據(jù)自己的實際文件路徑來修改document.getElementById("td" +current+ "" ).innerHTML = '<imgsrc="img/mouse.png">' ;/ 使用 setTimeout() 實現(xiàn) 3 秒后隱藏老鼠圖片setTimeout( "document.getElementById('td" +current+ "').innerHTML=''" 3000);/ 清除所有老

20、鼠圖片 function clearMouse() for ( var i= 0;i<= 24;i+)document.getElementById("td" +i+ "" ).innerHTML= "" ;/ 點擊事件函數(shù)，判斷是否點中老鼠function hit(id) if (playing= false )alert( "請點擊開始游戲" );return ; elsebeat +=1;if ( document.getElementById("td" +id+ "&qu

21、ot; ).innerHTML!= "" )score +=1;knock +=1;success = knock/beat;document.form1.success.value = success;document.form1.score.value = score;document.getElementById("td" +id+ "" ).innerHTML= "" ;elsescore += -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();

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論