首先我們在Main場景下放入背景圖片。

在Script檔案下新建Main.js檔案（主場景指令碼控制檔案）
開啟Main.js

  properties: {
        canvas:
    {
        default: null,
        type: cc.Node,
    },
        background:
            {
                default: null,
                type: cc.Node,
            },
        player: {
            default
 
: null,
            type: cc.Prefab,
        },
        block: {
            default: null,
            type: cc.Prefab,
        },
        food_2: {
            default: null,
            type: cc.Prefab,
        },
        enermy_4: {
            default: null,
            type: cc.Prefab,
        },
    },
 

儲存指令碼，切換到引擎介面。

將我們需要用到的圖片新增到層級管理器，

然後修改這四個節點的Size

然後將節點直接拖動到Prefab資料夾下，就會生成預製體
將指令碼新增到Canvas中，然後在指令碼中放入節點和預製體。



遊戲中活動空間為4*4，每一個格子的座標點固定不變，因此我們首先儲存一下每個格子的座標點，方便後續使用。

    //儲存位置資訊（在遊戲最開始時候利用一個空節點鋪滿4*4的方格，用來記錄每個方格的座標，放在position陣列中）
    PositonMaker: function ()
    {
        var self = this;
        var
 
 betweenWidth = 0;
        var size = 120;
        self.ItemSize = size;
        var x = -180;
        var y = -275;
        var s = 0;
        self.positions = [];
        for (var i = 0; i < 4; i++) {
            self.positions.push([]);
            for (var j = 0; j < 4; j++) {
                var b = cc.instantiate(this.block);
                b.attr({
                    x: x,
                    y: y,
                    width: size,
                    height: size-10,
                });
                self.positions[i].push(cc.p(x, y));
                x += (size + betweenWidth);
                self.background.addChild(b);
            }
            y += (size-10 + betweenWidth);
            x = -180;
        }
        //      cc.log(this.positions);
    },

位置座標記錄好了，接著我們需要寫檢視空位置函式

    //用來檢視4*4的方格中空格子，存放在陣列中並返回
    getEmptyLocations: function () {
        // 空閒的位置
        var emptyLocations = [];
        for (var i = 0; i < this.data.length; i++) {
            for (var j = 0; j < this.data[i].length; j++) {
                if (this.data[i][j] == 0) {
                    emptyLocations.push(i * 4 + j);
                }
            }
        }
        return emptyLocations;
    },

我們就可以初始化資料了（新增最初的Item）

    /// 初始化資料
    initData: function () {
        if (this.Item) {
            for (var i = 0; i < this.Item.length; i++) {
                for (var j = 0; j < this.Item[i].length; j++) {
                    if (this.Item[i][j]) {
                        this.Item[i][j].destroy();
                    }
                }
            }
        }//清空原始資料
        this.data = [];
        this.Item = [];
        for (var i = 0; i < 4; i++) {
            this.data.push([0, 0, 0, 0]);//0代表為空
            this.Item.push([null, null, null, null]);
        }
        this.addItem(1, 1, 29);
        this.addItem(1, 2, 15);
        this.addItem(0, 0, 1);
        //     cc.log(this.data);
    },

解釋一下addItem函式裡的三個引數

addItem(a,b,c):a代表行數，b代表列數，c代表要新增的Item的種類。

