歷時10天，我的第一個HTML5游戲終于完成了，下來介紹我這個游戲——打地鼠 源碼在最下面，大家下下玩玩 演示地址：http://mousehit.sinaapp.com/mouseHit/index.html 游戲功能 1.幫助界面 2.游戲預備開始 3.5種不同地鼠的隨機出現 4.關卡設置，當然有計時條顯示 5.失敗和通過關卡設置 6.音效設置

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

瀏覽器兼容 1.兼容Chrome和FF（效果最不錯），但IE有問題（聲音也播不出）。
最后，大家有什么建議或者意見，可以發留言或者發郵件給我：lufeng2013@qq.com
（請了解：游戲中所有圖片和音樂均來自手機版同名游戲，本游戲僅供學習參考)

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。