［井字游戏］做一款回忆童年的游戏

99% of information we read, we forget anyway. The best way to remember is to "DO".

体验地址：https://www.hoohack.me/assets/tictactoe/

游戏完整的代码在我的 github 上，有兴趣也可以围观一下：TicTacToe，也希望大家可以点个 star。

缘起

最近在FreeCodeCamp上面学习前端知识，不知不觉已经学到了319课，现在遇到的一个小project是做一款井字游戏。说起井字游戏，真是满满的童年味道，还记得最疯狂的时候是小时候跟同桌拿着一张草稿纸就能玩一节课，回到家跟弟弟也能继续玩，对于没有太多娱乐节目的童年来说，真是一款玩不厌的小游戏。这款游戏代码比较简单，主要是掌握算法的原理，但是也有一些需要注意的地方，于是想把自己遇到的问题记录下来。

游戏界面

进入正题。项目的效果图如下：

FreeCodeCamp上要求不能查看源码来实现，于是便想着先把页面做出来。看到井字格子，就想着用9个li，然后设置li的边框作为井字线。于是用了一个div包住一个ul，里面有9个li。

游戏有一个开始界面可供选择玩家的角色，然后选择先手是哪一方，接着开始游戏。选择界面做了一个遮罩层，里面提供给用户选择，选择之后便把遮罩层隐藏并开始游戏。

井字游戏算法

算法参考了这篇文章。但里面的图片看不到了，笔者根据自己的理解再解释一遍，并配上一些图片。

这次做的是人机对战，因此就需要写出比较智能的算法。首先，设计者要懂得玩游戏，有自己的策略，接下来就是将自己的策略付诸实现。

从下图可以看到，整个棋盘可以连接处8条线，即一共有8种取胜可能：

1、开局第一步，这一步有两种情况

A、如果先手是电脑，那么就将棋子下在中心位置，如图：

B、如果先手是玩家，那么有下面三种情况要考虑 如果玩家在中心位置，那么电脑必须落在四个角位，因为如果不落在角位，那么就会出现必输的情形。假设现在用1-9表示9个棋位。如下图所示，如果玩家第一步在中心位置，第二步电脑落在第2位的棱位（图中的2），第三步玩家只需要在第7或第9位下棋（图中的3），第四步电脑必须在1或3位，第五步玩家跟进在7或9，则第六步电脑必须在1或3，那么第七步玩家只需要在4或者6下棋就可以赢了。

如果玩家在棱位/角位，那么电脑需要在中心位置下棋，在保证不输的情况下反击。

2、第二步棋（先角原则）

根据上面的分析，如果先手是玩家且玩家落棋在中心位置，为了避免必输的情形，电脑需要落棋在角上。而如果先手是电脑，那么如果玩家落在棱位，电脑落在角位让必输的情形属于玩家。

3、攻击

检测棋盘，如果有两枚己方的棋子连在一起且连线中仍有空位，那么就落棋在该位。

4、防守

检测棋盘，如果有对方的两枚棋子连在一起且连线中仍有空位，那么就落棋在该位。

5、垃圾时间

当不需要攻击也不需要防守的时候，那就随便找个位置下棋，尽可能找到连线中还有两个空位的位置。

特殊情况

有一种特殊情况是不能执行先角原则的，如下图所示，第一步，玩家先下棋在1，第二步，电脑根据开局第一步的规则下棋在中心位置5，第三步，玩家在1的对角位置9下棋，根据先角原则，第四步电脑将落在3或者7的棋位，第五步玩家在7或者3的位置封堵电脑，那么此时电脑就输了。唯有此种情况不能执行先角原则，所以在非攻击且非防守的时候要先排除掉此情况。

具体实现 说了那么多，可能比较枯燥，下面介绍一下具体的代码实现。 程序使用一个二维数组panel保存棋盘的状态，1是电脑的值，－1是玩家的值。 winArr保存所有可能赢的8个棋位组合；维护computerWin和userWin，初始值等于winArr，当电脑或玩家每次下棋时，都分别更新这两个数组，删除掉不能赢的棋位组合。在更新panel的时候会分别更新computerWin和userWin。

核心的方法是play，play的执行步骤伪代码如下：

如果可以攻击 遍历computerWin数组，找到可以攻击的棋位，下棋，显示是否赢了。 不能攻击，如果需要防守 遍历userWin，根据玩家可赢的组合，找出需要防守的棋位，下棋，更新panel； 不需要防守，如果是电脑先手的第一步 在中心位置下棋，更新panel； 不是先手第一步 如果中心位置没有被占去，在中心位置下棋，更新panel；返回 如果是特殊情况，在棱位下棋，更新panel； 返回 如果角位仍有位置，选择一个角位下棋，更新panel； 返回 最后一种情况，找到剩余的空位，优先选择位于computerWin的空位，下棋，更新panel； 返回

play算法的实现如下：

if(canAttack()) { console.log("attack"); var attackPos = findAttackPos(); updatePanel(attackPos, computerVal); } else if(needDefend()) { console.log("defend"); var defendPos = findDefendPos(); updatePanel(defendPos, computerVal); } else if(firstStep()) { console.log("first"); updatePanel(firstPos, computerVal); running = true; } else { console.log("other"); if(panel[1][1] == 0) { updatePanel(firstPos, computerVal); return; } if(special()) { console.log('special'); var pos = findSpecialPos(); updatePanel(pos, computerVal); return; } var random = Math.floor(Math.random() * 2); if(panel[0][0] == 0 && panel[2][2] == 0) { var pos = (random == 0) ? 0 : 8; updatePanel(pos, computerVal); } else if(panel[0][2] == 0 && panel[2][0] == 0) { var pos = (random == 0) ? 2: 6; updatePanel(pos, computerVal); } else { var otherPos = findEmptyPos(); updatePanel(otherPos, computerVal); } }

总结

在编码的过程中遇到的一个难题就是JavaScript的数组对象，我在第一次调用play方法开头输出panel的时候，得到的是play执行后panel的值，后来请教一位大神，发现是因为panel是一个对象，因为对象遍历引用的都是同一块内存地址，所以一旦有改变，就全部改了。如果直接使用下标输出每一个值的话是可以得到初始的值的，也可以用JSON方法将数组字符串，然后打印出来查看结果。

另外，也学会了如何在JavaScript里面封装一个类，将私有方法写在类的外面，需要暴露的方法写在类里面。当然，还有很多需要学习的地方。继续学习。

有时候一些东西看起来很简单，或者听到了很多次，心里面觉得实现起来应该很简单的，没什么了不起，觉得不以为然，但只有真正去实践出来的时候才能体会到其中的乐趣和思想，才能真正的掌握。所以，尽情的去DO。

本文较短，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

如果本文对你有帮助，望大力点推荐。