我是 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 实现，可不便的适配多种分辨率 | 不适宜开发工程量大的游戏；不适宜制作蕴含简单动画的游戏 |
计划决策树
为了不便各位做技术选型，我绘制了一个决策树：
然而具体的技术选型，状况绝对简单，还须要各位依据理论状况，衡量一下各个计划的优缺点，作出最终抉择。
当然最重要的决定因素还是看上手老本，很多时候咱们不必某项技术，不是因为它不好，而是咱们认为：不花精力学它、应用已熟练掌握的技术计划咱们能更快实现，这一点，对集体技术选型、团队技术选型均实用。
案例
《联机五子棋》
游戏体验地址
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 噢～我有空了会分享做游戏的相干技术。