前言

我打算用幾期的時間做一個 Flappy Bird 游戲。

H5 游戲有不少現成的引擎，可以讓開發這很方便的完成游戲開發。比如：

• createjs
• pixiJS
• playcanvas 上面這個游戲就是用這個庫實現的
• egret

然而今天我不用這些引擎。使用原生 js 實現這個游戲。

新建項目

通過 gt 腳手架工具，使用 gt-front-end-scaffold 腳手架新建了項目：flappy-bird

新項目中默認包含了 es6, webpack 等特性幫助我們開發。

修改 src/entries/demo.js 的名稱為 flappy-bird.js。內容修改為：

import '../FlappyBird';

if (module.hot) {
    module.hot.accept('../FlappyBird', () => {
        location.reload();
    });
}

我們接受了 webpack hot reload，當受影響的文件為 ../FlappyBird/index.js 時，進行頁面的刷新。這樣我們可以在改動了源碼后

在 src 目錄下新建 FlappyBird 目錄。目錄下新建 index.js 。新建 index.pcss，進行樣式編寫。

canvas

我們先放一個 canvas，讓項目跑起來。

修改 templates/index.html，添加一個 canvas 元素。

<canvas></canvas>

我們通過 canvas 的方式進行游戲的元素繪制。

canvas 默認是 inline 元素，因此需要在 canvas 上設置 display: block;，清除元素的默認邊距。

目前大家的設備都是高清屏幕了，對于 retina 來說，一個像素點展示了4個實際像素的內容，對于更高清的屏幕來說，比例更大。可以通過 window.devicePixelRatio 獲取到比例。

我們把 canvas 的實際寬高放大到屏幕寬高的相應倍數，再使用 css 的縮放展示在頁面上即可。

模塊拆分

仔細看下游戲，我們嘗試拆分下游戲的元素。游戲包括：背景，柱子，鳥。背景不動。柱子每次都是上下兩根對應，中間留空讓鳥飛過，柱子可以抽象成方形。鳥左右位置固定，上下根據用戶操作來。

我們還需要單獨的游戲管理的類管理其中所有類。畫布類進行 canvas 設置。用戶輸入類來獲取用戶輸入，控制元素的變化。柱子管理類來管理所有的柱子。

GameManager

需要控制 StickManager，Input，Canvas，Bird，Background，提供 start 方法進行初始化。

游戲中的繪制是實時進行的，通過 requestAnmiationFrame 回調來獲取瀏覽器渲染的下一幀，在下一幀進行繪圖。

繪圖時考慮不同設備的差異，通過時間差來計算變動，獲取新的一幀的狀態，避免不同設備上游戲難度不一致。

class GameManager {
    loop() {
        // get time
        // calculate position
        this.paint();
        requestAnimationFrame(() => {
            // next frame
            this.loop();
        });
    }
}

TBC