Cocos Creator 日記項目實戰FlyBird

Cocos 筆記 項目實戰（FlyBird）

學習知識點：

• 碰撞組件及碰撞事件
• 數據存儲
• 控件動畫
• 背景滾動處理
• 得分處理
• 如何label控件顯示字
• 聲音播放

提供github下載地址: https://github.com/Noying/FlayBird

素材百度網盤:https://pan.baidu.com/s/1uU5daqfghqvjD_ADHIdKzw

---

碰撞組件及碰撞事件

例如，水管的碰撞組件，只需要先將水管大小設置好，然后添加組件，選擇

就可以了，會自動的布滿精靈。

事件處理，如我得飛鳥，如下：

主要是勾好 第一個選項Enabled Contact Listened,獲得碰撞事件,然后再飛鳥上的腳步Player.js 上添加函數：

    onCollisionEnter: function (other, self) {
        switch(other.tag){
            case 1:
                this.game.gameOver();
                break;
            case 2:
                 this.score++;
                 cc.log("score is "+this.score);
                 this.game.setScoreText(this.score);
                 break;
            default:
                 break;
        }
    
    },

官網資料：碰撞組件及碰撞回調

數據存儲

我這個游戲主要是存儲，鳥飛過獲得最高分，因此我只有一個存儲

    saveScore:function(){ //保存數據
        var maxScore = JSON.parse(cc.sys.localStorage.getItem('Score'));
        if(!maxScore)maxScore=0;
        if(this.score>=maxScore){
            cc.sys.localStorage.setItem('Score', this.score);
        }
    }

 onLoad () { //本來這里還想做個列表，然后排序，最高分和最低分之類的
        cc.director.preloadScene("menuSence");
        var maxScore = JSON.parse(cc.sys.localStorage.getItem('Score'));
        if(!maxScore)maxScore=0;
         this.score.getComponent(cc.Label).string = "Score: "+maxScore; //這里也必須熟悉
         this.backBtn.getComponent(cc.Button).node.on(cc.Node.EventType.TOUCH_END,this.GoBack,this);
     }

官網資料: 數據存儲和數據讀取

控件動畫

我得動畫主要是用在兩個背景之間的切換了，代碼如下:

  setMoveAction:function(){
        var fristAction = cc.moveBy(15,-640,0);
        var secondAction = cc.moveBy(0.1,1280,0);
        var retAction = cc.repeatForever(cc.sequence(fristAction,secondAction,fristAction));
        if(this.node.x==0){
            retAction = cc.repeatForever(cc.sequence(fristAction,secondAction,fristAction));
        }else if(this.node.x==640){
            retAction = cc.repeatForever(cc.sequence(fristAction,fristAction,secondAction));
        }
        return retAction;
    }

背景滾動處理

為了使背景顯得在滾動，可以在背后，我認為可以使你得攝像頭跟着走，或者你得背景自己移動，我這里是兩個背景進行銜接，不停的運動，如圖：

兩塊，可以銜接的圖片不停的運動，當然這樣的圖片如何制作，我將在我得PS心得中分享

得分處理

因為，FlyBird是通過水管而計分的，我這里不想使用代碼去判斷坐標而去計分，所以我用了一個透明的，跨越了整個豎着的屏幕的，寬為1，長為屏幕長度的透明碰撞組件放置在水管的后方，這樣，只要飛鳥經過了這個碰撞組件就可以計分。

如何label控件顯示字

這個也是從網上查到，不管是Prefab還是腳本自己的屬性控件，要想修改上面的字符串都得如下處理

 this.score.getComponent(cc.Label).string = "Score: "+maxScore; //這里也必須熟悉

    var label = cc.instantiate(this.startLabel);
            this.node.addChild(label);
            label.getComponent(cc.Label).string = time; //這個是個需要記住的地方

聲音播放

cc.audioEngine.playEffect(this.hitAudio, false);

官方資料: 音頻播放