写点什么

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

作者:HullQin
  • 2022 年 8 月 19 日
    广东
  • 本文字数:1818 字

    阅读完需:约 6 分钟

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

我是 HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 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. 写在最后

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


我是 HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

发布于: 刚刚阅读数: 4
用户头像

HullQin

关注

公众号【线下聚会游戏】 2020.10.07 加入

game.hullqin.cn 我做了一些联机桌游网页:支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载,点开即玩!叫上朋友,即刻开局!不看广告,不做任务,享受「纯粹」的游戏!

评论

发布
暂无评论
[极致用户体验] 我做的《联机五子棋》是如何追求极致用户体验的?(下)_CSS_HullQin_InfoQ写作社区