我是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）绘制游戏。
优缺点
| 方案 | 上手成本 | 游戏代码体积 | 特点 | 限制 |
|---|---|---|---|---|
| 低代码/无代码方案 | 无 | 与模板相关，通常不小 | 交付速度快 | 游戏玩法受模板限制，较难有创新性 |
| 小游戏框架/工具 | 高 | 略大 | 功能齐全；适合各类小游戏；素材管理方便；适合团队协作、迭代开发 | 加载速度略慢 |
| 基于canvas的渲染库 | 中 | 小 | 比起手撸：渲染速度快，适合动画多或每帧刷新的场景 | 需要自己搭配或开发物理引擎、音效、动画等（相当于自己灵活选插件，组装一个专属该游戏的游戏框架） |
| 手撸 | 低 | 很小 | 简单游戏交付速度快；若用dom实现，可方便的适配多种分辨率 | 不适合开发工程量大的游戏；不适合制作包含复杂动画的游戏 |
方案决策树
为了方便各位做技术选型，我绘制了一个决策树：
但是具体的技术选型，情况相对复杂，还需要各位根据实际情况，权衡一下各个方案的优缺点，作出最终抉择。
当然最重要的决定因素还是看上手成本，很多时候我们不用某项技术，不是因为它不好，而是我们认为：不花精力学它、使用已熟练掌握的技术方案我们能更快实现，这一点，对个人技术选型、团队技术选型均适用。
案例
《联机五子棋》
游戏体验地址
方案
手撸，React + SVG
你可能会好奇：React还能做游戏？还能绘制SVG？不要惊讶，我甚至能告诉你：React还能做动作类游戏，效果也不会很差！可以关注我，以后教你