伐木工游戏大家都玩过，今天介绍它在TangIDE上的实现方式，大概70行左右代码。
这个版本的伐木工，是为麦当劳定制的，放了一些麦当劳的一些产品。
先show一下最终的成果，您可以点这里玩，或者手机扫描二维码：
当然如果您想在线编辑此游戏，点这里。
在开始介绍游戏开发步骤前，先打个广告，对html5游戏开发，TangIDE 或者Cantk 感兴趣的朋友请扫描下方二维码，加入七巧板官方QQ交流群，一起交流做html5游戏的乐趣，群主正是Cantk作者李先静老师。
相信经过一段时间的训练，每天做1～2个小游戏没有任何问题。
现在开始介绍整个游戏的开发过程：
资源加载窗口
打开www.tangide.com，在左侧树形图中，可以看到有2个窗口（场景），一个是资源加载窗口，可以随意自定义资源加载窗口。您可以像普通的窗口一样，在里面放各种控件，实现各种动画，但前提是图片得用data url，参考Cantk官方WIKI说明，data url的转换参见工具->Data URL产生器。
我们转换一张背景图的data url，然后将data url拷贝到控件的背景图片中。
然后拖一个图片控件进来，同样将loading图片的data url拷贝到它的背景图片中，然后用动画编辑器编辑一下动画。
然后将资源加载进度条，设置为”运行时不可见”。
开始场景
新建一个场景，更名为”开始场景”，拖一个图片控件，设置背景图片为麦当劳logo，再拖一个图片控件，设置背景图片为标题…全部完成后，如图所示：
提示场景
新建一个场景，更名为”提示场景”，拖一张图片作为麦当劳logo，另一张作为提示背景，拖一张图片控件作为它的子控件，设置图片为汉堡，再拖一个图片控件放禁止标识图片。
其中禁止标识图片需要有动画：
全部完成后，效果图如下：
游戏场景
伐木工
拖一个帧动画进来，设置3张图片，分组为3个动作”hit”,”eat”,”stand”。
拖一个图片控件进来，用动画编辑器编辑一个放大动画，表示在伐木工头上的爆炸效果。
进度条
拖一个进度条进来，拉成竖直形状。
树木
拖一个图片控件进来，放置一个树干图片，拖一个图片控件作为它的子控件，设置图片为事物的一种，复制3个一样的，设置不同的树干图片和食物图片。这三个带事物的树干作为样本，程序里需要复制。
随机选择树干样本，复制5个到当前场景，调整位置和宽高，使其刚好能组成一颗树的模样。
其他
其他时钟控件，分数文本控件，树桩图片控件的摆放不再赘述。
全部完成后，如下图所示：
结果场景
略。
代码
这里只贴游戏场景的代码，其他场景代码极少且简单。
var me = this;
this.resetGame();
var win = this.getWindow();
win.makeNewItem = function() {
var first = win.treeArray[0];
var index = Math.floor(Math.random() * 3);
var sp = win.dupChild("sample" + index);
sp.setVisible(true);
sp.setPosition(first.x, first.y - 117);
win.treeArray.unshift(sp);
};
win.allDown = function() {
win.treeArray.forEach(
function(e) {
e.animate("down");
}
);
};
win.handleOnSwipeLeft = function () {
win.gestureArray.push("left");
win.handleSwipe();
};
win.handleOnSwipeRight = function() {
win.gestureArray.push("right");
win.handleSwipe();
};
win.handleSwipe = function() {
var dir = win.gestureArray[0];
var last = win.treeArray[win.treeArray.length - 1];
var result = last.animate(dir, function onDone(_obj) {
win.treeArray.pop();
win.gestureArray.shift();
win.makeNewItem();
win.allDown();
if(dir === "left") {
var img = last.getChild(0).getValue();
if(img.indexOf("shiwu-2.png") > 0){
win.score += 1;
win.find("score").setText("分数: " + win.score);
win.timeLine.addValue(2, true);
win.tip.textAnimate("+1分");
} else if(img.indexOf("shiwu-1.png") > 0) {
win.timeLine.addValue(-10, true);
win.tip.textAnimate("-2S");
} else if(img.indexOf("shiwu-3.png") > 0) {
win.bomb.setVisible(true);
win.bomb.animate("display", function() {
win.bomb.setVisible(false);
});
win.timeLine.addValue(-15, true);
win.tip.textAnimate("-5S");
}
}
last.remove();
});
if(!result) {
if(win.gestureArray.length > 0) {
console.log("length:" + win.gestureArray.length);
setTimeout(win.handleSwipe, 20);
}
} else {
win.man.play(dir === "right" ? "hit" : "eat", 1, function() {
win.man.play("stand");
});
}
};总的代码加起来100行左右，这个游戏跟最原始的伐木工不太一样，玩法有改进，美术上还可以有更多的变化。如果您想在我的基础上进行改进，加入您的创意，点这里。
如果在开发过程中有任何疑问，请扫描二维码加入官方QQ群：
本系列介绍的tangide游戏开发的所有的代码和资源都是开源的，你可以免费试用。
——TangIDE，让H5开发变简单！