对于没有接触过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讨论，谢谢！