HTML5游戏实战(3): 60行代码实现水平跑酷游戏

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

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

@H_696_6@ 0.先Show一下最终成果:

@H_696_6@ 在线运行：http://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586

@H_696_6@ 在线编辑：http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586

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

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

设置场景的背景图片：

设置场景的虚拟宽度：

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

效果如下：

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

@H_696_6@ 3，前面放置的图片路径，纯粹是为了达到视觉上的效果，物理上的效果还需要放置刚体来实现。
让刚体在运行时不可见：

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

效果如下：

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

@H_696_6@

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

设置它的物理参数：

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

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

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

@H_696_6@ 设置它的物理参数：

@H_696_6@

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

@H_696_6@

@H_696_6@

@H_696_6@

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

@H_696_6@

@H_696_6@

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

@H_696_6@ 9，现在我们来写程序。

@H_696_6@ 在场景的onOpen事件中：

//初始化游戏
this.initGame = function() {
    for(var i = 0; i < this.children.length; i++) {
        var iter= this.children[i];
        if(iter.name === "ui-acorn") {
            iter.setFrameRate(30).play("normal",100000);
        }
    }
//设置松鼠的初速度,先播放jumpdown，再播放run
    var squirrel = 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动画：

@H_944_235@var squirrel = this.find("ui-squirrel",truE); var vy = squirrel.jumpingUp ? -6 : -22; squirrel.setV(4,vy).play("jumpup",2,function() { squirrel.play("run",10000); }); squirrel.jumpingUp = true;

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

@H_696_6@

var win = this.getWindow();
var element = body.element;
function onDialogClose(reTinfo) { win.onDialogClose(reTinfo);}

switch(element.Name) {
    case "ui-acorn": {//在榛子撞到后，增加分数，并播放消失的动画，然后移除榛子。
        this.nutBonus++;
        element.play("dispear",function() {win.removeChild(element);});
        break;
    }
    case "ui-target": {//在到达目的地后，显示分数对话框。关闭对话框重新开始游戏。
        var info = {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": {//在掉下后，显示分数对话框。关闭对话框重新开始游戏。
        var info = {levelscore:Math.round(this.x/100) * 100,nutBonus:this.nutBonus*100};
        win.openWindow("win-Failed",info);
        this.setEnable(false);
        break;
    }
    default: {//落地时，设置向右的速度。
        this.jumpingUp = false;
        this.setV(8);
        break;
    }
}

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

@H_696_6@

var win = this.getWindow();
win.setOffset(this.x - 200,this.y - 200);
var score = win.find("ui-score");
var distance = Math.round((this.x / 100)) * 100;
var @R_122_10586@lscore = distance + this.nutBonus * 100;
score.setText(@R_122_10586@lscore);

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

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

@H_696_6@ 参考资料：

@H_696_6@ https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3