接下來我們還要繼續寫addItem函式

 //新增物體（能量、攻擊力、敵人）
    addItem: function (x1, y1, num) {
        // 空閒的位置
        var emptyLocations = this.getEmptyLocations();
        cc.log(emptyLocations);
        /// 沒有空位了
        if (emptyLocations.length == 0) {
            return false;
        }
        //尋找生成位置點
        var p1 = Math.floor(cc.random0To1() * emptyLocations.length);
        p1 = emptyLocations[p1];
        if (x1 == undefined)
            var x = Math.floor(p1 / 4);
        else
            var x = x1;
        if (y1 == undefined)
            var y = Math.floor(p1 % 4);
        else
            var y = y1;
        //cc.log(this.positions[0][0]);
        var Itemtypes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 100, 101];
        var choice = Math.floor(cc.random0To1() * 2);
        cc.log(choice);
        if (choice == 0)
            var n = Math.floor(cc.random0To1() + 1);
        else
            var n = Math.floor(cc.random0To1() + 8);
        if (num != undefined) {
            n = num;
        }
        if (Itemtypes[n] == 1)
            var b = cc.instantiate(this.food_2);
        //相同創造方法，先行註釋
        /*else if (Itemtypes[n] == 2)
            var b = cc.instantiate(this.food_4);
        else if (Itemtypes[n] == 3)
            var b = cc.instantiate(this.food_8);
        else if (Itemtypes[n] == 4)
            var b = cc.instantiate(this.food_16);
        else if (Itemtypes[n] == 5)
            var b = cc.instantiate(this.food_32);
        else if (Itemtypes[n] == 6)
            var b = cc.instantiate(this.food_64);
        else if (Itemtypes[n] == 7)
            var b = cc.instantiate(this.food_128);
        else if (Itemtypes[n] == 8)
            var b = cc.instantiate(this.Rehabilitation_2);
        else if (Itemtypes[n] == 9)
            var b = cc.instantiate(this.Rehabilitation_4);
        else if (Itemtypes[n] == 10)
            var b = cc.instantiate(this.Rehabilitation_8);
        else if (Itemtypes[n] == 11)
            var b = cc.instantiate(this.Rehabilitation_16);
        else if (Itemtypes[n] == 12)
            var b = cc.instantiate(this.Rehabilitation_32);
        else if (Itemtypes[n] == 13)
            var b = cc.instantiate(this.Rehabilitation_64);
        else if (Itemtypes[n] == 14)
            var b = cc.instantiate(this.Rehabilitation_128);*/
        else if (Itemtypes[n] == 15)
            var b = cc.instantiate(this.enermy_4);
        /*else if (Itemtypes[n] == 16)
            var b = cc.instantiate(this.enermy_8);
        else if (Itemtypes[n] == 17)
            var b = cc.instantiate(this.enermy_16);
        else if (Itemtypes[n] == 18)
            var b = cc.instantiate(this.enermy_32);
        else if (Itemtypes[n] == 19)
            var b = cc.instantiate(this.enermy_64);
        else if (Itemtypes[n] == 20)
            var b = cc.instantiate(this.enermy_128);
        else if (Itemtypes[n] == 21)
            var b = cc.instantiate(this.enermy_256);
        else if (Itemtypes[n] == 22)
            var b = cc.instantiate(this.enermysleep_4);
        else if (Itemtypes[n] == 23)
            var b = cc.instantiate(this.enermysleep_8);
        else if (Itemtypes[n] == 24)
            var b = cc.instantiate(this.enermysleep_16);
        else if (Itemtypes[n] == 25)
            var b = cc.instantiate(this.enermysleep_32);
        else if (Itemtypes[n] == 26)
            var b = cc.instantiate(this.enermysleep_64);
        else if (Itemtypes[n] == 27)
            var b = cc.instantiate(this.enermysleep_128);
        else if (Itemtypes[n] == 28)
            var b = cc.instantiate(this.enermysleep_256);*/
        else if (Itemtypes[n] == 100) {
            var b = cc.instantiate(this.player);
        }
        /*else if (Itemtypes[n] == 101)
            var b = cc.instantiate(this.playersleep);*/
        this.ItemSize = 110;
        b.attr({
            width: this.ItemSize,
            height: this.ItemSize,
        });
        b.setPosition(this.positions[x][y]);
        this.background.addChild(b);
        this.Item[x][y] = b;
        b.scaleX = 0;
        b.scaleY = 0;
        if (Itemtypes[n] < 15) {
            var show = cc.scaleTo(0.1, 1, 1);
            b.runAction(show);
        }
        else {
            var show = cc.scaleTo(0.01, 1, 1);
            b.runAction(show);
        }
        this.data[x][y] = Itemtypes[n];
        return true;
    },

於是我們遊戲最開始介面就OK了

    //最開始載入
    onLoad: function () {
        this.PositonMaker();
        this.initData();
    },

執行如下圖