如何快速開發一個微信小游戲--實例《打氣球》

首先，我們來看下h5游戲和微信小游戲之間的區別：

1.我認為最大的一點區別在於，微信小游戲全是基於單個canvas的結構，而h5的游戲，我們可以使用多層的canvas對游戲進行分類，比如我之前有開發一個《大頭吃小頭》的h5游戲,如下圖，演示地址：http://www.lovewebgames.com

 

在這里，我們就對它進行了三層結構的划分，1層為主游戲層，主要處理游戲內的各精靈的活動，1層為控制器層（或操作層），主要處理事件或搖杠的操作，第3層就是顯示層了，主要展示一些文字如得分、生命值等信息。這樣划分的好處是顯而意見的，可以充分利用每層的獨立渲染，減少性能的開銷。然而在微信小游戲中，只有一個canvas是顯示的，再創建的canvas都是不可見的。

2.第二點不同在於，無法使用dom元素，dom雖然在動畫的性能上比canvas差很多，但它也有很多的優點，比如他可以結合css樣式快速的呈現很好的展示效果，包括事件的處理也大不同，例如在《大頭吃小頭》這款游戲中，控制杠就是用html元素展示的，包括游戲里的一些按鈕，它們並不是在每幀都需要重繪的，更多的可能是位置的變化。而在微信小游戲的開發中，我們完全不能使用除canvas外的html元素，游戲里的任何變化，只能通過每幀的清屏重繪來完成。

3.第三點不同在於api不同，基本上原來在瀏覽器端的api都不能用，包括事件的綁定也不一樣，這也就是別人說的，小程序的開發，並不會給你前端的開發加成，因為是兩套完全不同的api玩法，所以我們需要adapter，官方有提供一個簡單的weapp-adapter，來綜合小游戲和h5之間的差異，在下面的內容里，我將拋棄它，完全使用api來操作，既然是兩套不同的玩法，我認為沒必要統一。

上面說到adapter，是不是意味着我們要寫很多的基礎代碼呢，當然要寫，不過我已經把這些基礎的代碼寫成了一個庫，名字叫wx-jy，它的作用與adapter又有着不同，主要是為了我們減少對游戲的轉承啟合而開發代碼，多的不說了，源碼在github上有，包括h5版的jy和微信版的wx-jy

下面我們來看一下，今天我們要帶大家完成的小游戲《打氣球》，這款游戲很適合做入門教程，首先他包含有小游戲的所有過程，然后他邏輯簡單，不會看不懂。說到游戲的過程，我把它分成六大狀態：

前面三個狀態loading、title、descript為游戲准備階段，runing就是游戲的核心運行狀態了，也許你會問了，為啥要分這么細，游戲不就是開始和結束嗎？呃，那是你覺得，我要我覺得。

說了這么多了，我們還是沒開始寫《打氣球》的一行代碼，不要緊，老弟，磨材不誤砍刀工，其實打氣球的代碼不超過十行，我們總不能拿那十行代碼講一天吧?好了，開始正式的擼碼吧！

第一步，我們要創建一個游戲的舞台，我們所有的游戲小伙伴們都將在這個舞台上起舞。

import {

    JY,

    STATE,

    Stage,

    Title,

    Descript,

    Sprite,

    lib

} from 'wx-jy';

const canvas = wx.createCanvas();
const [height, width] = [canvas.height, canvas.width]

//創建舞台
let stage = new Stage(canvas, width, height, '#FFFFFF');

前兩行引用wx-jy的相關依賴，你可以把這個文件單獨下載下來引用。下面就是new Stage了，有了舞台后，我們就需要把一些要素放進去了，比如標題和介紹 

let title = new Title('打氣球', stage);
title.create = (resolve) => {
    lib.write(stage, '一起來打氣球')
    resolve();
}
let descript = new Descript(stage)
descript.create = async (resolve) => {
    lib.draw(stage, 'images/descript.jpg', 0, 0, stage.width, stage.height)
    // await lib.waitMoment(3000);
    //添加開始按鈕的Sprite
    let btn = new Sprite(stage, 'images/btn-start.png', 100, 40, (width - 100) / 2, height - 40 - 40);
    btn.draw();
    wx.onTouchStart((e) => {
        btn.touchHits(e,()=>{
            wx.offTouchStart();
            resolve()
        })
    });
}

在descript這里的代碼為什么會多一點，主要是要展示一個按鈕，然后綁定點擊的事件，所有步聚的方法都使用異步函數的方式編寫，這樣只需要resolve()調用就會自動走到下一步了。

接下來就是聲明一個氣球的精靈類了，這個精靈，有兩個屬性方法，一個是上升的速度，一個是更新位置的方法。

//氣球類
class Ball extends Sprite {
    speed: number = 1;//速度
    //更新位置
    update() {
        this.y -= this.speed;
        if (this.y+this.height < 0) {
            this.visible = false;
        }
    }
}

做完這些，我們就可以寫我們的主體函數類了，它繼承於JY，對過程進行擴展。

class Game extends JY {
    frame: number = 0;//幀數
    ballList: Ball[] = [];//所有球的集合
    newGame() {
        this.stage.style = "green";
        this.setState(STATE.running);
        //事件綁定
        wx.onTouchStart(e => {
            let { clientX, clientY } = e;
            console.log(clientX, clientY)
            this.ballList.forEach((ball,index) => {
                //觸碰回收球並播放聲音
                ball.touchHits(e,()=>{
                    this.ballList.splice(index,1);
                    lib.play('audio/boom.mp3');
                })
            });
        });
    }
    async running() {
        this.frame++;
        //先清空場景
        this.stage.clear();
        this.createSprite();
        this.ballList.forEach((ball,index) => {
            ball.update();
            ball.draw();
            //回收球
            if(!ball.visible){
                this.ballList.splice(index,1);
            }
        });
    }
    //創建角色
    createSprite() {
        //100幀創建一個角色
        if (this.frame % 100 == 0) {
            let x = lib.random(0, stage.width - 30);
            let w = 40;
            let h = 340 / 120 * w;
            let ball = new Ball(this.stage, 'images/ball.png', w, h, x, this.stage.height);
            // ball.touchHits(this.touch)
            this.ballList.push(ball);
        }
    }
    async gameOver() {
        stage.clear();
        lib.write(stage, '游戲結束！');
        await lib.waitMoment(3000);
        this.setState(STATE.descript);
    }
}

這里我們重寫了newGame、runing和gameover這三個生命周期，目的是個性化內容，所有的游戲可能真正的區別也只是游戲開始、運行和結束三個狀態是不一樣的了。

最后，我們實例化這個類，然后啟動它，還有資源文件的加載。

let mygame = new Game(stage, title, descript);
mygame.resources = [
    'images/ball.png',
    'images/btn-start.png',
    'images/descript.jpg',
    'audio/boom.mp3'
];
mygame.setup()

就這樣，一款好看又好玩的《打氣球》就基本完成了，所有需要我們編寫的代碼不過100行，中間你還可以添加生命數和分值來增強游戲的可玩性。

 

 你也可以從github中clone下整個項目，然后用微信調試工具導入dev這個目錄，就可以直接預覽到效果了