使用CocosCreator完成水管鸟小游戏demo

今天，老师发了一份水管鸟的素材，本来是要求用unity做出来的，作业做完了，我用CocosCreator也做出来了一份demo。现在记录这个demo的制作流程

效果：

1：制作水管prefab

将水管素材按上下放置到合适位置，然后制作为prefab

2：写入脚本文件

game.js挂载到主场景node上

var state = null;
cc.Class({
    extends: cc.Component,

    properties: {
        wall: cc.Prefab,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        // cc.director.getPhysicsManager().enabled = true;//存在一定的问题，只可使用
        this.node.on(cc.Node.EventType.TOUCH_START, this.TouchStart, this)
        this.node.on(cc.Node.EventType.TOUCH_END, this.TouchEnd, this)
    },

    start() {
        setInterval(() => {
            this.createWall();//创建水管
        }, 2000);
    },
    TouchStart() {
        // 小鸟向上飞翔
        this.state = 1
    },
    TouchEnd() {
        cc.log('end')
        this.state = 0
    },
    createWall() {
        let wallNode = this.node.getChildByName('wallNode');
        let y = -200 + Math.random() * 400;
        let wall = cc.instantiate(this.wall);
        wall.x = 400;
        wall.y = y
        wallNode.addChild(wall);
    },

    update(dt) {
        let bird = this.node.getChildByName('ico')
        if (this.state == 1) {
            bird.y += 5
            bird.angle < 20 ? bird.angle += 1 : bird.angle = 20
        } else {
            bird.y -= 3
            bird.angle = 0 ? bird.angle -= 0.5 : bird.angle = 0
        }
    },

});

wall.js挂载到prefab预制体上

cc.Class({
    extends: cc.Component,

    properties: {
        
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
       
    },
    
    start () {

    },

    update (dt) {
        // cc.log(this.childNode)
        this.node.x-=5;
        if(this.node.x<-450){//请使用cc算出屏幕分辨率然后计算
            this.node.removeFromParent();
            this.node.destroy();
        }
    },
});

将collider.js挂载到水管上(主要是为了完成水管与鸟的位置判断，也可用其他方法完成碰撞的判断)

cc.Class({
    extends: cc.Component,

    properties: {
        
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.player = cc.find('Canvas/bg/ico')
        this.wall = this.node.parent;
    },

    start () {

    },

    update (dt) {
        //自己通过脚本判断是否碰撞
        // cc.log(this.wall)
        let px = Math.abs(this.player.x-this.node.x)+this.wall.x<this.node.width/2+this.player.width/2
        let py = Math.abs(this.player.y-this.node.y)+this.wall.y<this.node.height/2+this.player.height/2
        if(px&&py){
            cc.director.loadScene('game')
            cc.log('碰撞')
        }
    },
});

将这些脚本文件分别挂载在对应node上，就完成了水管鸟这个demo的制作