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文件夾內