H5 Flappy Bird 游戏制作 (1)

前言

我打算用几期的时间做一个 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 默认是 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