0. 《联机桌游合集: UNO+斗地主+五子棋》是什么？
这是我独立开发的H5小游戏，它是个桌游合集，每一款都可以联机，跟朋友一起玩。目前包括：UNO,斗地主,五子棋,象棋,国际象棋,围棋,一夜狼,狼人杀,德国心脏病,飞行棋,达芬奇密码,卡坦岛,井字棋,谁是卧底,璀璨宝石,阿瓦隆,炸飞机,行动代号,摇色子,酒吧游戏,拉密,黑白棋,毒药,爆炸猫,出包魔法师,路墙棋,跳棋,卡卡颂,军棋,国际跳棋,四国弑,骗子酒馆,斗兽棋,大富翁,CABO,情书,快艇骰子,角斗士棋,马戏星探,非洲播棋,花砖物语,忍者之夜,现代艺术。以后会持续开发新游戏。
特点
支持联机
跟朋友进入同一个房间，即可联机玩游戏。
- 《UNO》支持2-14人一起玩。
- 《斗地主》支持2-4人打牌。
- 《五子棋》支持1-2人下棋。
- 《象棋》支持1-2人下棋。
- 《德国心脏病》支持2-7人一起玩。
- 《一夜狼》支持3-10人一起玩。
- 《飞行棋》支持2-4人一起玩。
- ……
第一个进入房间的人会成为「房主」，可以修改游戏人数，人齐后房主可「开始游戏」。
游戏中断可随时重连
开始游戏后，如果你掉线，或者关闭了网页。不论过多久，只要房主没结束游戏，你重新回到这个房间，就可以继续对局。
哪怕所有人都关闭网页，只要游戏没结束。大家回来后，仍然可以继续对战！
当然，如果游戏还没开始，或游戏已经结束，那么你关闭网页，就退出房间了。
允许观战
当房间人数满时，之后进入的房间的人可以观战。
等到游戏结束，如果房间有空位了，访客点“刷新”，即可变成玩家，玩家位先到先得（晚了就还是访客噢）。
1. 我为什么要做《联机桌游合集》？
之前跟朋友聚会，但没带牌，很多桌游玩不了。
我去搜公众号、小程序，但大都充斥着广告，或只支持线上匹配，或交互复杂。
我们迫切需要——没广告的、支持朋友联机的、简洁的工具。
因为我自己懂一点点前端和后端，就做了些尝试。
上个月，我开了个公众号“线下聚会游戏”，用来发布这些“工具”，目前做了五子棋、斗地主、UNO。
但因为它是联机游戏，所以线上的朋友也可以玩。
2. 技术选型？为什么？
通信
毫无疑问，这是需要Client和Server频繁交互的场景。用HTTP轮询、长轮询都不合适，会浪费资源。
所以我选择了WebSocket作为通信协议。它跟HTTP一样也是基于TCP的，但差异在于，它Client和Server都可以主动发送数据，也随时可接收数据。
这样节约了带宽资源。
数据序列化协议
你可能会疑惑，这也需要决策？无脑JSON不就行了吗。
但我还真没用JSON。因为JSON是基于字符串去序列化，它的体积肯定会比基于二进制的序列化协议大一些。
因为涉及到频繁的数据交互，且我服务器网络带宽不高，我不想一个免费的游戏给我带来太多成本。所以最初的技术选型尤其重要（如果以后再改，是很难的）。
我期望有这样的协议：我定义好数据格式，比如五子棋游戏有2个字段，分别是“谁是黑棋”、“棋盘上棋子列表”。而我用第1位，0表示房主是黑，1表示房主是白。接下来8位，表示棋盘上有多少个棋子，假设为K，那么接下来K*8位，每8位就表示这K个棋子每个棋子的坐标。这样的数据序列化协议是最简短的。
但是我为什么要自己创造协议呢？这种东西，一定有现有的协议实现了！肯定不止我一个人想得到。
查了一下，还真有——Protocol Buffer。思路跟我心中的协议差不多，虽然空间比我心中的协议大了几位（可以忽略），但是扩展性比我心中的协议好很多。
所以，数据序列化协议，我选了Protocol Buffer。
这次技术选型，我又节约了带宽资源。
数据更新方案
这种桌游，一定是数据驱动的。服务端存一份游戏数据，前端根据数据得到当前各个数据状态，根据数据状态渲染出游戏界面。
有2种数据更新方案：
| 优点 | 缺点 | |
|---|---|---|
| 方案一：每次游戏数据更新，服务端同步全量数据给前端 | 可以有统一的版本控制 | 若游戏数据大，每次传输成本高 |
| 方案二：每次游戏数据更新，服务端增量更新数据给前端 | 每次传输成本低 | 可并发的增量更新，需要保证每个操作是原子操作；不可并发的增量更新，需要做好版本控制 |
如果是你，你会选方案几？你猜我选了方案几？
你可能以为我会故技重施，为了节约带宽而选择方案二。
但是我选了方案一。为什么？
- 我的游戏是小游戏，只要保证总的游戏数据量足够小（甚至能够1个TCP包发完），那么你把100b压缩成20b其实是无意义的，他们可能只是21ms和20ms的差别。用户能感觉到21ms和20ms的差别吗？不能。
- 方案二增量更新确实诱人，尤其是针对《王者荣耀》这种实时性强、数据量大的游戏。但我是个小游戏，实时性没那么强。而增量更新带来的前后端开发成本，是更高的，远高于收益。
后台选型
这个其实只要支持websocket都可以。我用了自己擅长的python，用了ASGI协议，用了Daphne实现。
但是，python解析protobuf是有成本的，好在python可以用C++实现。
最好的技术选型，其实是直接用C++改Nginx源码，以Nginx模块的形式实现小游戏后端。
但是开发成本比较高，我为了快速实现、落地、验证想法，就用了自己熟悉的python。
前端选型
既然已经是数据驱动了，那么React再适合不过。把游戏数据当作State，收到后台更新时，就setState，那么UI就会自动更新。
当然Vue也可以，只是我对React更熟悉。
写在最后
我是HullQin，公众号线下聚会游戏作者，全球开发联机桌游速度最快的人。HullQin曾经花了14天时间，发布了9款联机桌游：
- 2026年2月23日 大富翁
- 2026年2月26日 CABO
- 2026年2月28日 情书
- 2026年3月1日 快艇骰子
- 2026年3月2日 角斗士棋
- 2026年3月3日 马戏星探
- 2026年3月4日 非洲播棋
- 2026年3月6日 花砖物语
- 2026年3月8日 忍者之夜
我独立开发了免费无广告的《联机桌游合集》，包括：UNO,斗地主,五子棋,象棋,国际象棋,围棋,一夜狼,狼人杀,德国心脏病,飞行棋,达芬奇密码,卡坦岛,井字棋,谁是卧底,璀璨宝石,阿瓦隆,炸飞机,行动代号,摇色子,酒吧游戏,拉密,黑白棋,毒药,爆炸猫,出包魔法师,路墙棋,跳棋,卡卡颂,军棋,国际跳棋,四国弑,骗子酒馆,斗兽棋,大富翁,CABO,情书,快艇骰子,角斗士棋,马戏星探,非洲播棋,花砖物语,忍者之夜,现代艺术。
无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。
我在开发《联机桌游合集》时，每个细节都在追求极致用户体验，并总结了一些经验，今后将总结更多，欢迎大家关注专栏《极致用户体验》。欢迎大家阅读、点赞相关文章：
- [极致用户体验] 网页里的「返回」应该用 hisroty.back 还是 push ？
- [极致用户体验] 你的 Link Button 能让用户选择新页面打开吗？
- [极致用户体验] 一行简单的样式，让网页有「高级感」
- [极致用户体验] 2行代码，让你的UI适配移动端、PC端，快来收藏
我还新建了专栏《教你做小游戏》，分享做小游戏的相关经验，欢迎大家阅读、点赞相关文章：
