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。

HTML5游戏实战(4): 20行代码实现FlappyBird_第1张图片

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

HTML5游戏实战(4): 20行代码实现FlappyBird_第2张图片
HTML5游戏实战(4): 20行代码实现FlappyBird_第3张图片
HTML5游戏实战(4): 20行代码实现FlappyBird_第4张图片

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

HTML5游戏实战(4): 20行代码实现FlappyBird_第5张图片

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

HTML5游戏实战(4): 20行代码实现FlappyBird_第6张图片

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

HTML5游戏实战(4): 20行代码实现FlappyBird_第7张图片

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

HTML5游戏实战(4): 20行代码实现FlappyBird_第8张图片
HTML5游戏实战(4): 20行代码实现FlappyBird_第9张图片
HTML5游戏实战(4): 20行代码实现FlappyBird_第10张图片

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

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

HTML5游戏实战(4): 20行代码实现FlappyBird_第11张图片

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

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

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

HTML5游戏实战(4): 20行代码实现FlappyBird_第12张图片
- 第三个窗口点击后,给小鸟一个向右上的速度。速度是矢量,这里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

你可能感兴趣的:(游戏,html5,flappybird,CanTK,tangide)