對于沒有接觸過html的朋友，要實現一個最簡單的html5打地鼠游戲，也是不知道從何下手的。就算是html高手，沒有上千行代碼，也完不成一個像樣的打地鼠游戲。

網上找到一個開源的打地鼠游戲(參見下載地址)，粗略看了一下代碼，代碼行數1000+。

今天我要介紹的打地鼠游戲，主要邏輯代碼，也就60多行，所有的代碼加起來也就100多行，是為某客戶定制的一款比較完整的商業游戲，大部分的功能也就只是一下午的時間就能完成。

先看一下實際的成果：
PC點擊這里玩
手機下方掃描二維碼玩

如果你想在本游戲上進行改進，點擊這里。

開始講解之前，打個廣告，歡迎html5游戲開發愛好者掃描下方二維碼或者搜群號223466431，加入開發者QQ群，我們免費提供最快速的開發工具，我們的所有html5游戲都開源。

整個游戲的開發，基于在線H5游戲開發工具TangIDE，相關開發文檔點擊這里，開發視頻正在制作中…如果您致力于開發H5輕應用，請點這里

1. 準備工作

瀏覽器打開TangIDE鏈接，右上角有登陸按鈕，選擇QQ登陸。
瀏覽器推薦谷歌瀏覽器或者獵豹瀏覽器。

2. 創建第一個場景

打開工具后，就有個默認場景，這個場景可以作為我們的第一個場景，把里面的足球和和草地刪掉，場景改名為win-loading，然后更改背景為”加載背景.jpg”。圖片資源在公共資源目錄下面：

拖一個音樂控件進來，清除默認背景音樂，選擇資源菜單下的”背景音樂.mp3”作為背景音樂，勾選”自動播放”和”循環”兩個選項，在通用標簽里不勾選”運行時可見選項”。

全部做好之后，成果如下

3. 創建第二個場景

新建一個場景，將場景名字改為win-start。
拖一個圖片進來，設置圖片為”標題1.png”，放在場景的頂部，按照下圖設置位置和大小屬性：

其他幾個圖片控件類似。

拖兩個文本控件進來，表示分數和時間。

這里重點要講的一個元素是雪花，拖一個圖片控件進來，將圖片設置為”雪花.png”，這里需要拆分圖片，方法是長按圖片會彈出菜單，選擇”拆分圖像”后，填入行列數即可


再次選擇時就可以選里面的小圖了。

選擇完圖片之后，要用到動畫編輯器了(選中控件，菜單欄有個小人圖標就是)。

創建一個動畫rotate，設置如下圖

這個時候點擊預覽就雪花就可以一直轉了。

再拖兩個按鈕進來，分別放置”開始按鈕1.png”，”開始按鈕t2.png”。

最后拖一個幀動畫進來，在特有屬性里面，選擇”黑色素.png”作為幀動畫元素，按上述方法拆分圖片，選擇第0，1張圖片，幀率設置為3。

全部完成后，如下圖：

4. 創建第三個場景

新建一個場景，改名為win-game，其他的控件如第二個場景一樣放置。
然后，最終要的控件是地鼠（即黑色素）的實現：
首先拖一個圖片控件進來，將背景圖片清空。
再拖一個幀動畫到圖片上，作為這個圖片控件的子控件。
用動畫編輯器為幀動畫設置三個動畫，如下圖所示：



為幀動畫選擇圖片，在特有屬性里面，拆分”黑色素.png”，然后設置2個分組，如下圖：


然后選擇幀動畫的父控件，復制7個，擺放到合適的位置，調整一下旋轉角度，使其看起來更美觀一些。

再拖一個幀動畫，作為點滴效果，選擇”精華液.png”作為幀動畫圖片，圖片拆分和分組如上不再贅述。

最后拖一個時鐘控件用來做倒計時用，特有屬性的時長設置為1000。
全部完成之后，如下圖：

5. 編寫一點代碼

其他的游戲場景不再贅述，讀者可自行編輯和參考，到現在為止，游戲的準備工作都已經做完了，我們還沒寫一行代碼，但是點擊預覽，就已經能看到大部分效果了，只是不能響應事件而已。
現在該寫一些代碼了，其實很多代碼還可以自動生成的。
首先場景的切換，比如第一個場景切換到第二個場景的代碼就可以自動生成，選中場景，編輯onClick事件。

點擊生成代碼即可。

同樣第二個場景切換到第三個場景也可以依葫蘆畫瓢。

現在重點講第三個場景的實現。
選中黑色素幀動畫的父控件，編輯器onUpdateTransform事件，添加如下代碼：

canvas.beginPath(); canvas.arc(this.w >> 1, this.h >> 1, this.w >> 1, 0, 2 * Math.PI); canvas.clip();

這三行代碼，實現的是黑色素（也就是地鼠）的隱藏和顯示。

在第三個場景的onBeforeOpen中，添加如下代碼：

var win = this.getWindow(); var STATE_IN = 0; var STATE_OUT = 2; var STATE_FREE = 3; var STATE_ATTACKED = 4; win.attacked = 0; win.total = 0; win.times = 30; win.gameOver = false; var dropper = win.find("dropper"); win.find("ui-icon-general-1").setVisible(true); var resetState = function() {if(win.gameOver || !this.children) {return;}var self = this;var element = self.children[0];win.total++;element.opacity = 1;element.x = 200;element.y = 200;element.play("normal");self.gameState = STATE_IN;element.animate("display", function() {self.gameState = STATE_FREE;setTimeout(function() {if(self.gameState === STATE_FREE) {self.gameState = STATE_OUT;element.animate("dismiss");}setTimeout(function() {if(self) {self.resetState();}}, 1200 + 800 * Math.random());}, 1500);}); }; var handleClick = function(point) {var self = this;if(self.gameState === STATE_FREE) {win.attacked++;win.find("ui-attacked").setText(win.attacked + "ko");dropper.animate({xStart:dropper.x, xEnd:self.x + 50, duration:400}, function() {dropper.play("drop", 1, function() {dropper.play("normal", 1);});});self.gameState = STATE_ATTACKED;var element = this.children[0];element.play("attacked", 1, function() {element.animate("disappear", function() {});});} }; for(var i = 1; i <= 7; i++) {var melanin = win.find("ui-sprite-general-" + i);melanin.resetState = resetState;melanin.handleClick = handleClick;var ele = melanin.children[0];ele.setPosition(200, 200); }var index = 1; function launch() {var melanin = win.find("ui-sprite-general-" + index);melanin.resetState();if(index < 7) {index++;setTimeout(launch, 1500 * Math.random());} } launch();

時鐘控件的onTimeout事件下添加如下代碼：

var win = this.getWindow(); if(win.gameOver) {return; } win.times--; win.find("ui-times").setText(win.times + "s''"); if(win.times <= 0) {win.gameOver = true;var initData = {};initData.total = win.total;initData.attacked = win.attacked;this.openWindow("win-result", function (retData) {console.log("window closed.");}, false, initData); }

TIPS:
如果你想看全部的代碼，可以選擇工具->代碼查看器

如果你看完覺得手癢，想在我的基礎上繼續改進，點擊這里。
如果有疑問或者指教，歡迎加群223466431討論，謝謝！

總結

以上是生活随笔為你收集整理的TangIDE游戏开发之70行代码实现打地鼠的全部內容，希望文章能夠幫你解決所遇到的問題。

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