Cocos Creator 开发微信小游戏 打包上线

1.首先在制作小游戏时我们需要下载Cocos Creator游戏开发工具 下载连接: 下载后无脑下一步安装,打开即可! 那为啥我们选择Cocos Creator, 看图:

本游戏只用到一个scene场景, 并只用一个ts实现游戏的所有逻辑。 MainController.ts代码如下:

const {
          
   ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
          
   

    //小鸟飞行动画节点
    @property(cc.Sprite)
    bird0: cc.Sprite = null;
    @property(cc.Sprite)
    bird1: cc.Sprite = null;
    @property(cc.Sprite)
    bird2: cc.Sprite = null;
    @property(cc.Sprite)
    bird3: cc.Sprite = null;

    //小鸟父容器节点
    @property(cc.Node)
    birdParent: cc.Node = null;

    //背景
    @property(cc.Node)
    bg0: cc.Node = null;
    @property(cc.Node)
    bg1: cc.Node = null;


    //管子
    @property(cc.Node)
    pipeParent0: cc.Node = null;
    @property(cc.Node)
    pipeParent1: cc.Node = null;
    @property(cc.Node)
    pipeParent2: cc.Node = null;

    //分数
    @property(cc.Label)
    lbScore: cc.Label = null;

    //结束图片节点
    @property(cc.Node)
    nodeGameOver: cc.Node = null;

    //开始按钮
    @property(cc.Button)
    btnStart: cc.Button = null;

    // onLoad () {}

    time: number = 0;   //距离上次切换显示的小鸟时间
    speed: number = 0;  //负数向下坠落的速度,正数向上的速度
    score: number = 1;  //得分
    isGameStart: boolean = false;   //游戏是否开始

    //初次进入游戏时触发start方法
    start() {
          
   
        //管道的初始位置
        let pipeStartOffsetX: number = 200;
        let spaceX = (288 + 52) / 3
        this.pipeParent0.x = pipeStartOffsetX + spaceX * 0;
        this.pipeParent1.x = pipeStartOffsetX + spaceX * 1;
        this.pipeParent2.x = pipeStartOffsetX + spaceX * 2;
    }

    //游戏每执行一针时就触发一次update方法
    update(dt: number) {
          
   
        let timeTmp = this.time + dt;
        this.time = timeTmp;

        //控制小鸟的显示隐藏,计算流逝的时间大于0.5s值时,就切换小鸟当前显示的小鸟
        if (this.time > 0.5) {
          
   
            if (this.bird0.node.active) {
          
   
                this.bird0.node.active = false;
                this.bird1.node.active = true;
            } else if (this.bird1.node.active) {
          
   
                this.bird1.node.active = false;
                this.bird2.node.active = true;
            } else if (this.bird2.node.active) {
          
   
                this.bird2.node.active = false;
                this.bird3.node.active = true;
            } else if (this.bird3.node.active) {
          
   
                this.bird3.node.active = false;
                this.bird0.node.active = true;
            }
            this.time = 0;
        }

        if (this.isGameStart == false) return;
        //向下坠落的速度
        this.speed -= 0.1;
        //小鸟下落
        this.birdParent.y += this.speed;
        //改变小鸟的角度 负(逆时针) 正(顺时针)
        this.birdParent.rotation = -this.speed * 6;

        //背景移动
        this.moveBg(this.bg0);
        this.moveBg(this.bg1);
        //管道移动
        this.movePipe(this.pipeParent0)
        this.movePipe(this.pipeParent1)
        this.movePipe(this.pipeParent2)
        //小鸟是否碰撞
        this.checkCollision(this.birdParent, this.pipeParent0, 0)
        this.checkCollision(this.birdParent, this.pipeParent1, 3)
        this.checkCollision(this.birdParent, this.pipeParent2, 5)
    }

    //背景图片移动
    moveBg(bg: cc.Node) {
          
   
        bg.x -= 1;
        if (bg.x < -288) {
          
   
            bg.x += 288 * 2;
        }
    }

    //管道移动
    movePipe(pipe: cc.Node) {
          
   
        pipe.x -= 2;
        if (pipe.x < (-144 - 26)) {
          
   
            pipe.x += 288 + 52 + Math.floor((0.5 - Math.random()) * 6);
            pipe.y = Math.floor((0.5 - Math.random()) * 100);
            this.lbScore.string = (++this.score).toString();    //得分加一
        }
    }

    //点击小鸟上飞
    onButtonClick() {
          
   
        this.speed = 3.5;
    }

    //小鸟是否碰撞 (小鸟节点,    水管节点,     水管中间空隙)
    checkCollision(bird: cc.Node, pipe: cc.Node, num: number) {
          
   
        if (bird.x + 13 < pipe.x - 22) return;  //小鸟的左边小于管子右边
        if (bird.x - 13 > pipe.x + 22) return;  //小鸟的右边大于管子左边
        if ((bird.y + 8 < pipe.y + 50 + 5 * num) && (bird.y - 8 > pipe.y - 50 - 5 * num)) return;  //小鸟在管道中间
        this.gameOver()
    }

    //点击开始
    onBtnStartClick() {
          
   
        this.isGameStart = true;
        this.nodeGameOver.active = false;
        this.btnStart.node.active = false;

        this.resetGame()
    }
    //游戏结束
    gameOver() {
          
   
        this.isGameStart = false;
        this.nodeGameOver.active = true;
        this.btnStart.node.active = true;
    }
    //重新开始游戏
    resetGame() {
          
   
        this.speed = 0;
        this.score = 1;
        this.lbScore.string = "";
        this.birdParent.y = 0;
        //管道恢复初始位置
        let pipeStartOffsetX: number = 200;
        let spaceX = (288 + 52) / 3
        this.pipeParent0.x = pipeStartOffsetX + spaceX * 0;
        this.pipeParent1.x = pipeStartOffsetX + spaceX * 1;
        this.pipeParent2.x = pipeStartOffsetX + spaceX * 2;
    }
}
经验分享 程序员 微信小程序 职场和发展