HTML5游戏实战(1):50行代码实现正面跑酷游戏

前段时间看到一个“熊来了”的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法。

CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏或者APP的利器,如果你喜欢它,请在github上给它加星,您的支持是我们努力的动力:https://github.com/drawapp8/cantk

Gamebuilder是一个在线开发HTML游戏或者APP的集成开发环境,目标是让开发游戏和玩游戏一样简单和有趣。 

0.先Show一下最终成果:

在线运行:http://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-41416104149375

在线编辑:http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-41416104149375

1,先新建一个项目,删除场景里的球和地面,然后设置场景的物理引擎参数,把X/Y方向的重力设置为0。

1

1

2,再向场景中放入一个帧动画控件,用作游戏的背景。

设置它的图像显示方式为“缩放”:

1

设置它的宽度和高度属性为“填充父控件”:

1

给它指定一组图片:

1

得到下面的效果图:

1

3,再向场景中放入一个帧动画控件,用来显示榛子。

给它指定一组图片,并设置其名称和帧率等属性:

1

启用它的物理引擎:

1

4,再向场景中放入一个帧动画控件,用来显示石头。

给它指定一组图片,并设置其名称和帧率等属性:

1

启用它的物理引擎:

1

5,再向场景中放入一个帧动画控件,用来显示熊。

给它指定一组图片,并设置其名称和帧率等属性:

1

启用它的物理引擎:

1

6,再向场景中放入一个帧动画控件,用来显示人。

给它指定一组图片,并设置其名称和帧率等属性:

1

启用它的物理引擎:

1

7,再向场景中放入一个图片文字控件,用来显示总分数。

1

1

8,再向场景中放入一个图片文字控件,用来显示单次分数。

1

1

9,界面构建完成了,效果如下:

1

现在我们来写代码:

在场景的onOpen事件中定义几个函数:

var nut = this.find("ui-nut");
var win = this;
var totalScore = 0;
var nut, stone, man, bear, delta, total;
//左右移动人物
this.handlePointerMove = function(point) {
    var x = Math.max(Math.min(point.x, win.w * 0.8), win.w * 0.2);
    man.setPosition(x, man.y);
}
//处理人物与榛子和石头的碰撞事件
this.handleOnBeginContact = function(body) {
    var el = body.element;     
    var score = el.name == "ui-nut" ? 1000 : -600;
    var x = man.x + ((man.w - delta.w)>>1);
    totalScore += score;
    delta.setText(score).setVisible(true).setPosition(x, man.y);
    var config = {yEnd: delta.y-100, opacityStart:1, opacityEnd:0.2, scaleStart:1, scaleEnd:0.2, duration:500,
            onDone: function() {delta.setVisible(false);total.setText(totalScore);}};
    el.play("dispear", 1, function() { el.setVisible(false).setPosition(0, 0).setV(0, 0);});
    delta.animate(config);
}
//初始化游戏
this.initGame = function() {
    totalScore = 0;
    nut = this.find("ui-nut");
    stone = this.find("ui-stone");
    man = this.find("ui-man");
    bear = this.find("ui-bear");
    delta = this.find("ui-delta-score");
    total = this.find("ui-total-score");
    nut.setVisible(false);
    stone.setVisible(false);
    
    function generateObj() {
        var random = Math.random();
        var obj = random < 0.5 ? nut : stone;         obj.setVisible(true).setPosition(win.w >>1, win.h).setV(0, -5).play("normal", 10000);
        
        totalScore += 500;
        setTimeout(generateObj, 1000);
    }
    
    generateObj();
}

this.initGame();

在人物的onBeginContact事件中调用前面的函数handleOnBeginContact:

this.getWindow().handleOnBeginContact(body);

简单吧,我们用了不足50行代码就实现了这个游戏的主体部分。

参考资料:https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值