HTML5游戏实战(4): 20行代码实现FlappyBird

这个系列很久没有更新了。几个月前有位读者调侃说，能不能一行代码做一个游戏呢。呵呵，接下来一段时间，我天天都在想这个问题，怎么能让GameBuilder+CanTK进一步简化游戏的开发呢。经过几个月的努力，虽然还是做不到一行代码做一个游戏，但是GameBuilder的功能已经有了质的突破了。今天我们用FlappyBird为例介绍一下用GameBuilder +CanTK开发游戏的方法，整个游戏用了不到20行代码。

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

0.先Show一下最终成果:

在线运行：http://www.tangide.com/apprun.html?appid=previewupyundemo-651428115940100

在线编辑：http://www.tangide.com/gamebuilder.php?appid=previewupyundemo-651428115940100

1.打开CanTK的集成开发环境GameBuilder 并新建一个项目，取名FlappyBird。

2.删除场景中的球和地面，并给场景设置一张背景图片（登录后在共享资源中可以找到FlappyBird的资源文件）。

3.在场景放一个几何变换动画，设置相应的图片，再向几何变换动画中放一个帧动画，设置好它的位置和图片。在场景放一个图片用作帮助，再放一个图片用作开始按钮。效果如下：

4.现在我们来做Get Ready窗口，这个很简单，不再详细解释。效果如下：

5.终于到了真正游戏开始的地方了：新建一个场景，设置场景的背景图片，图片显示方式为水平平铺，设置场景的虚拟宽度为5000。向场景中放一个方块刚体，在刚体中放一个帧动画，用做FlappyBird这只鸟了，把刚体的水平初始速度设置为3米/秒，设置小鸟的“镜头跟随属性“。再放两个静态方块，用来表示上下的柱子，并设置相应的图片。

6.再放一个方块静态刚体。这是两根柱子之间的门，为了与柱子区别：取名为ui-door。因为玩家是看不见这个门的，把它设置为运行时不可见。因为它只感应鸟通过，而不会与鸟碰撞，把它设置成感应器。

(copy&paste两个柱子和门，生成后面的关卡。)

7.分数对话框同样很简单，不再详细解释。效果如下：

8.现在我们来做事件处理：

• 第一个窗口的按钮点击后，打开第二个窗口。

• 第二个窗口点击后，打开第三个窗口。

- 第三个窗口点击后，给小鸟一个向右上的速度。速度是矢量，这里X方向的速度向左为负，向右为正。Y方向的速度向上为负，向下为正。下面的代码可以用代码产生器产生。

this.getWindow().find("ui-bird").setV(3,-3);

• 小鸟的碰撞事件处理：撞到门分数加1，撞到柱子弹出分数对话框。

 var win  = this.getWindow();
if(body.element.name.indexOf("ui-door") < 0) {
    win.stop();
    var score = parseInt(win.getValueOf("ui-score"));
    window.best = Math.max(window.best||0, score);
    var initData = {score:score, best:window.best};
    this.openWindow("dialog-confirm",   function (retData) {  win.replay();}, false, initData);
}
else {
    win.find("ui-score").addValue(1);
}

• 再来看分数显示对话框的处理：

this.setValueOf("ui-score", initData.score);
this.setValueOf("ui-best", initData.best);

搞定了！很抱歉骗了你，没有20行代码。我们只用了14行代码，而且其中10行可以用代码产生器产生。用CanTK+GameBuilder做游戏不可思议的简单，熟练的话，相信2个小时可以轻轻松松的完成这个游戏。

有问题请加QQ群：223466431