CocosCreator制作flappybird 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];
        }
    }
})