HTML5遊戲實戰之20行代碼實現打地鼠
之前寫過一篇打地鼠的博客70行的代碼實現打地鼠遊戲，細致思考過後，發現70行代碼都有點多余了，應用tangide的控件特性，能夠將代碼量縮減到20行左右。
先show一下終於成果，點擊試玩：打地鼠。或者掃描二維碼：
假設你想在這個遊戲上改進。點擊這裏。
開始解說之前，打個廣告。歡迎html5遊戲開發愛好者掃描下方二維碼或者搜群號223466431，增加開發人員QQ群，我們免費提供最高速的開發工具。我們的全部html5遊戲都開源。
整個遊戲的開發。基於在線H5遊戲開發工具TangIDE，相關開發文檔點擊這裏，觀看開發視頻點擊這裏。假設您致力於開發H5輕應用，請點這裏。
1. 準備工作
瀏覽器打開TangIDE鏈接，右上角有登陸button，選擇QQ登陸。
瀏覽器推薦谷歌瀏覽器或者獵豹瀏覽器。
遊戲所需的資源文件夾：共享資源/成套資源/模板/打地鼠/
2. 創建第一個場景
打開TangIDE後，默認有兩個場景，一個是資源載入窗體，能夠不用管，另外有個默認主場景。這個場景能夠作為我們的第一個場景。把裏面的足球和和草地刪掉，場景改名為“開始界面”，然後更改背景。依次把所須要的控件拖拽進來，例如以下圖所看到的：
分別為微信控件，音效控件。背景音樂控件編輯特有屬性：
3. 創建第二個場景
新建一個場景，將場景名字改為“遊戲界面”。
地鼠的制作：
a、拖一個圖片控件進來。將背景圖片清空。
b、拖一個幀動畫到圖片上。作為這個圖片控件的子控。
c、在幀動畫的特有屬性中加入地鼠的幀動繪圖片。
d、為幀動畫分組。
e、利用動畫編輯器為地鼠添加出洞入洞的動畫。
f、編輯幀動畫的onClick事件。加入例如以下代碼，這段代碼響應擊打動作，播放音效並得分，同一時候播放被打的動畫效果：
var win = this.getWindow();
win.hammer.setPosition(this.getParent().x,this.getParent().y);
win.hammer.animate("down");
win.playSoundEffect("擊打.mp3", function onDone() {console.log("play finished");});
win.score++;
win.find("雲/計分板/得分").setValue(win.score);
var ele = this;
ele.play("hit", 2, function() {
ele.play("out");
});
g、選中幀動畫的父控件。編輯它的onUpdateTransform事件。加入例如以下代碼，這段代碼表示該控件僅僅顯示固定區域，假設子控件超出該區域不顯示，實現地鼠的出入洞效果。
<pre class="javascript" name="code">canvas.beginPath(); canvas.rect(0,0,this.w,this.h); canvas.clip();
這樣，一個完整的地鼠就做完了，遊戲界面中有16個地鼠。做好第一個。余下的復制粘貼就可以。
地鼠洞：
地鼠洞也須要一張圖片來表示，復制粘貼16個，依次擺放到地鼠下方就可以。
遊戲時間的控制：
拖拽一個定時器到場景中，將特有屬性中的運行次數設置為1，時長設置為30000。代表整個遊戲僅僅進行30s。
編輯onTimeOut事件，創建提前定義事件，打開新窗體。
var initData = this.getWindow().score;
this.openWindow("結束界面",
function (retData) {console.log("window closed.");}, false, initData);
地鼠隨機出入洞的實現：
拖拽一個定時器到場景中，將特有屬性中的運行冊數設置為1000000，時長為500。代表0.5s讓一個地鼠出洞。
編輯onTimeOut事件，這段代碼隨機選擇一個抵觸，讓其播放出洞動畫。
var win = this.getWindow();
var index = Math.floor(Math.random() * 16);
win.find("切圖-" + index).getChild(0).animate("up");
完整的界面如圖：
遊戲的初始化：
編輯場景的onBeforeOpen事件，這段代碼主要是在遊戲開始前分數清零，將地鼠隱藏起來。
var win = this.getWindow();
var me = this;
win.resetGame();
win.score = 0;
win.hammer = win.find("錘子");
win.hammer.setPivot(1,0.5);
for(var i = 0; i < 16; i++) {
var gopher = win.find("切圖-" + i).getChild(0);
gopher.setPosition(gopher.x, gopher.y + 100);
}
上述的20多行代碼。就完畢了一個功能完整的打地鼠遊戲，包含豐富的動畫，聲音效果，甚至微信分享。
結束場景很easy，不再贅述。
歡迎增加QQ群223466431交流。
HTML5遊戲實戰之20行代碼實現打地鼠