跑酷遊戲無疑是目前最受歡迎的遊戲型別之一，3D跑酷遊戲可能比較難做一點（這個我不懂），2D跑酷卻是非常容易的，只要有美術資源，做一個《天天酷跑》這類流行遊戲也並非是什麼難事。 這裡通過一個松鼠跑酷的遊戲介紹一下用Gamebuilder+CanTK開發遊戲的方法，這個遊戲的主場景僅用了60來行程式碼。

CanTK(Canvas ToolKit)是一個開源的遊戲引擎和APP框架，是開發HTML5遊戲和APP的利器，如果你喜歡它，請在github上給它加星，您的支援是我們努力的動力：https://github.com/drawapp8/cantk

0.先Show一下最終成果:

1，新建一個專案，刪除場景裡的球和地面，把手機設定成橫屏

設定場景的物理引擎引數，把Y方向的重力設定為50，畫素和米之間的比例為50：設定場景的背景圖片：設定場景的虛擬寬度：

2，在場景中放入一張圖片，用它來建立一條路徑。效果如下：通過拷貝貼上，並使用不同的圖片，生成一條完整的路徑（拖動場景可以檢視場景的全部檢視）。

3，前面放置的圖片路徑，純粹是為了達到視覺上的效果，物理上的效果還需要放置剛體來實現。讓剛體在執行時不可見：設定剛體的物理屬性，不要彈力和摩擦力。效果如下：

4，在場景中放一個圖片文字，用來表示分數。

5，在場景中放一個幀動畫，用來表示榛子。設定它的物理引數：通過拷貝貼上生成一系列榛子。

6，在場景中放一個幀動畫，用來表示松鼠。在這個幀動畫裡放一個多邊形，讓它執行時不可見：

設定它的物理引數：

7，在場景中放幾個靜態剛體，用來檢測松鼠是否掉下去了。

8，在場景中放一個靜態剛體，用來檢測松鼠是否到家了。

介面上的工作及基本上OK了。作為一個程式設計師來說調整遊戲介面可能有些單調，這時不妨把自己想象成產品經理或者UI設計師吧。

9，現在我們來寫程式。

在場景的onOpen事件中：

//初始化遊戲this.initGame = function() {    for(var i = 0; i < this.children.length; i++) {        var iter= this.children[i];        if(iter.name === "ui-acorn"
 
) {            iter.setFrameRate(30).play("normal", 100000);        }    }//設定松鼠的初速度,先播放jumpdown，再播放run    var squirrel = this.find("ui-squirrel", true);    squirrel.nutBonus = 0;    squirrel.setV(10, 20);    squirrel.play("jumpdown", 1, function() {        squirrel.play("run", 1000);    });}//對話方塊關閉時重新開始遊戲。this.onDialogClose = function(retInfo) {    this.replay();    this.initGame();}this.initGame();

var squirrel = this.find("ui-squirrel", true);var vy = squirrel.jumpingUp ? -6 : -22;squirrel.setV(4, vy).play("jumpup", 2, function() { squirrel.play("run", 10000); });  squirrel.jumpingUp = true;

在松鼠的onBeginContact(碰撞)事件中：

var win = this.getWindow();var element = body.element;function onDialogClose(retInfo) { win.onDialogClose(retInfo);}switch(element.name) {    case "ui-acorn": {//在榛子撞到後，增加分數，並播放消失的動畫，然後移除榛子。        this.nutBonus++;        element.play("dispear", 1, function() {win.removeChild(element);});        break;    }    case "ui-target": {//在到達目的地後，顯示分數對話方塊。關閉對話方塊重新開始遊戲。        var info = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100};        win.openWindow("win-success", onDialogClose, false, info);        this.setEnable(false);        break;    }    case "ui-failed": {//在掉下後，顯示分數對話方塊。關閉對話方塊重新開始遊戲。        var info = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100};        win.openWindow("win-failed", onDialogClose, false, info);        this.setEnable(false);        break;    }    default: {//落地時，設定向右的速度。        this.jumpingUp = false;        this.setV(8);        break;    }}

在松鼠的onMoved事件中，移動場景的檢視，並顯示總分數。

var win = this.getWindow();win.setOffset(this.x - 200, this.y - 200);var score = win.find("ui-score");var distance = Math.round((this.x / 100)) * 100;var totalScore = distance + this.nutBonus * 100;score.setText(totalScore);

遊戲中還有幾個對話方塊，它們都很簡單，做好一個後拷貝貼上生成，然後介面做些調整就好了，為了不讓文章太長。關於對話方塊的使用，在單獨的文章中介紹吧。

謝謝閱讀，歡迎任何建議和反饋。

參考資料：