HTML5游戏实战之70行代码实现经典游戏《伐木工》

伐木工游戏大家都玩过，今天介绍它在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开发变简单！