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

游戏效果图：

录屏帧数问题，显得有些卡顿
游戏源码：https://download.csdn.net/download/qq_41614928/12189200

1.首先在制作小游戏时我们需要下载Cocos Creator游戏开发工具
下载连接：https://www.cocos.com/creator/
下载后无脑下一步安装，打开即可！
那为啥我们选择Cocos Creator， 看图：

2.下面我们就在此界面操作并制作我们的微信小游戏

本游戏只用到一个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;
    }
}

3.下面我们打包代码到微信小程序运行
点击Cocos Creator右上角的项目 → 构建发布

填好小游戏appid后点击构建，等待一会打包好的小程序代码便存储在./build文件夹内，
将微信小程序服务类型设置为游戏其appid就是小游戏appid

4.打开微信开发者工具：
微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
打开后选择小游戏，导入build内打包好的微信小游戏文件

好了，大功告成！

接下来就是用手机开心的玩上一把啦！
瞧瞧：

微信小游戏源码：https://download.csdn.net/download/qq_41614928/12189200
下载解压后在build文件夹内