HTML5遊戲實戰(1)：50行代碼實現正面跑酷遊戲

標籤：html5   遊戲   

前段時間看到一個“熊來了”的HTML5跑酷遊戲，它是一個典型的正面2D跑酷遊戲，這裡借用它來介紹一下用Gamebuilder+CanTK開發正面跑酷遊戲的基本方法。

0.先Show一下最終成果:

線上運行：http://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-41416104149375

線上編輯：http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-41416104149375

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行代碼就實現了這個遊戲的主體部分。

參考資料：https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3

HTML5遊戲實戰(1)：50行代碼實現正面跑酷遊戲