持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
我是公众号「线下聚会游戏」的作者，开发了一些联机桌游网页（UNO、斗地主、五子棋等），总结了一些小游戏开发经验，汇总在专栏《教你做小游戏》，分享给大家，欢迎关注。
问题描述
如果我们想做一个H5小游戏，该用什么技术呢？
方案4种技术选型
前端的实现方案太多了，我按照封装程度从高到低罗列了以下4种方案：
优缺点方案上手成本游戏代码体积特点限制
低代码/无代码方案
无
与模板相关，通常不小
交付速度快
游戏玩法受模板限制，较难有创新性
小游戏框架/工具
高
略大
功能齐全；适合各类小游戏；素材管理方便；适合团队协作、迭代开发
加载速度略慢
基于canvas的渲染库
中
小
比起手撸：渲染速度快，适合动画多或每帧刷新的场景
需要自己搭配或开发物理引擎、音效、动画等（相当于自己灵活选插件，组装一个专属该游戏的游戏框架）
手撸
低
很小
简单游戏交付速度快；若用dom实现，可方便的适配多种分辨率
不适合开发工程量大的游戏；不适合制作包含复杂动画的游戏
方案决策树
为了方便各位做技术选型，我绘制了一个决策树：
但是具体的技术选型，情况相对复杂h5游戏开发框架，还需要各位根据实际情况，权衡一下各个方案的优缺点，作出最终抉择。
当然最重要的决定因素还是看上手成本，很多时候我们不用某项技术，不是因为它不好，而是我们认为：不花精力学它、使用已熟练掌握的技术方案我们能更快实现，这一点，对个人技术选型、团队技术选型均适用。
案例《联机五子棋》
游戏体验地址
/wzq
方案
手撸，React + SVG
你可能会好奇：React还能做游戏？还能绘制SVG？不要惊讶，我甚至能告诉你：React还能做动作类游戏，效果也不会很差！可以关注我，以后教你
原因
关于《联机五子棋》的用户体验，可参考：
参考代码
无React版本，纯 SVG + dom API 实现: /HullQin/gob…
《联机斗地主》
游戏体验地址
/ddz
方案
手撸h5游戏开发框架，React + div
原因
参考代码
React 实现的版本: /HullQin/pok…
《合成大西瓜》
方案
cocos
原因
去年2月火爆全网的《合成大西瓜》是个相对完整的游戏3D角色，包含了物理引擎、素材、动画、音效，且他们团队是有人员分工的，且期望快速上线，那么使用游戏框架就是最佳选择。
预告
我最近准备复刻一个《合成大西瓜》，但不使用cocos，而是使用2D渲染库pixi.js和2D物理引擎box2d来实现，增加了其它游戏玩法，敬请期待（不用cocos是因为我精力比较多，不追求快速上线）。
更新：我已经发布啦，快来玩：《 合 成 大 西 瓜 》 重 制 版 ！（ 联 机 版 在 做 了 ）！（游戏地址在文章里）
备注：当前网上很多《合成大西瓜》的魔改版本，大都是基于原版游戏的cocos打包产物来修改的，其中核心代码已经被uglify（混淆），所以魔改时有诸多限制，也很难创造出新的玩法。
写在最后
如果你像我一样，追求极致用户体验，非常推荐你关注专栏：《极致用户体验》，我会分享更多文章游戏动态，绝对是全网独一无二的原创精华内容 专栏里面的内容，看完一定会有收获！求赞，求关注，谢谢啦～
另外，如果你想学做小游戏，欢迎关注我的专栏：《教你做小游戏》，我会写些文章，介绍制作游戏过程中的难点及解决方案。
