HTML5遊戲實戰(4): 20行代碼實現FlappyBird，html5flappybird

HTML5遊戲實戰(4): 20行代碼實現FlappyBird，html5flappybird

這個系列很久沒有更新了。幾個月前有位讀者調侃說，能不能一行代碼做一個遊戲呢。呵呵，接下來一段時間，我天天都在想這個問題，怎麼能讓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方向的速度向上為負，向下為正。下面的代碼可以用代碼產生器產生。

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