--- highlight: a11y-dark theme: channing-cyan --- 我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：[游戏创意投稿大赛](https://juejin.cn/post/7077529509724946445 "https://juejin.cn/post/7077529509724946445") >五子棋作为大家休闲娱乐的方式，相信大家都玩过，并且不少人应该精于此道。作为程序员的我们是否考虑过它是如何实现的？人机如何实现？在线又是如何进行匹配和对战的呢？ *我耗时几天，终于完成初版的五子棋小游戏，主要包含下面几个小功能：* * *登录注册* * *人机对战* * *在线对战* * *积分模块* 在线体验地址：[五子棋大作战](http://122.112.181.245/) 开源代码地址：[我犟不过你：gobang](https://gitee.com/wei_rong_xin/gobang.git) # 一、概述本篇文章重点讲解此五子棋的**玩法**、运用的**技术实现**，以及当前游戏的**不足和改进方案**。目前作为一个初版，能够完成我所预期的功能，且项目整体代码量较小，复杂度较低，比较适合想要学习相关代码技术的同学们参考，同时也能帮我提出更好的改进方案。欢迎大家赏玩，参考，点评。需要说明的一点，本人的前端很一般，目前界面较为简陋，只为实现基本功能，需要以后逐步的优化。 # 二、玩法介绍开篇提到了本游戏有四个小功能，下面结合图例，来逐步看下每个功能。 ## 2.1 首页访问[五子棋大作战](http://122.112.181.245/)，直接进入到首页： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee35c0d6b02c4eedb676cfc8fc49b234~tplv-k3u1fbpfcp-watermark.image?) 可以进行模式选择： * 人机模式 * 对战模式可以查看排行榜： * 人机榜 * 天梯榜 ## 2.2 登录注册此处的登录注册功能，主要是为了记录玩家的得分情况。所以账号可以直接使用中文，账号即昵称，直观体现。 ### 2.2.1 登录当我们点击**人机模式**或**对战模式**，会弹出提示框，提示我们登录： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79cacf13a0c048a3b043cf4bde2b66db~tplv-k3u1fbpfcp-watermark.image?) ### 2.2.2 注册首次进来的玩家，需要进行注册，点击上图左下角的注册按钮即可： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/004386ff4963499fb4242d32da708f47~tplv-k3u1fbpfcp-watermark.image?) 我们输入自己的账号和密码，点击注册，同时会直接登入游戏。 ## 2.3 人机对战 ### 2.3.1 先手后手完成前面的登录注册，再次点击首页的**人机对战**按钮，即可进入游戏界面，第一步您需要选择**先手或者后手**： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cb60a395615499c88bce98fd51f6884~tplv-k3u1fbpfcp-watermark.image?) ### 2.3.2 超时我们此处点击先手，即可开始游戏，需要注意，您有**30秒**的思考时间，超时即**判输**： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/532145c05e094e99812101830f3dcfb8~tplv-k3u1fbpfcp-watermark.image?) 电脑落子需要一定的思考时间，取决于当前机器的性能，基本不会超过4到5s，电脑是不会超时的： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee2553296abf45a9a3bde4ebca8a533b~tplv-k3u1fbpfcp-watermark.image?) ### 2.3.3 输赢提示当您赢下此局、或失败后，会给出如下提示： * **返回首页**则退出当前模式； * **再来一局**，游戏重新开始，再次开始选择**先手或者后手**。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe615671b79649da9aa2e26819262e7d~tplv-k3u1fbpfcp-watermark.image?) 如果您获胜了，会得到**100积分**，输了会相应扣除**10积分**。另外界面提供**返回首页**，和**重开一局**按钮，此两种不扣除积分。 ## 2.4 在线对战 ### 2.4.1 匹配点击**对战模式**按钮，会直接进入到匹配界面： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a089ddad83c14bfe90b2290738ecd41c~tplv-k3u1fbpfcp-watermark.image?) 此过程点击**取消匹配**，则退出该模式，返回首页。当另外玩家进入到匹配过程当中，双方会进行配对，成功后开始游戏： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/777efc6477d0460e8c22300e9c8d763d~tplv-k3u1fbpfcp-watermark.image?) ### 2.4.2 超时进入界面后，会看到当前是黑子回合，还是白子回合，提供**倒计时提示** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29481ae443de49afbfc5ef0f1cf239ef~tplv-k3u1fbpfcp-watermark.image?) 如若**超时**未落子，则己方输，**扣除10积分** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e199a3b32c84f0b91dbcea40dbaa507~tplv-k3u1fbpfcp-watermark.image?) 相应的，**对方获胜**，获得**100积分**： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27304d3fb4cb4ec1baa069834d8f5ec7~tplv-k3u1fbpfcp-watermark.image?) ### 2.4.3 认输提供**认输**按钮： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0425f87e3bb4287ae6ad52fe3d4e6cc~tplv-k3u1fbpfcp-watermark.image?) **认输方**，扣除**10积分**： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af9c0a50c7c146a38c0a13ee197155b3~tplv-k3u1fbpfcp-watermark.image?) 相应的，对方获得**100积分**： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25a4a90293234ca8bc052aa7d58697d6~tplv-k3u1fbpfcp-watermark.image?) ### 2.4.4 输赢提示当前模式下，无论输赢，点击提示的**确定**，则会返回首页，想要继续，可再次点击**对战模式**进行匹配。 ## 2.5 积分模块此模块用来记录玩家的得分情况，增加游戏乐趣。首页能看有两个超链接： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/121307cfdfe04fe49cbf44eb1838c665~tplv-k3u1fbpfcp-watermark.image?) ### 2.5.1 人机榜选择人机榜，则会从左侧弹出**TOP20**榜单： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab2bc6afe103472388cc3772bba0dae6~tplv-k3u1fbpfcp-watermark.image?) ### 2.5.2 天梯榜选择天梯榜，则会从右侧弹出**TOP20**榜单： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82cd0b4831a4419aaedf0560ff93140c~tplv-k3u1fbpfcp-watermark.image?) # 三、主要技术实现下面主要按照功能模块来聊技术实现。 ## 3.1 项目架构项目整体的架构非常简单，只有三层，且都是单体服务： * *应用层：通过nginx部署vue项目* * *服务层：单体springboot服务* * *数据层：mysql、redis* ![未命名文件 (6).png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/deb611e7fe6d42bc9cff488ad557dd80~tplv-k3u1fbpfcp-watermark.image?) ## 3.2 输赢判断我们都知道，五子棋的棋盘是一个*15 * 15*的正方形,只要有一方连成*五子*，即算获胜。那么*如何判断当前棋局中有相同颜色的五子呢？* 此处我在前端当中使用二维数组，去模拟整个棋盘，棋盘的**横坐标**和**纵坐标**可以完美的放到二维数组当中。假设有大小为15的二维数组: `arr[15][15]` 那么其对应到棋盘上就如下所示： ![未命名文件 (7).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c338979f26584e3489ddfacbc44b644a~tplv-k3u1fbpfcp-watermark.image?) 如上所示的二维数组，代表棋盘上的每个位置，以此类推，直到`arr[15][15]`。由于棋子主要是两种颜色**黑色**和**白色**，所以我定义当假设黑子落到棋盘时，我就在此点设置数组的值为**1**，同样的，白色落子点位就可以设置为**2**；经过这么记录，棋盘上所有的点位都被我记录在二维数组当中的。 **那么如何判断输赢呢？** 棋盘主要有四个方向：**横**、**竖**、**斜**、**反斜**。我们将每个方向的数组值通过**join方法**转成**字符串**，查看棋盘上是否有**11111**，**22222**这样的连续字符串即可。关于二维数组横向和竖向遍历很简单，难点在于**斜**、**反斜**的遍历，本文不做详细介绍了，相关算法在力扣上就有。到此为止，每次落子我们去判断次数组是否有匹配字符串即可判断输赢了。 ## 3.3 五子棋基础引申设计理念真正的五子棋高手，都对于棋盘的落点有自己想法，然后落在哪，如何落，都是有讲究的，感兴趣的同学看下此地址，介绍的很详细：http://game.onegreen.net/wzq/HTML/142336.html 上面这个文章主要突出了几个不同的棋势，如下所示： * 连五 * 活四 * 冲四 * 活三 * 眠三 * 活二 * 眠二看懂上面的内容，似乎发现从上到下的危险程度是**逐渐减少**的，那么我就以此制定一个根据不同棋势的**分数枚举**，也可以称为分数模型: ```java LIAN_5("LIAN_5",1000000), HUO_4("HUO_4",30000), CHONG_4("CHONG_4",25000), HUO_3("HUO_3",6000), HUO_2("HUO_2",1000), MIAN_3("MIAN_3",500), MIAN_2("MIAN_2",300), ONE_CHESS("ONE_CHESS",10); ``` 既然有了分数的概念，那么相信同学们能想到接下来的动作了，我要针对当前的棋局为**玩家**和**电脑**进行打分了。 ## 3.3 【人机模式】实现方案通过前面的描述，我的人机模式就是基于这样一套**分数模型**来进行自动下棋。整个人机对战模式，是项目的最难点，要实现**电脑自动的防守和进攻**。 ### 3.3.1 思想设计 **那么电脑如何知道下在哪最合适呢？** 最简单的方式，*当你不知道是否合适的时候，去试一下不就知道了？* 难么我们的方式是相同的，让电脑自己去尝试一下，下在哪里会获得最高分！！！则必然会有下面的流程： ![未命名文件 (8).png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11bb97f110c84dec86536c6cd65970f6~tplv-k3u1fbpfcp-watermark.image?) 如上图，到了最为困难的地方，如何权衡这个**玩家得分**，**电脑得分**？我的想法就是以**防守为主**，就是以玩家得分为基础。想象一下，电脑在棋盘的每个点都进行模拟下棋，此时形成不同的**棋势**，必然有不同的总得分，最后会得到每个点位**得分列表**，作为**电脑**一定希望**玩家得分越低越好**；反之，对于电脑自己，它希望自己的得分要高一些。 **不能只取最低分**，你这样做导致电脑**只会防守**。也不能让电脑只取自己的最高分，那就只会进攻了。所以最后，我定下了下面的解决方案： ![未命名文件 (10).png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc77f9828036429697e19681d998d1d5~tplv-k3u1fbpfcp-watermark.image?) **【差值列表】有什么含义？** 列表当中的每一个得分都是，*电脑得分* *减去* *玩家得分* 的差值，那么我是不是可以认为此列表的最大值，就是在玩家得分的所有点位当中，对于*电脑最为有利的点位*。直白来说，电脑是以玩家的得分为基础，找到既不利于玩家，又对电脑最有利的点位。 **差值列表如果存在相同值怎么办？** 假如有两个相同的点位，那么如何判断下在哪里最优呢？我这里用相同的点取模拟用户的下一步，取其得分最高的点，作为电脑下在最优的点。 ### 3.3.2 得分设计经过前面的思想设计，发现似乎可行，那么下面就来设计下如何计算得分呢？ #### 3.3.2.1 棋势细化首先，我对于前面提到的打分模型，进行了细化。设想一下，**冲四**这个场景，要根据字符串的形式去匹配，那么可能存在**21111**，或者**11112**，此种标识被其他颜色堵住了；那么如果是靠**边界**的呢？就需要使用比如**31111**来表示了吧；还有中间有空位间隔的，再被堵住，或者是边界的情况。所以形成了如下可能形成的棋势，包含一部分但并不全面： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/594b50a0840f428ebd852f1157bcd8da~tplv-k3u1fbpfcp-watermark.image?) #### 3.3.2.2 按方向计算得分与前面介绍获胜的方法相同，我们仍然需要去对整个棋盘数据进行遍历，分为：**横**、**竖**、**斜**、**反斜**。针对与四种不同方向的得分计算，抽象一个抽象类： ```java /** * 棋局方向分析抽象类 * * @author weirx * @date 2022/04/01 18:41 **/ public abstract class AbstractChessDirectionAnalysis { public abstract Map analysis(Integer[][] integers, boolean flag); public Map analysis(ChessScoreEnum chessScoreEnum, String join, boolean flag) { join = this.handleBorder(join); Map map = new HashMap<>(); if (flag) { List playerChessScoreChildEnums = PlayerChessScoreChildEnum.getByChessScoreEnum(chessScoreEnum); for (PlayerChessScoreChildEnum c : playerChessScoreChildEnums) { String type = c.getType(); if (join.contains(type)) { map.put("score", chessScoreEnum.getScore()); map.put("type", chessScoreEnum.getCode()); map.put("str", c.getType()); } } } else { List aiChessScoreChildEnums = AIChessScoreChildEnum.getByChessScoreEnum(chessScoreEnum); for (AIChessScoreChildEnum c : aiChessScoreChildEnums) { String type = c.getType(); if (join.contains(type)) { //如果玩家冲四了，那么分数要给大于自己可能活四的情况 map.put("score", chessScoreEnum.getCode().equals(ChessScoreEnum.CHONG_4) ? chessScoreEnum.getScore() * 2 : chessScoreEnum.getScore()); map.put("type", chessScoreEnum.getCode()); map.put("str", c.getType()); } } } return map; } public String handleBorder(String join) { if (join.indexOf("1") == 0) { join = "3" + join; } if (join.lastIndexOf("1") == join.length() - 1) { join = join + "3"; } return join; } } ``` 此抽象类包含通用的**棋势匹配**和**封装得分**的能力。其中有一个if-esle判断，用来区分当前获取的是玩家得分，还是电脑得分，双方的枚举字符串一个是**1**，一个是**2**。 **还有一点需要注意：如果玩家此时有冲四，电脑的下一步恰好有活四，那么给的分值一定要比电脑的活四分值要大，否则电脑会去下自己的活四，而忽略玩家的冲四，导致游戏输掉。** 另外提供一个需要实现的分析方法`analysis(Integer[][] integers, boolean flag)`以及针对边界的处理方法`andleBorder(String join)` 四种方向的分析，分别去继承此抽象类，下面以横向分析为例。实现analysis方法，此方法主要用来遍历横向的棋局，核心还在于抽象类的方法调用，用获取当前行的字符串去匹配**棋势枚举**中定义好的字符串，如果匹配上了，那么就得到该分数了。 ```java /** * 棋局横向分析 * * @author weirx * @date 2022/04/01 18:44 **/ @Slf4j @Service public class ChessRowAnalysisService extends AbstractChessDirectionAnalysis { @Override public Map analysis(Integer[][] integers, boolean flag) { Map map = new HashMap<>(); for (int i = 0; i < 15; i++) { Integer[][] col = new Integer[15][15]; for (int j = 0; j < 15; j++) { col[i][j] = integers[j][i]; } Map row = this.analysis(col, i,flag); if (!row.isEmpty()) { map.put("ROW_" + i, row); } } return map; } public Map analysis(Integer[][] integers, int index, boolean flag) { Map map = new HashMap<>(); String join = StringUtils.join(integers[index], ""); for (ChessScoreEnum chessScoreEnum : ChessScoreEnum.values()) { Map row = this.analysis(chessScoreEnum, join,flag); if (!row.isEmpty()){ map.put("ROW_"+chessScoreEnum.getCode(), row); } } return map; } } ``` 以上的难点，就是对于**格式分的拆分和封装**。尤其是**斜**、**反斜**的分析，是其实完全不同的过程，需要重点关注，限于篇幅，需要的请看源码。每一种方向分析会返回一个Map对象，下面需要我们做的就是拆分出来求和就好了，较简单，此处不介绍了。关于人机对战就暂时分析这么多了。 ## 3.4 【对战模式】实现方案相对于在线对战，其对算法等等的逻辑分析，要弱很多，在线的重点在于如何实现两个玩家的**通信和数据同步**。本文采用的实现方案基于**webSokcet**实现。 ### 3.4.1 匹配玩家匹配玩家是我在实现此功能遇到的第一个难题，需要考虑**如何存储正在匹配的用户？** **如何对匹配中的玩家进行配对呢？** **匹配过后，需要将前面保存的正在匹配的用户信息删除** 我通过较为简单的方式去实现，如下图所示： ![未命名文件 (11).png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b98dbbd5caf4d26ac48f776e408f8f5~tplv-k3u1fbpfcp-watermark.image?) 过程分析： * 玩家发起匹配，会将其信息存储到redis当中 * 定时任务每5秒不断拉取该key * 定时任务判断是否至少两人在匹配： * 否：继续循环 * 是：删除二人匹配信息，同时推动websocket * websocket根据匹配信息，分别推送匹配成功的消息 * 两位玩家建立连接 ### 3.4.2 在线对弈双方在自己的客户端的每一次落子，都会将消息（主要是当前**落子位置信息，对手用户名**），通过websocket推送到服务端，服务端根据对手用户名**推送topic**，对手客户端通过**监听topic**（redis发布订阅）获取到此消息，通过websocket推送到页面，最终完成客户端棋子的渲染，达到双方同步的目的。此处redis主要是解决**分布式session**的问题，虽然本项目是单机，但是出于习惯，还是使用redis中转一步。 ![未命名文件 (12).png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c287f8341008462c9d616cae1431231d~tplv-k3u1fbpfcp-watermark.image?) # 四、不足和改进方案 * **人机对战** **不足**：目前人机对战，对于复杂多变的棋局，仍然会出现分数计算不准确的情况，导致电脑落子出错。尤其是棋子被堵截、涉及边界，在添加空位的情况，没能覆盖所有的可能。人为归纳比较费力，毕竟种类繁多。 **改进**：后续的改进方案主要以**AI**为主，让电脑学会**自学习**。每一次失败，都自动记录失败位置，并持久化，经过**长期训练**，应该能覆盖绝大多数的可能性。 * **在线对战** **不足**：目前是定时任务轮询匹配玩家，小并发项目没有问题，并发量大的话可能会存在**分配效率低下**的问题。且如果**分布式部署**的情况下，还要针对**定时任务做幂等**处理。 **改进**：后期会将底层修改为Netty。 * **页面优化** **不足**：作为后端程序员，目前页面写的简单，且代码格式较为混乱，没有很多好的用到VUE的精髓，如路由等，导致页面不流畅，待重构。 **改进**：重构代码风格，按功能划分组件、页面。增加游戏细节，丰富色彩。 # 五、总结整个游戏，利用平时的业余时间，大概用了10天左右，效率不算高，中间也遇到问题，卡了很久。尤其是在人机模块的设计耗费了很多时间，中间也推翻了几次方案，磕磕绊绊的总算完成了，问题还有很多，后续有时间会去优化。总结几点自身的不足： * 数学基础不好 * 算法一般 * 前端编码能力有待提升 * 遇到问题，要学会跳出循环，整理思路后再分析 * 年龄问题，思考确实不透彻其实最重要的一点在于**动手之前需要先思考，无论做什么开发，还是要先做设计，验证可行性，以免反复**。