前言

虽然本文标题为介绍一个水压套圈h5游戏，但是窃以为仅仅如此对读者是没什么帮助的，毕竟读者们的工作生活很少会再写一个类似的游戏，更多的是面对需求的挑战。我更希望能举一反三，给大家在编写h5游戏上带来一些启发，无论是从整体流程的把控，对游戏框架、物理引擎的熟悉程度还是在某一个小难点上的思路突破等。因此本文将很少详细列举实现代码，取而代之的是以伪代码展现思路为主。

游戏 demo 地址：http://jdc.jd.com/fd/demo/waterful/game.html

希望能给诸位读者带来的启发
  1. 技术选型
  2. 整体代码布局
  3. 难点及解决思路
  4. 优化点

技术选型

一个项目用什么技术来实现，权衡的因素有许多。其中时间是必须优先考虑的，毕竟效果可以减，但上线时间是死的。

本项目预研时间一周，真正排期时间只有两周。虽然由项目特点来看比较适合走 3D 方案，但时间明显是不够的。最后保守起见，决定采用 2D 方案尽量逼近真实立体的游戏效果。

从游戏复杂度来考虑，无须用到 Egret 或 Cocos 这些“牛刀”，而轻量、易上手、团队内部也有深厚沉淀的 CreateJS 则成为了渲染框架的首选。

另外需要考虑的是是否需要引入物理引擎，这点需要从游戏的特点去考虑。本游戏涉及重力、碰撞、施力等因素，引入物理引擎对开发效率的提高要大于学习使用物理引擎的成本。因此权衡再三，我引入了同事们已经玩得挺溜的 Matter.js。（ Matter.js 文档清晰、案例丰富，是切入学习 web 游戏引擎的一个不错的框架）

整体代码布局

在代码组织上，我选择了面向对象的手法，对整个游戏做一个封装，抛出一些控制接口给其他逻辑层调用。

伪代码：

1
2
3
4
 
<!-- index.html -->

<!-- 游戏入口 canvas -->
<canvas id="waterfulGameCanvas" width="660" height="570"></canvas>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
// game.js

/**
 * 游戏对象
 */
class Waterful {
        
  // 初始化函数
  init () {}
  
  // CreateJS Tick，游戏操作等事件的绑定放到游戏对象内
  eventBinding () {}
  
  // 暴露的一些方法
  score () {}
  
  restart () {}
  
  pause () {}
  
  resume () {}
  
  // 技能
  skillX () {}
}


/**
 * 环对象
 */
class Ring {
        
  // 于每一个 CreateJS Tick 都调用环自身的 update 函数
  update () {}
  
  // 进针后的逻辑
  afterCollision () {}
}
 
1
2
3
4
5
 
// main.js

// 根据业务逻辑初始化游戏，调用游戏的各种接口
const waterful = new Waterful()
waterful.init({...})

初始化

游戏的初始化接口主要做了4件事情：

  1. 参数初始化
  2. CreateJS 显示元素（display object）的布局
  3. Matter.js 刚体（rigid body）的布局
  4. 事件的绑定

下面主要聊聊游戏场景里各种元素的创建与布局，即第二、第三点。

一、CreateJS 结合 Matter.js

阅读 Matter.js 的 demo 案例，都是用其自带的渲染引擎 Matter.Render。但是由于某些原因（后面会说到），我们需要使用 CreateJS 去渲染每个环的贴图。

不像 Laya 配有和 Matter.js 自身用法一致的 Render，CreateJS 需要单独创建一个贴图层，然后在每个 Tick 里把贴图层的坐标同步为 Matter.js 刚体的当前坐标。

伪代码：