对于没有接触过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事件。
点击生成代码即可。
同样第二个场景切换到第三个场景也可以依葫芦画瓢。
我们一直在旅行，一直在等待某个人可以成为我们旅途的伴侣，
