歷時(shí)10天，我的第一個(gè)HTML5游戲終于完成了，下來(lái)介紹我這個(gè)游戲——打地鼠 源碼在最下面，大家下下玩玩 演示地址：http://mousehit.sinaapp.com/mouseHit/index.html 游戲功能 1.幫助界面 2.游戲預(yù)備開(kāi)始 3.5種不同地鼠的隨機(jī)出現(xiàn) 4.關(guān)卡設(shè)置，當(dāng)然有計(jì)時(shí)條顯示 5.失敗和通過(guò)關(guān)卡設(shè)置 6.音效設(shè)置

經(jīng)驗(yàn) 1.找出需要的圖片和音頻時(shí)候 ????? 沒(méi)有必要重新選擇了，資源是從個(gè)android游戲解壓來(lái)的，本身就是符合這個(gè)游戲。但是，如果以后做正式項(xiàng)目時(shí)候，就不能靠解壓android游戲了（但誰(shuí)又會(huì)說(shuō)不會(huì)參考參考其他人，這你懂的）。
2.把圖片，相同功能作用的圖P在一起，解壓出來(lái)的圖片都是一張張，比較散亂。這樣可以減少圖片的http請(qǐng)求。為了使游戲更加流暢，可以用音頻和圖片的壓縮來(lái)優(yōu)化。
3.如果定位背景圖，有個(gè)比較簡(jiǎn)單方法，打開(kāi)dreamweaver，然后寫(xiě)個(gè)HTML頁(yè)面，里面就一句body里面就一句<img src="你要定位的圖片路徑"/>和設(shè)置CSS樣式*{margin:0;padding:0;} ，切換到設(shè)計(jì)界面，可以通過(guò)拉參考線(xiàn)，然后按ctrl鍵就知道定位位置。
4.當(dāng)setInterval里面的函數(shù)需要傳參數(shù)時(shí)候，可以使用匿名函數(shù)包裝的方式。 //為setInterval傳參數(shù) function foo() { var param = 100; window.setInterval(function() { intervalFunction(param); param++; }, 888); } intervalFunction(param){ ...... }
4.HTML5 canvas 在鼠標(biāo)的拖動(dòng)上有些不便的東西。比如30毫秒刷新一次canvas，而鼠標(biāo)如果在這30毫秒內(nèi)移動(dòng)速度快，就會(huì)產(chǎn)生鼠標(biāo)所在的位置會(huì)比canvas畫(huà)面快，而鼠標(biāo)控制的東西就有些滯后感。
5.設(shè)置存在矩陣(地鼠位于哪個(gè)洞)之后，碰撞檢測(cè)就不需要輪詢(xún)?nèi)繉?duì)象了，只需要檢測(cè)相應(yīng)位置的對(duì)象。這個(gè)方法適合那些在同個(gè)canvas位置上有多個(gè)不同對(duì)象的游戲。
6.鼠標(biāo)控制的游戲，HTML5 canvas 有些缺陷，也本身是頁(yè)面的問(wèn)題，就是在鼠標(biāo)迅速點(diǎn)擊，會(huì)出現(xiàn)“I”的圖標(biāo)（即使鼠標(biāo)），這比較影響人機(jī)交互。
7.canvas繪圖所畫(huà)的是那些經(jīng)常變化對(duì)象（如地鼠，計(jì)時(shí)條），其他不變部分最好是用HTML+CSS（如暫停按鈕）。
教訓(xùn)和不足 1.在5種地鼠的隨機(jī)產(chǎn)生過(guò)程中，本不應(yīng)該是同等概率出現(xiàn)的，但我還是同概率的。應(yīng)該，甚至是一關(guān)出現(xiàn)幾只都是計(jì)算好的。
2.框架這方面，由于之前的例子是用鍵盤(pán)事件的，而由于我的打地鼠游戲是鼠標(biāo)事件的，所以就不能安照他的例子。而且我要實(shí)現(xiàn)和其框架有些不大符合，最后打算用一半。
3.在功能完善難易和代碼整潔上，如果存在沖突，如何平衡之間的問(wèn)題，也是需要認(rèn)真考慮。

瀏覽器兼容 1.兼容Chrome和FF（效果最不錯(cuò)），但I(xiàn)E有問(wèn)題（聲音也播不出）。
最后，大家有什么建議或者意見(jiàn)，可以發(fā)留言或者發(fā)郵件給我：lufeng2013@qq.com
（請(qǐng)了解：游戲中所有圖片和音樂(lè)均來(lái)自手機(jī)版同名游戲，本游戲僅供學(xué)習(xí)參考)

?

總結(jié)

以上是生活随笔為你收集整理的我的第一个HTML5游戏——打地鼠总结及源码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。