使用 array.include() 检查数组中超过 2 个内容

Question

我正在制作一个基于纯JS的井字游戏，但是在为玩家定义获胜条件时，我希望它在条件匹配时提醒用户。

当选中一个框时，如果播放的是 X，它会变成红色，如果是 O 的轮到，则变成蓝色，它还将 box 元素的 id 注册到一个包含所有被占用的框的数组中，这也取决于该框是红色还是蓝色，它还标记了 id 以及 0， 1(0 为红色 1 为蓝色)

所以数组看起来像这样 (11,0 22,1 33,0) 11 是第一行 第一列 0 表示红色占据了该位置(红色 = X)

过去，我尝试过 array.include 来检查已经单击的框是行还是对角线，以及它们是否也被同一播放器选中。 我使用了 AND 运算符，因此它会检查同一播放器是否连续检查了 3 个。因此，只有连续选中所有三个，它才会提醒获胜。我已经将布尔值存储在 redwincond bluewincond 中

function logic(clickedArr) {
redwinCond = clickedArr.contains(("11,0") && ("22,0") && ("33,0"));
bluewinCond = clickedArr.contains(("11,1") && ("22,1") && ("33,1"));
console.log(bluewinCond, redwinCond)
if (redwinCond === true) {
alert("Red wins !")
} else if (bluewinCond === true) {
alert("Blue wins !")
} else {
}    
}

示例redwinCond = clickedArr.contains(("11,0") && ("22,0") && ("33,0"));预期结果：在相同的颜色警报用户检查所有 3 个后

结果：仅当单击指定的第三个框 (33,0) 时，它才会发出警报。 不检查其他 2 个是否被选中 也已选中

Answer 1

使用every：

["11,0", "22,0", "33,0"].every(s => clickedArr.includes(s));

Answer 2

> 没有任何名为 Arraycontains的方法，而是您可以将Array#every方法与Array#includes方法一起使用。

["11,0", "22,0", "33,0"].every(v => clickedArr.includes(v))

仅供参考：在您的代码中，("11,0") && ("22,0") && ("33,0")会"33,0"，因为所有其他值都是真实的。

Answer 3

一个更干净的方法是存储您的板状态，而不是每次存储每次点击。它会让你的生活更简单。例如，一种方法是将其存储在嵌套数组中，如下所示：

var board = [
['x', '', 'o'],
['x', '', ''],
['',  '', '']
];

右上方的方块将按如下方式访问：board[0][2]。 您还可以迭代 win 检查函数中的行和列，而不必手动对每一行和每一列进行硬编码。