html5文字游戏引擎,HTML5游戏实战(3): 60行代码实现水平跑酷游戏

跑酷游戏无疑是目前最受欢迎的游戏类型之一，3D跑酷游戏可能比较难做一点(这个我不懂)，2D跑酷却是非常容易的，只要有美术资源，做一个《天天酷跑》这类流行游戏也并非是什么难事。 这里通过一个松鼠跑酷的游戏介绍一下用Gamebuilder+CanTK开发游戏的方法，这个游戏的主场景仅用了60来行代码。

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

0.先Show一下最终成果:

1，新建一个项目，删除场景里的球和地面，把手机设置成横屏

设置场景的物理引擎参数，把Y方向的重力设置为50，像素和米之间的比例为50：

设置场景的背景图片：

设置场景的虚拟宽度：

2，在场景中放入一张图片，用它来创建一条路径。

效果如下：

通过拷贝粘贴，并使用不同的图片，生成一条完整的路径(拖动场景可以查看场景的全部视图)。

3，前面放置的图片路径，纯粹是为了达到视觉上的效果，物理上的效果还需要放置刚体来实现。

让刚体在运行时不可见：

设置刚体的物理属性，不要弹力和摩擦力。

效果如下：

4，在场景中放一个图片文字，用来表示分数。

5，在场景中放一个帧动画，用来表示榛子。

设置它的物理参数：

通过拷贝粘贴生成一系列榛子。

6，在场景中放一个帧动画，用来表示松鼠。

在这个帧动画里放一个多边形，让它运行时不可见：

设置它的物理参数：

7，在场景中放几个静态刚体，用来检测松鼠是否掉下去了。

8，在场景中放一个静态刚体，用来检测松鼠是否到家了。

界面上的工作及基本上OK了。作为一个程序员来说调整游戏界面可能有些单调，这时不妨把自己想象成产品经理或者UI设计师吧。

9，现在我们来写程序。

在场景的onOpen事件中：

//初始化游戏

this.initGame =function() {

for(vari = 0; i 

variter=this.children[i];

if(iter.name ==="ui-acorn") {

iter.setFrameRate(30).play("normal", 100000);

}

}

//设置松鼠的初速度,先播放jumpdown，再播放run

varsquirrel =this.find("ui-squirrel",true);

squirrel.nutBonus = 0;

squirrel.setV(10, 20);

squirrel.play("jumpdown", 1,function() {

squirrel.play("run", 1000);

});

}

//对话框关闭时重新开始游戏。

this.onDialogClose =function(retInfo) {

this.replay();

this.initGame();

}

this.initGame();

在场景的onPointerUp事件中，给松鼠一个向上的速度，播放jumpup动画：

varsquirrel =this.find("ui-squirrel",true);

varvy = squirrel.jumpingUp ? -6 : -22;

squirrel.setV(4, vy).play("jumpup", 2,function() { squirrel.play("run", 10000); });

squirrel.jumpingUp = true;

在松鼠的onBeginContact(碰撞)事件中：

varwin =this.getWindow();

varelement = body.element;

functiononDialogClose(retInfo) { win.onDialogClose(retInfo);}

switch(element.name) {

case"ui-acorn": {//在榛子撞到后，增加分数，并播放消失的动画，然后移除榛子。

this.nutBonus++;

element.play("dispear", 1,function() {win.removeChild(element);});

break;

}

case"ui-target": {//在到达目的地后，显示分数对话框。关闭对话框重新开始游戏。

varinfo = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100};

win.openWindow("win-success", onDialogClose,false, info);

this.setEnable(false);

break;

}

case"ui-failed": {//在掉下后，显示分数对话框。关闭对话框重新开始游戏。

varinfo = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100};

win.openWindow("win-failed", onDialogClose,false, info);

this.setEnable(false);

break;

}

default: {//落地时，设置向右的速度。

this.jumpingUp =false;

this.setV(8);

break;

}

}

在松鼠的onMoved事件中，移动场景的视图，并显示总分数。

varwin =this.getWindow();

win.setOffset(this.x - 200,this.y - 200);

varscore = win.find("ui-score");

vardistance = Math.round((this.x / 100)) * 100;

vartotalScore = distance +this.nutBonus * 100;

score.setText(totalScore);

游戏中还有几个对话框，它们都很简单，做好一个后拷贝粘贴生成，然后界面做些调整就好了，为了不让文章太长。关于对话框的使用，在单独的文章中介绍吧。

谢谢阅读，欢迎任何建议和反馈。

参考资料：