Cocos Creator – 实现《Flappy Bird》小游戏的基本功能

/**
 * 游戏状态
 */
enum BirdState{
    Ready,   //准备状态
    Flying,  //小鸟飞行中
    FreeFall,//小鸟自由落体中
    Dead,    //小鸟已阵亡
};
@ccclass('Player')
export class Player extends Component {
    // 带重力和碰撞体的小鸟
    private _bird2D: Node = null;
    // 2D刚体
    private _rigidBody2D: RigidBody2D = null;
    // 2D碰撞体
    private _collider2D: BoxCollider2D = null;
    // 游戏状态
    private _state = BirdState.Ready;
    /** 初始化 */
    start() {
        this._bird2D = this.node.getChildByName("Bird2D");
        // 获取2D钢体
        this._rigidBody2D = this._bird2D.getComponent(RigidBody2D);
        // 获取2D碰撞体
        this._collider2D = this._bird2D.getComponent(BoxCollider2D);
        // 注册2D碰撞事件(碰撞开始时触发)
        this._collider2D.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);
        // 绑定全屏触摸事件
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
    }
    /** TOUCH事件回调 */
    onTouchStart() {
        // 重置 重力缩放比例（默认0无重力）
        this._rigidBody2D.gravityScale = 1;
        // 清空重力加速度
        this._rigidBody2D.linearVelocity = v2();
        // 给小鸟（2D刚体）添加一个 上抛 的作用力
        this._rigidBody2D.applyLinearImpulseToCenter(v2(0, this._throwForce), true);
        // 设置游戏状态
        this._state = BirdState.Flying;
    }
    // todo
    onBeginContact(){}
}

@ccclass('PipeLayer')
export class PipeLayer extends Component {
    // 管道节点预制资源
    @property(Prefab)
    pipePrefab: Prefab = null;
    // pipe对象池
    private _pipePool: NodePool;
    // pipe节点集合
    private _pipeList: Node[] = [];
    // 管道是否移动中
    private _pipeIsRunning = false;
    // 管道移动速度，单位px/s 
    private _pipeMoveSpeed = -400;
    // 每对管道之间的间距，单位px
    private _pipeSpacing = 500;
    // 管道回收X轴位置
    private _recylceX = 0;
    /** 初始化 */
    start() {
        // 创建管道障碍物对象池
        this._pipePool = new NodePool();
        for (let i = 0; i < 3; ++i) {
            // 实例化节点
            let pipe = instantiate(this.pipePrefab);
            // 放入对象池
            this._pipePool.put(pipe);
        };
    }
    /** 每一帧渲染前执行：管道移动 */
    update(deltaTime: number) {
        if (!this._pipeIsRunning) return;
        // 实时更新管道位置
        for (let i = 0; i < this.node.children.length; i++) {
            let posX = this.node.children[i].getPosition().x + this._pipeMoveSpeed * deltaTime;
            let posY = this.node.children[i].getPosition().y;
            this.node.children[i].setPosition(posX, posY);
            // 超出屏幕显示范围了，回收此管道
            if (posX < this._recylceX) {
                this.recyclePipe(this.node.children[i])
            }
        }
    }
    /** 定时生成管道，并开始移动 */
    startSpawn() {
        // 初始化管道根节点
        this.node.removeAllChildren();
        // 生成一组管道
        this.spawnPipe();
        // 定时生成管道
        let spawnInterval = Math.abs(this._pipeSpacing / this._pipeMoveSpeed);
        this.schedule(this.spawnPipe, spawnInterval);
        // 开始移动
        this._pipeIsRunning = true;
    }
    /** 生成管道 */
    spawnPipe() {
        let pipeGroup: Node = null;
        if (this._pipePool.size() > 0) {
            pipeGroup = this._pipePool.get();
        } else {
            pipeGroup = instantiate(this.pipePrefab);
        };
        this.node.addChild(pipeGroup);
        this.initPosition(pipeGroup);
        pipeGroup.active = true;
        this._pipeList.push(pipeGroup);
        log("_pipeList:",this._pipeList.length)
    }
    /** 生成管道时 初始化管道位置 */
    initPosition(pipeGroup: Node) {
        const visibleSize = this.node.getComponent(UITransform);
        const pipeSize = pipeGroup.getComponent(UITransform);
        // 设置管道节点初始位置
        let posX = (visibleSize.width / 2) + this._pipeSpacing;
        let posY = this.generateRandom(-visibleSize.height / 4, visibleSize.height / 4);
        pipeGroup.setPosition(posX, posY);
        // 管道超出屏幕X轴显示，回收范围
        this._recylceX = - (visibleSize.width / 2) - pipeSize.width;
    }
    /** 生成范围随机数 */
    generateRandom(min:number, max:number):number {
        let Range = max - min;
        let Rand = Math.random();
        return (min + Math.round(Rand * Range));
    }
    /** 回收管道 */
    recyclePipe(pipeGroup: Node) {
        pipeGroup.active = false;
        this._pipePool.put(pipeGroup);
    }
    /** 重置 */
    reset() {
        // 定时生成管道
        this.unschedule(this.spawnPipe);
        this._pipeList = [];
        this._pipeIsRunning = false;
    }
}

/** 碰撞检测  */
onBeginContact(selfCollider:Collider2D, otherCollider:Collider2D, contact:IPhysics2DContact | null) {
    // 碰撞情况
    log("self:", selfCollider.node.name, "other:", otherCollider.node.name, "contact:", contact)
    // 碰撞后小鸟死亡
    this._state = BirdState.Dead;
    // 解除触摸事件绑定
    this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
    // todo 游戏结束
}

/** 获取下个未通过的水管 */
public getNextPipe() {
    return this._pipeList.shift();
}

@ccclass('Player')
export class Player extends Component {
    // 分数Label
    @property(Label)
    scoreLabel: Label = null;
    // 管道控制器
    @property({ type: PipeLayer })
    pipeLayer: PipeLayer | null = null;
    // 下个未通过的水管
    private _nextPipe: Node;
    /** 初始化 */
    start() {
        // 获取下个未通过的水管
        this._nextPipe = this.pipeLayer.getNextPipe();
    }
    /** 每一帧渲染前执行 */
    update(deltaTime: number) {
        if (this._state === BirdState.Ready || this._state === BirdState.Dead) return;
        if (this._state === BirdState.Flying || this._state === BirdState.FreeFall) {
            // 记录得分
            let birdLeft = this._bird2D.getPosition().x;
            let pipeRight = this._nextPipe.getPosition().x + this._nextPipe.getComponent(UITransform).width;
            if (birdLeft > pipeRight) {
                // 得分 +1
                this._score++;
                this.scoreLabel.string = this._score.toString();
                // 获取下个未通过的水管
                this._nextPipe = this.pipeLayer.getNextPipe();
            }
        }
    }
}