本文旨在通過分析官方給出的一個飛機大戰小游戲的源代碼來說明如何進行小游戲的開發。

1.前言

前天一個 跳一跳 小游戲刷遍了朋友圈，也代表了微信小程序擁有了搭載游戲的功能（早該往這方面發展了，這才是應該有的形態嘛）。作為一個前端er，我的大刀早已經饑渴難耐了，趕緊去下一波最新的微信官方開發工具，體驗一波小游戲要如何開發。

我們欣喜地看到可以直接點擊小游戲體驗一下，而且官方也有一個示例源代碼，是一個簡易版的飛機大戰的源碼，直接點開模擬器就可以看效果。

2.源碼分析

（還是原汁原味的打飛機游戲呀！）通過閱讀這個源代碼我們便可以知道如何進行小游戲的開發了。廢話少說直接進入主題，先來分析一波源碼的整體結構。

./js下面是官方示例中的js文件具體的作用

├── base                                   // 定義游戲開發基礎類
│   ├── animatoin.js                       // 幀動畫的簡易實現
│   ├── pool.js                            // 對象池的簡易實現
│   └── sprite.js                          // 游戲基本元素精靈類
├── libs
│   ├── symbol.js                          // ES6 Symbol簡易兼容
│   └── weapp-adapter.js                   // 小游戲適配器
├── npc
│   └── enemy.js                           // 敵機類
├── player
│   ├── bullet.js                          // 子彈類
│   └── index.js                           // 玩家類
├── runtime
│   ├── background.js                      // 背景類
│   ├── gameinfo.js                        // 用于展示分數和結算界面
│   └── music.js                           // 全局音效管理器
├── databus.js                             // 管控游戲狀態
└── main.js                                // 游戲入口主函數

官方文檔中提到， game.js 和 game.json 是小游戲必須要有的兩個文件

下面我會分析我認為主要的文件與結構，不會對每一行代碼進行解析，大家有興趣可以自行閱讀官方的源碼。每個文件后會跟隨我認為重要的幾個小點。

game.js

import './js/libs/weapp-adapter'
import './js/libs/symbol'

import Main from './js/main'

new Main()

1. 小程序啟動會調用 game.js ，在其中導入了小游戲官方提供的適配器，用于注入canvas以及模擬DOM以及BOM（后續會具體說明這個文件），可以在 https://mp.weixin.qq.com/debu...下載源代碼，修改適合自己的版本并通過webpack打包自用。當然目前已經足夠我們使用。
2. 導入symbol的polyfill，主要用于模擬ES6類的私有變量。
3. 導入Main類并實例化Main，于是順藤摸瓜我們將目光移至Main.js

Main.js

import Player     from './player/index'
import Enemy      from './npc/enemy'
import BackGround from './runtime/background'
import GameInfo   from './runtime/gameinfo'
import Music      from './runtime/music'
import DataBus    from './databus'

let ctx   = canvas.getContext('2d')
let databus = new DataBus()

/**
 * 游戲主函數
 */
export default class Main {
  constructor() {
    this.restart()
  }

  restart() {
    databus.reset()

    canvas.removeEventListener(
      'touchstart',
      this.touchHandler
    )

    this.bg       = new BackGround(ctx)
    this.player   = new Player(ctx)
    this.gameinfo = new GameInfo()
    this.music    = new Music()

    window.requestAnimationFrame(
      this.loop.bind(this),
      canvas
    )
  }

  /**
   * 隨著幀數變化的敵機生成邏輯
   * 幀數取模定義成生成的頻率
   */
  enemyGenerate() {
    if ( databus.frame % 30 === 0 ) {
      let enemy = databus.pool.getItemByClass('enemy', Enemy)
      enemy.init(6)
      databus.enemys.push(enemy)
    }
  }

  // 全局碰撞檢測
  collisionDetection() {
    let that = this

    databus.bullets.forEach((bullet) => {
      for ( let i = 0, il = databus.enemys.length; i < il;i++ ) {
        let enemy = databus.enemys[i]

        if ( !enemy.isPlaying && enemy.isCollideWith(bullet) ) {
          enemy.playAnimation()
          that.music.playExplosion()

          bullet.visible = false
          databus.score  += 1

          break
        }
      }
    })

    for ( let i = 0, il = databus.enemys.length; i < il;i++ ) {
      let enemy = databus.enemys[i]

      if ( this.player.isCollideWith(enemy) ) {
        databus.gameOver = true

        break
      }
    }
  }

  //游戲結束后的觸摸事件處理邏輯
  touchEventHandler(e) {
    e.preventDefault()

    let x = e.touches[0].clientX
    let y = e.touches[0].clientY

    let area = this.gameinfo.btnArea

    if (   x >= area.startX
        && x <= area.endX
        && y >= area.startY
        && y <= area.endY  )
      this.restart()
    }

    /**
     * canvas重繪函數
     * 每一幀重新繪制所有的需要展示的元素
     */
    render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    this.bg.render(ctx)

    databus.bullets
           .concat(databus.enemys)
           .forEach((item) => {
              item.drawToCanvas(ctx)
            })

    this.player.drawToCanvas(ctx)

    databus.animations.forEach((ani) => {
      if ( ani.isPlaying ) {
        ani.aniRender(ctx)
      }
    })

    this.gameinfo.renderGameScore(ctx, databus.score)
  }

  // 游戲邏輯更新主函數
  update() {
    this.bg.update()

    databus.bullets
           .concat(databus.enemys)
           .forEach((item) => {
              item.update()
            })

    this.enemyGenerate()

    this.collisionDetection()
  }

  // 實現游戲幀循環
  loop() {
    databus.frame++

    this.update()
    this.render()

    if ( databus.frame % 20 === 0 ) {
      this.player.shoot()
      this.music.playShoot()
    }

    // 游戲結束停止幀循環
    if ( databus.gameOver ) {
      this.gameinfo.renderGameOver(ctx, databus.score)

      this.touchHandler = this.touchEventHandler.bind(this)
      canvas.addEventListener('touchstart', this.touchHandler)

      return
    }

    window.requestAnimationFrame(
      this.loop.bind(this),
      canvas
    )
  }
}

