用cocos creator开发音乐小游戏

前言

本文介绍使用cocos creator开发小游戏，用到了碰撞检测、粒子动画等一些功能。可以点击链接体验一下。

玩法

点击屏幕，游戏开始。音符开始往下走，点击屏幕，控制小人跟音符碰撞即可得分。场景中的发光小星星，碰撞时的效果，以及发光小人的拖尾，都是使用的粒子特效。

核心代码

1. 玩家移动

js 复制代码

 /**
 * 玩家移动，利用贝塞尔曲线，这样移动起来更丝滑
 */
move() {
    if(!this.isMoving) {
        this.isMoving = true;
        let nowPs = this.node.getPosition();
        this.position = this.position === "left" ? "right" : "left";
        this.node.runAction(
            cc.sequence(
                cc.bezierTo(0.3, [nowPs, cc.v2(0, -50), nowPs.neg()]),
                cc.callFunc(() => {
                    this.isMoving = false;
                    this.node.angle = 0;
                    this.node.getComponent(cc.BoxCollider).enabled = true;
                })
            )
        );
    }
}

2. 点击时按钮，重置粒子系统

js 复制代码

this.node.on(cc.Node.EventType.TOUCH_START, (event) => {
    let pos = event.getLocation();
    this.clickNode.position = this.player.parent.convertToNodeSpaceAR(pos); //地址转换
    this.clickNode.getComponent(cc.ParticleSystem).resetSystem();
    this.player.getComponent("Player").move();
})

3. 碰撞检测

将元素添加碰撞体，然后分组，不同的物体执行不同的方法

js 复制代码

   onCollisionEnter(other, self) {
        let tag = other.tag; //0：普通音符；1：竖线；2：音符上方线；3：终点线；4：游戏结束
        switch(tag){
            case 0:
                this.node.getComponent(cc.BoxCollider).enabled = false;
                cc.find("Canvas").emit("noteCollide", other);
                this.showStateByPos();
                break;
            case 1:
                if(!this.node.getComponent(cc.BoxCollider).enabled) return;
                cc.find("Canvas").emit("gameOver", "fail");
                break;
            case 2: 
                cc.find("Canvas").emit("gameOver", "fail");
                break;
            case 3: 
                cc.find("Canvas").emit("toTheEnd");
                break;
            case 4: 
                cc.find("Canvas").emit("gameOver", "success");
                break;
        }
    }

参考链接

cocos官网：docs.cocos.com/creator/man...

粒子特效网：www.effecthub.com/item/featur...