我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

问题描述

如果我们想做一个 H5 小游戏，该用什么技术呢？

方案

4 种技术选型

前端的实现方案太多了，我按照封装程度从高到低罗列了以下 4 种方案：

• 低代码/无代码方案：使用现有的小游戏开发工具，可以套用其它游戏模版，改改素材直接做好。例如RPG Maker MV等。（当然如果你会写 RM 脚本，也可以把 RM 归类到小游戏框架/工具）

• 小游戏框架/工具：使用现有的小游戏开发框架，集成了动画、素材、音效、物理引擎等制作游戏常用的工具。例如cocos、白鹭等。

• 基于 canvas 的渲染库：使用更底层的前端库，针对 canvas 封装了适合游戏开发的渲染 API。例如渲染 2D 的pixi.js、渲染 3D 的three.js等。

• 手撸：使用 canvas，通过 JS 绘制游戏；或使用 SVG、div 等 dom 标签（此时可搭配 React）绘制游戏。

优缺点

方案决策树

为了方便各位做技术选型，我绘制了一个决策树：

但是具体的技术选型，情况相对复杂，还需要各位根据实际情况，权衡一下各个方案的优缺点，作出最终抉择。

当然最重要的决定因素还是看上手成本，很多时候我们不用某项技术，不是因为它不好，而是我们认为：不花精力学它、使用已熟练掌握的技术方案我们能更快实现，这一点，对个人技术选型、团队技术选型均适用。

案例

《联机五子棋》

游戏体验地址

https://game.hullqin.cn/wzq

方案

手撸，React + SVG

你可能会好奇：React 还能做游戏？还能绘制 SVG？不要惊讶，我甚至能告诉你：React 还能做动作类游戏，效果也不会很差！可以关注我，以后教你😄

原因

• 无需复杂动画，且分辨率需要适配多端，故放弃使用 canvas。

• 为了更好用户交互体验，棋盘需要允许放大，要求放大后棋子保真，故选择了 SVG。

• 游戏是数据驱动的，即通过棋盘棋子数据要渲染出 SVG，每次下棋也只是修改了游戏数据。所以选择了 React。

关于《联机五子棋》的用户体验，可参考：

• 《我做的《联机五子棋》是如何追求极致用户体验的？（上）》

• 《我做的《联机五子棋》是如何追求极致用户体验的？（下）》

参考代码

无 React 版本，纯 SVG + dom API 实现: https://github.com/HullQin/gobang

《联机斗地主》

游戏体验地址

https://game.hullqin.cn/ddz

方案

手撸，React + div

原因

• 期望游戏加载速度很快，故放弃使用框架和大量游戏素材。

• 无需复杂动画，网页需要响应式，故放弃使用 canvas。

• 游戏是数据驱动的，即通过场上扑克牌数据要渲染出游戏界面，每次出牌也只是修改了游戏数据。所以选择了 React。

参考代码

React 实现的版本: https://github.com/HullQin/poker_fe

《合成大西瓜》

方案

cocos

原因

去年 2 月火爆全网的《合成大西瓜》是个相对完整的游戏，包含了物理引擎、素材、动画、音效，且他们团队是有人员分工的，且期望快速上线，那么使用游戏框架就是最佳选择。

预告

我最近准备复刻一个《合成大西瓜》，但不使用 cocos，而是使用 2D 渲染库pixi.js和 2D 物理引擎box2d来实现，增加了其它游戏玩法，敬请期待（不用 cocos 是因为我精力比较多，不追求快速上线）。

更新：我已经发布啦，快来玩：《《 合 成 大 西 瓜 》 重 制 版 ！（ 联 机 版 在 做 了 ）》！（游戏地址在文章里）

备注：当前网上很多《合成大西瓜》的魔改版本，大都是基于原版游戏的 cocos 打包产物来修改的，其中核心代码已经被 uglify（混淆），所以魔改时有诸多限制，也很难创造出新的玩法。

写在最后

我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。