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

背景介绍

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

前期预研

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

推金币 App

由于时间紧迫，需要在短时间内敲定方案可行性，否则项目延期人头不保。在快速尝试了 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 做兼容处理。

障碍物

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 }
  ])
]);
推板
  • 创建&#