CocosCreator經典入門項目之flappybird

cc.Class({
    extends: cc.Component,

    properties: {
        skyNode: cc.Node,//定義天空節點
        pipeNode: cc.Node,//定義管道節點
        birdNode: cc.Node,//定義小鳥節點
        clickLayerNode: cc.Node,//定義監聽節點  監聽鼠標點擊事件
        scoreNode: cc.Node,//定義得分節點    總得分節點
        buttonNode: cc.Node,//定義按鈕節點   開始遊戲按鈕
        numberNode: cc.Node,//定義數字節點   加分combo
        overNode: cc.Node,//定義遊戲結束節點  結束按鈕
        spriteFrame: {//定義精靈框架節點，
            default: [],//數組類型，將會綁定bird0、bird1、bird2三張圖片精靈，通過在update（）方法中不斷更換，形成動畫
            type: cc.SpriteFrame //圖片精靈類型
        },
        clip: {//定義音效節點
            default: [],//同樣為數組類型，便於綁定多個資源。後續學習，可嘗試使用動態加載
            type: cc.AudioClip  //音頻類型
        }
    },
    onClickButton() {//設置點擊按鈕方法   
        this.num = 0;//將num重置為0
        this.sign = true;//設置控制遊戲是否繼續的標識符為真
        this.buttonNode.active = false;//讓按鈕節點不可見
        this.overNode.active = false;//讓控制“遊戲結束”文本的overNode節點不可見
        this.birdNode.y = 50;//點擊按鈕後小鳥的位置歸位
        this.power = 0;//將力量因素變為0，防止小鳥復活後下落太快
        this.scoreNode.getComponent(cc.Label).string = "" + this.num;//將分數節點的string值變為0,this.scoreNode.getComponent(cc.Label).string
        let list = this.pipeNode.children;//用一個list存儲金屬管道的子節點（.children）
        for (let i = 0; i < list.length; i++) {//設置一個循環，終止條件是i小於list的長度
            let child = list[i];//let 一個child變量用於在循環中存儲每個list[i]
            child.x += 1000;//將管道節點的x右移1000
        }
        cc.audioEngine.playMusic(this.clip[0], true);
    },
    onClickBagButton(event, data) {  //定義背包按鈕方法
        // cc.log(event, data);
        if (data == "bag") {//判斷傳過來的參數等於某event的CustomEventData
            this.showBag();  // 調用顯示背包函數
        }
    },
    showBag() {  //定義顯示背包函數
        if (this.bagPrefab == null) {  //如果資源加載沒有成功
            setTimeout(() => {  //設置延時0.5s後繼續調用顯示bag方法
                this.showBag();
            }, 500);
            return;
        }
        //資源加載完成
        let node = null;    //定義一個node賦值為空
        if(this.isOpen){  //判斷背包是否打開，this.isOpen初始值為false
            node = cc.find("Canvas/panelBag");
            node.active = true;
        }
        else{
            node = cc.instantiate(this.bagPrefab);  //加載具體的預置資源並賦值給node
            cc.find("Canvas").addChild(node);  //將node節點添加到Canvas幕佈下
        }
        node.opacity = 0;//設置node節點的透明度為0；
        node.scale = 0.1;//設置node節點的初始縮放為0.1；
        let ac = cc.spawn(  //封裝並行的動畫並賦值給ac
            cc.fadeIn(0.5),  //0.5s的速度淡入
            cc.scaleTo(0.5,1),//0.5s的速度縮放到1
        );
        node.runAction(ac); //用runAction函數執行封裝好的ac
        this.isOpen = true;//將背包打開參數賦值true
    },
    gameOver() {    //設置遊戲結束方法
        this.sign = false;//遊戲結束，將遊戲繼續標識符變為false
        this.checkStill = false;//檢查遊戲是否進行參數變為false
        this.buttonNode.active = true;//遊戲結束，讓開始按鈕this.buttonNode為可見
        this.overNode.active = true;//遊戲結束，讓“遊戲結束”文本的overNode節點可見
        cc.audioEngine.stopMusic(this.clip[0]);  //遊戲結束停止背景音樂
    },
    addScore() {    //設置加分方法
        this.numberNode.opacity = 255;//讓分數節點numberNode的.opacity元素（透明度）為255
        this.num++;//讓num值++
        this.scoreNode.getComponent(cc.Label).string = "" + this.num;//讓分數節點的string元素=空的的字符串“” 加num
        this.numberNode.y = this.birdNode.y;//讓加分combo節點numberNode的y和小鳥節點的y相等
        this.numberNode.runAction(//讓加分combo節點numberNode漸入漸出runAction,spawn,fadeOut,moveBy
            cc.spawn(
                cc.fadeOut(0.5),
                cc.moveBy(0.5, cc.v2(0, 50))
            )
        )
        cc.audioEngine.playEffect(this.clip[2]);  //加分音樂
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        // cc.director.getCollisionManager().enabled = true;     //打開碰撞管理系統cc.director.getCollisionManager().
        this.bagPrefab = null;//定義bagPrefab變量賦值為空
        // cc.loader.loadRes(路徑，資源類型，回調函數);error如果錯誤，打印錯誤信息，data為加載成功的資源
        cc.loader.loadRes("prefab/panelBag", cc.Prefab, (error, data) => {
            if (error) {//判斷如果錯誤信息不為空
                cc.log(error);//打印錯誤信息
                return;         
            }
            this.bagPrefab = data; //將加載到的資源賦值給this.bafPrefab
        });
    },

    start() {
        this.isOpen = false;//定義背包是否打開變量並置為false；
        this.num = 0;//將num參數變為0，防止遊戲再開始時，得分繼承上局的分數
        this.scoreNode.getComponent(cc.Label).string = "" + 0;//設置分數初始值為0
        this.speed = 5;//設置相對位移速度為5
        this.power = 0;//設置力量參數為0
        this.checkStill = true;//檢查遊戲是否進行參數變為true
        this.curFrame = 0;//定義一個變量用於循環skinnode列表
        this.sign = false;//定義一個標識符控制遊戲是否開始，初始值為false
        this.checkState = false;// false-非碰撞檢測狀態 true-碰撞檢測狀態
        this.up = 0;//
        this.clickLayerNode.on(cc.Node.EventType.TOUCH_START, () => {//誰.on(cc.Node.EventType類型.事件，執行匿名方法() =>)
            this.power = 4;//將初始的力量參數直接由0置為4，確保每次監聽到點擊小鳥有比較明顯的上升
            this.up++;
            cc.audioEngine.playEffect(this.clip[1]);
        })

        cc.audioEngine.playMusic(this.clip[0], true);
    },

    update(dt) {
        if (!this.sign) {//設置讓遊戲暫停的標識符
            return;
        }
        cc.log(2);
        this.skyNode.x -= this.speed;//通過控制天空節點的x值來控制背景移動   
        this.birdNode.y += this.power + this.up;//通過小鳥節點的y值和初始的力量參數來控制小鳥自由下落的速度
        this.power -= 0.2;//通過讓power小幅度值漸變達到讓小鳥平滑移動
        this.birdNode.angle = this.speed * this.power;//通過力量和速度參數控制小鳥上升和下降的角度
        if (this.skyNode.x < -1200) {//判斷當背景和起點相隔1200像素時，讓背景節點skyNode.x歸位=0（無限循環背景）
            this.skyNode.x = 0;
        }
        //node.children即管道節點的子節點
        let list = this.pipeNode.children;//用一個list存儲金屬管道的子節點（.children）
        let checkNode = null;//定義檢查管道節點變量並賦值為null
        for (let i = 0; i < list.length; i++) {//用循環賦值所有管道節點 並賦予速度
            let child = list[i];//let一個child變量來存儲list中的每個元素
            child.x -= this.speed;//控制管道節點的x-=this.speed
            // cc.log(child);
            if (child.x < -600) {
                child.x = 600;//判斷child出界< -600時讓child歸位到600
                child.y = (Math.random() - 0.5) * 200;//通過Math.random()（其值在0-1之間）函數來控制管道通過口隨機出現，緩和值為200
            }
            let dis = Math.abs(this.birdNode.x - child.x)//let一個變量dis用於計算小鳥和管道的x的差值（Math.abs取絕對值）
            let width = (this.birdNode.width + child.children[0].width) / 2;//定義width變量用於存儲小鳥和管道碰撞的臨界值
            if (dis < width) {//判斷 dis <= width，就給檢查管道節點變量賦值child
                checkNode = child;
            }
        }
        if(this.birdNode.y + this.birdNode.height / 2 > cc.winSize.height / 2  //判斷小鳥的頭部大於屏幕的上邊緣或者小鳥的底部小於屏幕的下邊緣
            || this.birdNode.y - this.birdNode.height / 2 < -cc.winSize.height / 2){
                this.gameOver();//執行遊戲結束方法
            }
        if(checkNode) {//直接判斷checkNode，如果未被賦值即為空
            this.checkState = true;//狀態從無到有，將檢查狀態變量checkState賦值為true
            //判斷矩形小鳥的上邊框（.y + height/2）大於等於通道上邊框(checkNode.y+100)或者小鳥的下邊框小於等於通道
            if (this.birdNode.y + this.birdNode.height / 2 > checkNode.y + 100
                || this.birdNode.y - this.birdNode.height / 2 < checkNode.y) {
                this.gameOver();//遊戲結束
            }
        }else{
            if (this.checkState && this.checkStill) {//判斷檢查狀態變量和檢查遊戲是否進行變量是否都為true（&&）
                this.addScore();//調用加分函數
            }
            this.checkStill = true; //將檢查遊戲是否進行變量賦值true
            this.checkState = false;//將檢查狀態變量賦值為false
            this.up = 0;
        }
        this.curFrame++;//小鳥幀率變量自增
        if (this.curFrame > 2) {//判斷如果幀率變量大於2，將幀率變量變為0；
            this.curFrame = 0;
        }
        if (this.birdNode.y) {//如果力量參數大於0
            //讓小鳥節點的Sprite組件的spriteFrame參數隨幀率參數變化
            this.birdNode.getComponent(cc.Sprite).spriteFrame = this.spriteFrame[this.curFrame];
        }
    }
})