??最近也才來學(xué)習(xí)的cocosCeator,有很多不懂的地方,歡迎多多交流.??
我用自己學(xué)習(xí)的代碼作為??給大家介紹一下,制作一個(gè)關(guān)卡頁面,并且開始都是鎖的頁面,只有通過了第一關(guān),才能進(jìn)入下一關(guān)

關(guān)卡頁面.png

//ItemList.js
var Item = cc.Class({
    name: 'Item',
    properties: {
        id: 0,
//這是動(dòng)態(tài)設(shè)置button的背景圖片
        iconSF: cc.SpriteFrame,
//填寫對(duì)應(yīng)關(guān)卡的名字,可以實(shí)現(xiàn)動(dòng)態(tài)跳轉(zhuǎn)
        sceneName: "",
    }
});
cc.Class({
    extends: cc.Component,
    properties: {
        items: {
            default: [],
            type: Item
        },
        itemPrefab: cc.Prefab
    },
    onLoad: function () {
        for (var i = 0; i < this.items.length; ++i) {
            var item = cc.instantiate(this.itemPrefab);
            var data = this.items[i];
            this.node.addChild(item);
            item.getComponent('ItemTemplate').init({
                id: data.id,
                iconSF: data.iconSF,
                sceneName: data.sceneName,
            });
        }
    },
});

在ItemTemplate.js中我們要進(jìn)行初始化以及相應(yīng)的邏輯處理

cc.Class({
    extends: cc.Component,
    properties: {
        id: 0,
        btn: cc.Button,
        sceneName: "",
    },
    init: function (data) {
        this.id = data.id;
        this.sceneName = data.sceneName;
        var level = cc.sys.localStorage.getItem("level");
        if (level !== null){
            if (this.id<= level) {
//設(shè)置只有當(dāng)關(guān)卡闖關(guān)成功了才顯示第幾關(guān)的圖片
               this.btn.normalSprite = data.iconSF;
            }
        }
    },
    // use this for initialization
    onLoad: function () {
    },
    chooseLevel: function(event){
//這是對(duì)得到存儲(chǔ)的關(guān)卡,判斷用戶當(dāng)前關(guān)卡和已經(jīng)闖關(guān)成功的關(guān)卡進(jìn)行比較,如果點(diǎn)擊的是小于成功關(guān)卡數(shù),則可以進(jìn)入,否則點(diǎn)擊無效
        var level = cc.sys.localStorage.getItem("level");
        if (level !== null){
            if (this.id-1 <= level) {
               cc.director.loadScene(this.sceneName);
            }else{
                cc.log("不能進(jìn)入這個(gè)關(guān)卡");
            }
        }else{
            if(this.id === 1){
//這是對(duì)第一次進(jìn)入游戲的用戶來說,直接進(jìn)入第一關(guān),而不是關(guān)卡選擇頁面
                cc.director.loadScene(this.sceneName);
            }
        }
        //console.log("點(diǎn)擊了關(guān)卡"+this.sceneName);
    },
});

??接下來就是腳本的綁定操作了,在button這節(jié)點(diǎn)中綁定對(duì)應(yīng)的ItemTemplate.js,并將ClickEvents下的Handler改成對(duì)應(yīng)的chooseLevel: function(event)方法,對(duì)于該腳本中的"id,ScenceName"等屬性是不需要設(shè)置的,我們是通過動(dòng)態(tài)傳遞來改變的.一切設(shè)置完成后,我們可以把節(jié)點(diǎn)拖到資源管理器中變成prefab了,之后你就可以把節(jié)點(diǎn)從場(chǎng)景中刪除了
??接下來就是動(dòng)態(tài)創(chuàng)建了,在需要?jiǎng)?chuàng)建的節(jié)點(diǎn)上,屬性檢查器中添加ItemList.js,你需要?jiǎng)?chuàng)建多少個(gè)item自己填入就好了,并且拖入關(guān)卡對(duì)應(yīng)的圖片以及關(guān)卡名字(關(guān)卡名稱要和你每個(gè)關(guān)卡場(chǎng)景的名字相同),再把剛才制作好的預(yù)制資源拖進(jìn)對(duì)應(yīng)的Item Prefab就可以了.
??最后你顯示出來的頁面可能還不是自己想要的,你需要添加layout約束,進(jìn)行布局,在content和item分別設(shè)置對(duì)應(yīng)的約束,在這個(gè)scrollView中,view控制的是視圖一開始展示的部分,content的錨點(diǎn),控制item距離上部距離.這些的調(diào)整都需要根據(jù)不同情況進(jìn)行調(diào)整.
以上??