H5 游戏开发

H5 游戏开发：推金币

近期参与开发的一款「京东11.11推金币赢现金」（已下线）小游戏一经发布上线就在朋友圈引起大量传播。看到大家玩得不亦乐乎，同时也引发不少网友激烈讨论，有的说很带劲，有的大呼被套路被耍猴（无奈脸），这都与我的预期相去甚远。在相关业务数据呈呈上涨过程中，曾一度被微信「有关部门」盯上并要求做出调整，真是受宠若惊。接下来就跟大家分享下开发这款游戏的心路历程。

背景介绍

一年一度的双十一狂欢购物节即将拉开序幕，H5 互动类小游戏作为京东微信手Q营销特色玩法，在今年预热期的第一波造势中，势必要玩点新花样，主要肩负着社交传播和发券的目的。推金币以传统街机推币机为原型，结合手机强大的能力和生态衍生出可玩性很高的玩法。

前期预研

在体验过AppStore 上好几款推金币游戏App 后，发现游戏核心模型还是挺简单的，不过H5 版本的实现在网上很少见。由于团队一直在做2D 类互动小游戏，在3D 方向暂时没有实际的项目输出，然后结合此次游戏的特点，一开始想挑战用3D 来实现，并以此项目为突破口，跟设计师进行深度合作，抹平开发过程的各种障碍。

由于时间紧迫，需要在短时间内敲定方案可行性，否则项目延期人头不保。在快速尝试了Three.js + Ammo.js方案后，发现不尽人意，最终因为各方面原因放弃了3D 方案，主要是不可控因素太多：时间上、设计及技术经验上、移动端WebGL 性能表现上，主要还是业务上需要对游戏有绝对的控制，加上是第一次接手复杂的小游戏，担心项目无法正常上线，有点保守，此方案遂卒。

如果读者有兴趣的话可以尝试下3D 实现，在建模方面，首推Three.js，入手非常简单，文档和案例也非常详实。当然入门的话必推这篇Three.js入门

指南，另外同事分享的这篇Three.js 现学现卖也可以看看，这里奉上粗糙的推金币3D 版Demo

技术选型

放弃了3D 方案，在2D 技术选型上就很从容了，最终确定用CreateJS + Matter.js组合作为渲染引擎和物理引擎，理由如下：

•CreateJS在团队内用得比较多，有一定的沉淀，加上有老司机带路，一个字「稳」；

•Matter.js身材纤细、文档友好，也有同事试玩过，完成需求绰绰有余。技术实现

因为是2D 版本，所以不需要建各种模型和贴图，整个游戏场景通过canvas 绘制，覆盖在背景图上，然后再做下机型适配问题，游戏主场景就处理得差不多了，其他跟3D 思路差不多，核心元素包含障碍物、推板、金币、奖品和技能，接下来就分别介绍它们的实现思路。

障碍物

通过审稿确定金币以及奖品的活动区域，然后把活动区域之外的区域都作为障碍物，用来限制金币的移动范围，防止金币碰撞时超出边界。这里可以用Matter.js 的Bodies.fromVertices方法，通过传入边界各转角的顶点坐标一次性绘制出形状不规则的障碍物。不过Matter.js 在渲染不规则形状时存在问题，需要引入poly-decomp做兼容处理。

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 World.add(this.world, [

Bodies.fromVertices(282, 332,[

// 顶点坐标

{ x: 0, y: 0 },

{ x: 0, y: 890 },

{ x: 140, y: 815 },

{ x: 208, y: 614 },

{ x: 548, y: 614 },

{ x: 612, y: 815 },

{ x: 750, y: 890 },

{ x: 750, y: 0 }

])

]);

推板

•创建：CreateJS 根据推板图片创建Bitmap 对象比较简单，就不详细讲解了。这里着重讲下推板刚体的创建，主要是跟推板Bitmap 信息进行同步。因为推板视觉上表现为梯形，所以这里用的梯形刚体，实际上方形也可以，只要能跟周围障碍物形成封闭区域，防止出现缝隙卡住金币即可，创建的刚体直接挂载到推板对象上，方便后续随时提取（金币

1 2 3 4 5 6 7 8 var bounds = this.pusher.getBounds();

this.pusher.body = Matter.Bodies.trapezoid(

this.pusher.x,

this.pusher.y,

bounds.width,

bounds.height

});

Matter.World.add(this.world, [this.pusher.body]);

•伸缩：由于推板会沿着视线方向前后移动，为了达到近大远小效果，所以需要在推板伸长和收缩过程中进行缩放处理，这样也可以跟两侧的障碍物边沿进行贴合，让场景看起来更具真实感（伪3D），当然金币和奖品也需要进行同样的处理。由于推板是自驱动做前后伸缩移动，所以需要对推板及其对应的刚体进行位置同步，这样才会与金币刚体产生碰撞达到推动金币的效果。同时在外部改变（伸长技能）推板最大长度时，也需要让推板保持均匀的缩放比而不至于突然放大／缩小，所以整个推板代码逻辑包含方向控制、长度控制、速度控制、缩放控制和同步控制，代码大致如下：

JavaScript

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 var direction, velocity, ratio, deltaY, minY = 550, maxY = 720, minScale = .74; Matter.Events.on(this.engine, 'beforeUpdate', function (event) {

// 长度控制（点击伸长技能时）

if (this.isPusherLengthen) {

velocity = 90;

this.pusherMaxY = maxY;

} else {

velocity = 85;

this.pusherMaxY = 620;

}

// 方向控制

if (this.pusher.y >= this.pusherMaxY) {

direction = -1;

// 移动到最大长度时结束伸长技能

this.isPusherLengthen = false;

} else if (this.pusher.y <= this.pusherMinY) {

direction = 1;

}

// 速度控制

this.pusher.y += direction * velocity;

// 缩放控制，在最大长度变化时保持同样的缩放量，防止突然放大／缩小 ratio = (1 - minScale) * ((this.pusher.y - minY) / (maxY - minY))

this.pusher.scaleX = this.pusher.scaleY = minScale + ratio;

// 同步控制，刚体跟推板位置同步

Body.setPosition(this.pusher.body, { x: this.pusher.x, y: this.pusher.y });

})

•遮罩：推板伸缩实际上是通过改变坐标来达到位置上的变化，这样存在一个问题，就是在其伸缩时必然会导致缩进的部分「溢出」边界而不是被遮挡。