码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-06-25 19:36:05      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:tangide   html5   cantk   tangram   游戏开发   

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

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

标签:tangide   html5   cantk   tangram   游戏开发   

原文地址:http://blog.csdn.net/yinlijun2004/article/details/46639647

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!