共计 1663 个字符，预计需要花费 5 分钟才能阅读完成。
我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
1.《联机五子棋》简介
游戏地址在这篇《我做了个《联机桌游合集: UNO+ 斗地主 + 五子棋》无需下载，点开即玩！叫上敌人，即刻开局！不看广告，不做工作，享受「纯正」的游戏！》文章的结尾，你能够去体验一下。
不晓得你玩起来感觉怎么样，反正我在开发的时候，处处为 极致用户体验 着想。搜索枯肠也要把用户体验做到最好！
这篇文章，带你剖析一下，我在这方面，做了哪些致力。
2. 挪动端适配
它的所有页面，我都做了挪动端适配。因为我晓得，大部分用户，都会用手机拜访我的网页。
2.1 棋盘宽度尽可能大
在挪动端，棋盘宽度刚好撑满手机屏幕的宽度，这是最大水平上，给用户下棋的便当，防止误操作。
其中挪动端适配，我曾经分享了一点教训，见：《2 行代码，让你的 UI 适配挪动端、PC 端，快来珍藏》。我五子棋游戏挪动端适配的办法，就采纳了文中介绍的办法，只用了 2 行代码。
2.2 网页容许双指放大
此外，如果局部用户手机还是太小，导致常常点错棋子，我也容许用户双指放大棋盘，如图：
3. PC 端适配
除了挪动端，PC 端体验也是十分好的，如图：
这次要得益于我设置了棋盘的 max-width 属性，使得在屏幕特地宽的时候，它能放弃一个正当的棋盘大小，争取在大部分 PC 上，一页能展现残缺棋盘。
当然，如果屏幕宽度小于棋盘的max-width，那么宽度就会应用默认值100%，使之撑满屏幕宽度。
4. 点击一次下棋 VS 点击两次下棋
我调研过，很多挪动端五子棋，为了防止用户点错棋子，是做了二次确认的：即第一次点击空位，会先用红圈标记它，再次点击红圈标记，才会真正下棋。
| 长处 | 毛病 | |
|---|---|---|
| 点击一次下棋 | 绝对后者，升高了 50% 用户下棋的交互次数 | 容易点错地位 |
| 点击两次下棋 | 点错地位几率大大降低 | 交互繁琐 |
我认为：原本在小屏幕上找准一个地位就不容易，还要间断 2 次找准点击，能力下棋胜利，太累了！
所以我保持：点击一次就下棋。升高了 50% 用户下棋的交互次数。
此外，我这个点击一次下棋，是有方法应答“容易点错地位”这个毛病的！
- 应答形式一：容许屏幕双指放大后，再下棋，点错概率升高。
- 应答形式二：提供悔棋性能，即便点错了，跟敌人求求情，他会批准你悔棋的～
而其它五子棋 APP，因为不反对双指放大棋盘、且是在线匹配玩法（导致悔棋成功率降落，因为陌生人看到你下错了，老开心了，就等着赢你挣分升段位了），所以不能忍耐“容易点错地位”的毛病。最终他们应用“点击两次下棋”的计划，我也能了解其起因。
5. 棋子的 Hover 态
在 PC 端，你鼠标挪动到棋盘上，只有该你下棋了，它就会半透明展现棋子，表明：如果你点击，那么你就在这里下棋了。如图：
然而在挪动端，是没有 Hover 态的，因为挪动端没有鼠标。须要把挪动端的 Hover 态勾销掉，否则会有奇怪的景象：
挪动端其实有光标，你点击哪里，光标就停留在那里了。如果你点击了某个中央下棋了，而后又悔棋了。那么那个中央会半透明展现棋子，给用户很大的困惑。
我在这篇文章分享了，如何实现 PC 端有 Hover 态、挪动端无 Hover 态，见：《用户体验好的 Button，在手机上不应该有 Hover 态》
当然，还有更多小细节噢，请期待下篇～
6. 写在最初
如果你只是为了实现他人的需要，挣点工资，还是间接用组件库沉积性能吧，就没这么多要操心的了 😁
我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
