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

Posted 2022-08-19 HullQin

1. 前文回顾

关于《联机五子棋》小游戏，我在开发的时候，处处为极致用户体验着想。绞尽脑汁也要把用户体验做到最好！

上篇文章：《我做的《联机五子棋》是如何追求极致用户体验的？（上）》，我提到的点是：移动端适配、PC端适配、下棋只需点击一次、棋子的Hover态。

这篇文章，继续带你分析一下，我在极致用户体验方面，还做了哪些努力。

2. 更低的联机对战成本

2.1 其它联机小游戏调研

• 一些是在客户端上实现的（比如直接用TCP链接实现客户端之间的通信），这需要下载APP，甚至可能要搭建开发环境，这些可能主要是给程序员学习开发用的。
• 一些无需下载，用html实现。但它需要登陆，登陆前需要注册。这又比较麻烦了，可能还要个验证码。可能要依赖短信服务、邮箱服务，增加系统依赖，也增加了风险，也容易生成无用的用户数据（如果有用户频繁注册但长时间不活跃）。
• 一些用微信公众号JS API或小程序实现。它只要微信OAUTH授权即可用微信身份登陆了。这种体验是最好的。不过市面上，小程序/公众号网页内都充斥着广告，用户体验差。此外，公众号OAUTH授权能力需要企业认证才能使用，个人开发者通常很难去注册个公司来搞。

2.2 我期望的联机对战方式

1. 无需下载APP。
2. 无需登录。
3. 两人进入同一个网址就可以开始对战，极大减少授权时间。
4. 用户态需要长期保存。未结束的游戏，用户离开一段时间后，回来还能继续玩。

2.3 我的方案

1. 用浏览器作为游戏载体，而非客户端。
2. 使用cookie保存用户态。用户初次访问时，生成一个实效性很长的随机数cookie，保证每个用户的随机数不一样即可（即使有少量冲突也可以接受，因为不做在线匹配机制，只是朋友之间玩游戏，碰巧相同cookie的人可能永远不会有交集）
3. 房间号信息存到网址。通过网址可以直接进入指定的房间。这样分享网址，就能一起联机了。
4. 游戏数据保存在后台，记好每个房间的用户cookie。当用户回到房间时，取出后台数据，即可恢复对局。

3. 对局过程中，思考走某步棋的可能性，但只靠脑子不太不够用

我玩五子棋比较菜，脑子中演练不了那么多步骤，常常需要在对局过程中，去画一画“如果我下这里，后期有杀的机会吗”。

但是传统的五子棋游戏，大部分没有这种能力。所以，我加上了「单机演练」！这也是我最引以为傲的功能。

双人对战过程中，你可以随时点击「单机演练」，跳转至单人模式，当前棋局会被复制过去。在那里你可以随意下棋、悔棋。直到你找到最完美的一步，再点「返回房间」，继续下棋。

4. 「单人模式」或「单机演练」可通过保存链接来保存棋盘

• 有时候，我们下了一盘棋，觉得非常完美，想留作纪念。
• 又或者，自己搞出一个残局，希望分享给好友。

我也实现了！并且分享方式非常简单——发网址！

只需在「单人模式」、「单机演练」中，把棋子信息保存在URL中即可。

五子棋有15*15个格子，我用了巧妙的15进制来保存棋子位置。

例如十五进制00表示第1行第1列；十五进制39表示第4行第10列；十五进制ee表示第15行第15列。每个棋子都用2位长度字符串表明位置，拼接起来，也有下棋的顺序信息（可以基于顺序信息做悔棋）

例如，我给你这个网址，你可以直接看到棋盘：https://game.hullqin.cn/wzq/?p=740663075208420932192329144915481647274638566a667b678a6883699259a299b288c387d486d5a8b8a710a600e601d6d0c7e0c8e1d81ee80ec90ddaedeaeec6deca

5. 页面放大也不会失真，不会出现像素图

页面展示所有内容，我都是用矢量描述的！没有任何像素图。

所以，不管你放大多少倍，都依然清晰。在高分辨率手机屏幕上，你双指放大，展示也是非常的精致。如图：

6. 写在最后

如果你只是为了完成别人的需求，挣点工资，还是直接用组件库堆积功能吧，就没这么多要操心的了