5 分•作者: 0xCA1EB•5 个月前
2025年,我和我的家人沉迷于一款名为“OK Play”的五子棋/连珠/五子连线类游戏。我开发了一个网页版本,这样我们就可以随时随地玩了(比如,孩子们睡着后在手机上玩)。 最先连成五子(横向、纵向或对角线)的玩家获胜。游戏的第一阶段,玩家轮流将自己的棋子放置在已有棋子旁边(总是边对边连接;不能只通过角对角连接来放置棋子)。当玩家用完所有棋子后,游戏进入移动阶段:玩家拾起自己已有的棋子,并根据之前的放置规则进行移动。在移动阶段,不能移动会导致其他棋子断开连接的棋子。游戏按玩家顺序进行,直到有人获胜。 我使用 Elixir 的 Phoenix 框架,并结合 Daisy UI / Tailwind CSS 进行样式设计来编写了这个应用。该应用部署在 Gigalixir 上,并使用了其慷慨的免费套餐。我绝非前端开发者/设计师,所以这里实现的方式肯定有比我更好的方法。我主要专注于使其对移动设备友好,并支持浅色和深色模式。由于我们只在我们的手机(iPhone 13 Pro,Safari / Chrome)和我的电脑(MacBook Pro,Safari)上进行了测试,所以可能存在浏览器/设备特定的 bug。如果您有任何建议,无论是前端还是其他方面的,我都非常乐意听取! 开发这个应用是一段真正的旅程。亮点包括学习五子棋及其变体、图的割点(以及用于强连通分量的 Tarjan 算法),以及蒙特卡洛树搜索算法(用于我最近为单人游戏添加的、介于初级和高级之间的“AI”模式)。低谷则都与 CSS 相关。 未来我希望能添加一个“匹配”模式。不过我还没有深入研究通常是如何实现匹配机制的——这将是一个很好的学习机会!