TangIDE游戏开发之70行代码实现打地鼠

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