1. 導入了創建游戲需要的我放飛機，敵方飛機，背景，游戲信息，音樂，游戲全局數據類，并獲取了canvas的上下文（看到這是不是有一個疑惑，canvas到底是從哪里定義？先帶著這個問題最后再說），創建了一個全局數據實例（后面會提到）。
2. 創建Main的實例自然會調用構造方法，在構造方法中調用restart函數，進行了游戲的初始化并進行循環刷幀（ requestAnimationFrame 看起來是不是很親切）。
3. loop函數中我們可以看到主要調用了update, render方法，并設置了player發射子彈的時間，對游戲是否結束進行判斷，最后接著刷幀。
4. update方法會調用各個場景內對象的update方法來更新他們的位置以及其他信息。
5. render方法會調用各個場景內對象的render方法來將他們繪制到canvas中。

Main內結構清晰，主要理解整個流程就是調用 requestAnimationFrame 來不停地刷幀更新位置信息推動所有對象運動，每個對象在每一幀都有新的位置，連起來就是動畫了。分清位置的更新與對象的繪制是關鍵。

databus.js

import Pool from './base/pool'

let instance

/**
 * 全局狀態管理器
 */
export default class DataBus {
  constructor() {
    if ( instance )
      return instance

    instance = this

    this.pool = new Pool()

    this.reset()
  }

  reset() {
    this.frame      = 0
    this.score      = 0
    this.bullets    = []
    this.enemys     = []
    this.animations = []
    this.gameOver   = false
  }

  /**
   * 回收敵人，進入對象池
   * 此后不進入幀循環
   */
  removeEnemey(enemy) {
    let temp = this.enemys.shift()

    temp.visible = false

    this.pool.recover('enemy', enemy)
  }

  /**
   * 回收子彈，進入對象池
   * 此后不進入幀循環
   */
  removeBullets(bullet) {
    let temp = this.bullets.shift()

    temp.visible = false

    this.pool.recover('bullet', bullet)
  }
}

1. 我們可以看出，databus是一個單例對象，不論在其他代碼中new多少次，都是返回的同一個實例，符合我們的期望。
2. reset定義了所需要的數據源并初始化
3. 通過一個對象池的概念，控制當前頁面對象的數量，避免使用js原有的垃圾處理機制，而是通過對象池來復用已經創建的對象，算是一個性能優化。
4. frame屬性主要是用來刷幀的時候用來控制子彈的發射與敵機的出現時間。

sprite.js

/**
 * 游戲基礎的精靈類
 */
export default class Sprite {
  constructor(imgSrc = '', width=  0, height = 0, x = 0, y = 0) {
    this.img     = new Image()
    this.img.src = imgSrc

    this.width  = width
    this.height = height

    this.x = x
    this.y = y

    this.visible = true
  }

  /**
   * 將精靈圖繪制在canvas上
   */
  drawToCanvas(ctx) {
    if ( !this.visible )
      return

    ctx.drawImage(
      this.img,
      this.x,
      this.y,
      this.width,
      this.height
    )
  }

  /**
   * 簡單的碰撞檢測定義：
   * 另一個精靈的中心點處于本精靈所在的矩形內即可
   * @param{Sprite} sp: Sptite的實例
   */
  isCollideWith(sp) {
    let spX = sp.x + sp.width / 2
    let spY = sp.y + sp.height / 2

    if ( !this.visible || !sp.visible )
      return false

    return !!(   spX >= this.x
              && spX <= this.x + this.width
              && spY >= this.y
              && spY <= this.y + this.height  )
  }
}

1. 作為所有場景對象的基類，定義了所有精靈對象基本有的信息（位置，圖片，是否可見）
2. 定義了兩種能力，檢測碰撞與將自己繪制在canvas上

可以看出畫圖主要是用的canvas里的drawImage方法，也是我們自行開發小游戲以后會用到的方法。包括background,player等類都會繼承自精靈類，并且會添加自己的update方法來暴露更新自己位置信息的接口。enermy還會包裝一層爆炸動畫的封裝，思路大同小異，就不在多贅述了。

3.結論

1. 我們發現小游戲的開發與我們使用canvas進行h5小游戲的開發并沒有什么太大的區別，無論從繪圖的api還是事件的api都十分相似，還可以用window對象，這主要歸功于官方提供的 webapp-adapter.js ，該js會注入window對象并提供相應的canvas全局變量，也是文章中提到為什么在main.js里找不到canvas變量在哪里定義的原因了。所以我們可以開開心心地使用canvas來開發小游戲了！！！
2. 官方還說了一句，可以不引入 webapp-adapter.js 來開發小游戲，（ https://mp.weixin.qq.com/debu... ）這是小游戲的api文檔（當時找了很久）適配器的源碼寫得也很清晰，可以一讀來了解一些，其中也有很多官方寫的TODO的事情，還并不十分完善，如果想要快速移植已有的h5游戲代碼使用適配器是很有效的。如果想直接開發小游戲根據api文檔直接來開發也是很有效的方法，畢竟引入一層適配器還是會有一定的開銷。

tips: 讀一讀適配器源碼也有利于了解如何開發小程序(例如事件綁定之類的操作)

4.結語

小程序終于可以來做小游戲了，感覺還是休閑類的游戲會占主導地位，前端大大可以迎接新的戰場啦哈哈哈~~~（接下來會去掉適配器用原生api改寫官方demo）