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=previewgithubdrawapp8-651428115940100

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

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

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

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

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

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

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

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

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

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

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

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

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

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getWindow</span>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.find</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ui-bird"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setV</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>,-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

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

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> var win  = this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getWindow</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>if(body<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.element</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.name</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.indexOf</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ui-door"</span>) < <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {    win<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.stop</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    var score = parseInt(win<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getValueOf</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ui-score"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.best</span> = Math<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>(window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.best</span>||<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, score)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    var initData = {score:score, best:window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.best</span>}<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.openWindow</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"dialog-confirm"</span>,   function (retData) {  win<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.replay</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;}, false, initData);</span>}else {    win<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.find</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ui-score"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.addValue</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

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

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setValueOf</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ui-score"</span>, initData<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.score</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setValueOf</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ui-best"</span>, initData<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.best</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

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

有问题请加QQ群：223466431

【原文：http://blog.csdn.net/absurd/article/details/44915637】