初學Cocos Creator，做了個小遊戲與大家分享

線上體驗：（IE10可行，360瀏覽器可能會有問題，其它瀏覽器自測）

1.     建立以下資料夾，新建一個場景game_scene，並將圖片、字型資源匯入。

2.     設定Canvas大小為720x1280，

新建單色節點bg，設定大小為720x1280

新建空節點map，在map下新建單色節點ground1，顏色改為黑色，錨點設定為（1，1），並調整大小360x640，如圖：

將資源中的Snail拖至Canvas上建立Sprite節點，錨點設定為（0.5，0），並平移到合適位置，如圖

在Canvas節點下建立2個Button節點（刪掉下面自動生成的Label節點），分別命名為start_btn與restart_btn，點選按鈕節點，將res下其他三個圖片資源分別拖拽至按鈕控制元件對應位置上，例如：點選start_btn節點，將res中start_btn圖片拖至下圖Normal上。

設定大小模式：

然後調節他們的大小、位置，此時，介面如下：

3.     在scripts資料夾內新建javascripts指令碼game_scene，修改程式碼如下：

cc.Class({
    extends: cc.Component,

    properties:{
        status:0,       //遊戲狀態，0:等待使用者觸屏   1:玩家觸屏    2:玩家手指離開螢幕    3:播放遊戲動畫中，禁止玩家操作
        startBtn:{      //為方便訪問開始按鈕，在此新增開始按鈕節點
            type:cc.Node,
            default:null,
        }
    },

    // onLoad () {},

    start () {
        this.node.on("touchstart",function(e){      //觸屏事件

        },this);
        this.node.on("touchend",function(e){       //觸屏結束事件

        },this);
    },

    gameStart(){       //遊戲開始
        this.startBtn.destroy();    //銷燬開始按鈕，不再讓它顯示
    },
    // update (dt) {},
});
 

點選Canvas節點——新增元件——新增使用者指令碼元件——game_scene（就是剛剛寫的指令碼），把按鈕新增在這個元件上：

4.給start_btn按鈕新增一個事件：

4.再新增一個Label節點，用來顯示分數：

遊戲開始之前，我們不讓它顯示，在屬性檢查器中將它之前的勾去掉：

至此，遊戲的基本場景我們已經佈置好了，接下來我們開始寫程式碼控制遊戲進行。