在这篇文章中，我将向你展示如何通过使用JavaScript与HTML和Vue，并使用Bootstrap样式来编程Connect 4游戏：
连接4》的JavaScript、HTML--网页版
这是一个 "连线4 "游戏，但它的网络版有玩家对玩家的选项，也有 玩家对使用小型人工智能的 CPU的选项。
在整个文章中，我将向你展示这个游戏是如何工作的，我使用了哪些技术，风格等。我还会告诉你如何下载源代码，因为这个游戏是完全免费和开源的。最后我将给你留下一个演示，让你在线玩connect 4。
游戏棋盘
游戏棋盘是一个动态的表格，由一个数组绘制而成。我去掉了边框，减少了填充物，还添加了一个蓝色的背景颜色，以使它看起来像真正的游戏板（也就是现实世界中的实物）。
在Gist上查看代码。
在表格（或td）的每个单元格内，我都放置了一张图片，可以是：
- 空的空间
- 玩家1
- 玩家2，与他对战时，他是CPU
这些图像可以在代码中或在文件系统中实际改变。图像路径由一个函数返回，根据数值的不同，返回不同的图像。
绘制游戏棋盘
正如我前面所说，棋盘是一个表格，看起来像这样。
表头有一个按钮，导致棋子被放在那一列，也就是把棋子丢掉。
因为它是一个二维数组或矩阵，我们首先通过整个数组来获得行。而在该行中，我们为该行的每个值重复一个单元格。
在每个单元格中都会有一个图像，它的来源是cellImage 方法返回的内容，接下来我们看到Vue中的编程时，我们会看到这个图像。
界面设计就到此为止，现在是时候看看这个Connect 4网页版游戏的JavaScript代码了。
图像
评估图像并返回路径的方法如下。
就像我说的，它是一个简单的if 。我让它这样做是为了有表现力，尽管如果你愿意，你可以使用字典，串联单元格等，也可以使用不同的图像。
可定制的常量
我们可以定义棋盘的大小或必须连接的棋子的数量，这样我们就可以玩连3，连5等游戏了！。
如果你注意到，当你和CPU玩connect 4时，它被当作玩家2。
重置游戏
我们有以下函数可以重置游戏。它首先做的是询问游戏模式：玩家对玩家，或玩家对CPU。
下一步是清理游戏盘，用空位填满。然后，随机选择一个玩家，由他来进行第一轮。
最后，它告诉CPU在轮到它的情况下进行移动。
让用户移动
当玩家或用户按下按钮放置棋子时，下面的代码会被执行，如果列还没有满，就进行验证，如果有平局或玩家赢了，就进行检查。
该方法接收列的编号。
该棋子被放置在矩阵中，使用指定的列**（减去1）**，并放在空的上行。换句话说，该单元格中的值被简单地改变，Vue自动负责在表格中刷新它。
最后，如果轮到CPU，并且游戏模式是CPU对玩家，则交换玩家并指示CPU走棋。
顺便说一下，如果出现平局或赢家，用户会被问及是否要再次游戏。在这种情况下，游戏会重新开始。
知道是否有赢家
在这个游戏中，当有4个棋子在任何方向上连接成一条直线时，就是赢家。因此，你只需在所有可能的方向上数一数，看看在矩阵中是否有相关玩家的 "连接4"。
为此，我创建了一些函数来进行多个方向的计数。
代码的作用是在棋盘上从一个点走到另一个点，如果发现相邻的棋子，就增加一个计数器。如果它发现一个颜色不一样的棋子，那么它就把计数器重置为零。
决定是否有赢家的函数如下。
它所做的是在所有方向上计数，如果它检测到有一行后面的连接棋子大于获胜所需的数量，那么它返回true 。否则false 。
在连接4中打成平手
另一方面，知道这个游戏中是否有平局的函数使用了一个贯穿整个矩阵的函数。如果发现一个空位，就意味着还不是平局，所以返回false 。
如果完成了对整个矩阵的遍历而没有发现空位，则返回true 。
连接4人工智能
正如我之前所说，这个游戏支持与CPU对战。我编写了一个小的人工智能，它可以根据算法选择最佳列，以尝试赢得connect 4。
首先验证是否轮到CPU，以及游戏模式是否是玩家与CPU对战。然后选择最好的一列，并将其值放在棋盘上，（也就是说，棋子被放置）。
之后，检查游戏的状态，看是否有平局或赢家。如果没有赢家或平局，则交换棋手，轮到人类了。
允许你选择最佳列的函数如下所示，并且是基于一系列的规则。
所做的是在棋盘上模拟一个运动（首先克隆原版，所以我们不直接修改），从运动中，检查：
- 如果有一列是为CPU赢得的
- 如果有一列是人类可以赢的，就拿下它
- 最高的分数，知道把棋子放在哪里才会有更多的机会赢。
把它放在一起
连接4游戏 - 要求用户再玩一次
最后，完整的JavaScript代码如下所示（我将把完整的项目留在帖子的最后）。
我没有详细说明一些功能，在我看来，这些功能非常简单，例如，在显示获胜者或询问游戏模式的地方，使用了Sweet Alert 2。
下载和源代码
像我的许多项目一样，这个软件是免费和开源的。你可以从GitHub资源库下载代码。
总结
我很高兴能用我最喜欢的框架将这个游戏移植到JavaScript上。Vue。记得之前我是用C语言做的这个游戏。
我一直很喜欢我让CPU挑选最好的那一列，虽然它并不完美，但有时也能赢。
