HTML5遊戲實戰 1 50行程式碼實現正面跑酷遊戲
前段時間看到一個“熊來了”的HTML5跑酷遊戲，它是一個典型的正面2D跑酷遊戲，這裡借用它來介紹一下用Gamebuilder+CanTK開發正面跑酷遊戲的基本方法。
CanTK(Canvas ToolKit)是一個開源的遊戲引擎和APP框架，是開發HTML5遊戲或者APP的利器，如果你喜歡它，請在github上給它加星，您的支援是我們努力的動力：https://github.com/drawapp8/cantk
Gamebuilder是一個線上開發HTML遊戲或者APP的整合開發環境，目標是讓開發遊戲和玩遊戲一樣簡單和有趣。
0.先Show一下最終成果:
1，先新建一個專案，刪除場景裡的球和地面，然後設定場景的物理引擎引數，把X/Y方向的重力設定為0。
2，再向場景中放入一個幀動畫控制元件，用作遊戲的背景。
設定它的影象顯示方式為“縮放”：
設定它的寬度和高度屬性為“填充父控制元件”：
給它指定一組圖片：
得到下面的效果圖：
3，再向場景中放入一個幀動畫控制元件，用來顯示榛子。
給它指定一組圖片，並設定其名稱和幀率等屬性：
啟用它的物理引擎：
4，再向場景中放入一個幀動畫控制元件，用來顯示石頭。
給它指定一組圖片，並設定其名稱和幀率等屬性：
啟用它的物理引擎：
5，再向場景中放入一個幀動畫控制元件，用來顯示熊。
給它指定一組圖片，並設定其名稱和幀率等屬性：
啟用它的物理引擎：
6，再向場景中放入一個幀動畫控制元件，用來顯示人。
給它指定一組圖片，並設定其名稱和幀率等屬性：
啟用它的物理引擎：
7，再向場景中放入一個圖片文字控制元件，用來顯示總分數。
8，再向場景中放入一個圖片文字控制元件，用來顯示單次分數。
9，介面構建完成了，效果如下：
現在我們來寫程式碼：
在場景的onOpen事件中定義幾個函式：
var nut = this.find("ui-nut");var win = this;var totalScore = 0;var nut, stone, man, bear, delta, total;//左右移動人物this.handlePointerMove = function(point) { var x = Math.max(Math.min(point.x, win.w * 0.8), win.w * 0.2); man.setPosition(x, man.y);}//處理人物與榛子和石頭的碰撞事件this.handleOnBeginContact = function(body) { var el = body.element; var score = el.name == "ui-nut" ? 1000 : -600; var x = man.x + ((man.w - delta.w)>>1); totalScore += score; delta.setText(score).setVisible(true).setPosition(x, man.y); var config = {yEnd: delta.y-100, opacityStart:1, opacityEnd:0.2, scaleStart:1, scaleEnd:0.2, duration:500, onDone: function() {delta.setVisible(false);total.setText(totalScore);}}; el.play("dispear", 1, function() { el.setVisible(false).setPosition(0, 0).setV(0, 0);}); delta.animate(config);}//初始化遊戲this.initGame = function() { totalScore = 0; nut = this.find("ui-nut"); stone = this.find("ui-stone"); man = this.find("ui-man"); bear = this.find("ui-bear"); delta = this.find("ui-delta-score"); total = this.find("ui-total-score"); nut.setVisible(false); stone.setVisible(false); function generateObj() { var random = Math.random(); var obj = random < 0.5 ? nut : stone; obj.setVisible(true).setPosition(win.w >>1, win.h).setV(0, -5).play("normal", 10000); totalScore += 500; setTimeout(generateObj, 1000); } generateObj();}this.initGame();在人物的onBeginContact事件中呼叫前面的函式handleOnBeginContact：
this.getWindow().handleOnBeginContact(body);
簡單吧，我們用了不足50行程式碼就實現了這個遊戲的主體部分。