如何使一个井字游戏赢检查功能工作的预期?

Question

我正在用JavaScript制作一个简单的井字游戏，我已经让它完全工作了，但有一个问题，有时它声明玩家的胜利是玩家之间的平局，我不知道为什么会发生这种情况，尽管我怀疑这是因为它没有找到胜利。毕竟，这种情况只发生在9个方格都被填满的情况下。因此，我的脚本最有可能以一种方式阅读它，它只是声明如果所有9个单元格都被填充，无论单元格中的内容如何，它都是一个平局。然而，我似乎就是不明白为什么会这样。

这是我的win函数支票:

function checkForWin() {
for (let on=0; on<data.pieces.length; on++) {
var onThis = data.pieces[on];
var love = 0;
for (let i=0; i<data.winCond.length; i++) {
var wit = data.winCond[i];
if (data.filledCells[wit[0]][1]==onThis&&data.filledCells[wit[1]][1]==onThis&&data.filledCells[wit[2]][1]==onThis) {
endGame(onThis);
} else {
love=i;
}
}
if (on==(data.pieces.length-1)) {
if (love==(data.winCond.length-1)&&data.filledCells[9]) {
endGame("XO");
}
}
}
}

需要注意的是，每次点击其中一个单元格，就会调用checkForWin()函数。

data.winCond表示所有8种可能的获胜条件，每种获胜条件用3个数字表示，data.pieces显然是X和O。而data.filledCells代表9个细胞。这里是data变量

const data = { // All the data of the game
gameSet: "In Game", // For stating who won the game or if it ended in a draw, is to be stated as "In Game" when the game is still in session
nextTurn: true, // What player is playing (true for player 1, while false is for player 2)
filledCells: [ // The script representation of the cells
[false,""], // Cell 1
[false,""], // Cell 2
[false,""], // Cell 3
[false,""], // Cell 4
[false,""], // Cell 5
[false,""], // Cell 6
[false,""], // Cell 7
[false,""], // Cell 8
[false,""], // Cell 9
false // This is only true if all cells are filled
],
pieces: ["X","O"], // The pieces
winCond: [ // The win conditions
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 4, 6],
[2, 5, 8],
[3, 4, 5],
[6, 7, 8]
]
};

这是一个jsfiddle: https://jsfiddle.net/Officer_Erik_1K88/kxv4307L/18/

这个小提琴有完整的代码来玩井字游戏

要复制我的问题，只需将整个棋盘填满，确保您已经设置好，以便最后放置的"X"或"O"将是胜利，尽管它将显示为平局。

当然，您也可以在下面的代码片段中查看问题:

const data = { // All the data of the game
gameSet: "In Game", // For stating who won the game or if it ended in a draw, is to be stated as "In Game" when the game is still in session
nextTurn: true, // What player is playing (true for player 1, while false is for player 2)
filledCells: [ // The script representation of the cells
[false,""], // Cell 1
[false,""], // Cell 2
[false,""], // Cell 3
[false,""], // Cell 4
[false,""], // Cell 5
[false,""], // Cell 6
[false,""], // Cell 7
[false,""], // Cell 8
[false,""], // Cell 9
false // This is only true if all cells are filled
],
pieces: ["X","O"], // The pieces
winCond: [ // The win conditions
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 4, 6],
[2, 5, 8],
[3, 4, 5],
[6, 7, 8]
]
};
var cellItems = document.querySelectorAll('.cell'); // The call for all the cells
function endGame(winnr) { // This function ends the game
if (winnr==data.pieces[0]) { // If winnr equals 'X' then Player 1 wins
data.gameSet = "Player 1 Won";
} else if (winnr==data.pieces[1]) { // If winnr equals 'O' then Player 2 wins
data.gameSet = "Player 2 Won";
} else if (winnr=="XO") { // If winnr equals 'XO' then nether Player wins
data.gameSet = "Draw";
}
console.log("Winner: "+data.gameSet);
}
function checkForWin() { // This is the function that checks for wins/draw
for (let on=0; on<data.pieces.length; on++) {
var onThis = data.pieces[on];
var love = 0;
for (let i=0; i<data.winCond.length; i++) {
var wit = data.winCond[i];
if (data.filledCells[wit[0]][1]==onThis&&data.filledCells[wit[1]][1]==onThis&&data.filledCells[wit[2]][1]==onThis) {
endGame(onThis);
} else {
love=i;
}
}
if (on==(data.pieces.length-1)) {
if (love==(data.winCond.length-1)&&data.filledCells[9]) {
endGame("XO");
}
}
}
}
function turn() { // This checks who's turn it is and will out put the respective piece
if (data.nextTurn) { // if nextTurn is true then player 1 plays
data.nextTurn=false;
return data.pieces[0];
} else {
data.nextTurn=true;
return data.pieces[1];
}
}
function checkCellFill() { // This checks if all cells are filled
for (let i=0; i<9; i++) {
if (data.filledCells[i][0]) {
data.filledCells[9]=true;
} else {
data.filledCells[9]=false;
break;
}
}
}
function curCellClick() { // This function is used to set the cells click function
for (let i=0; i<cellItems.length; i++) {
cellItems[i].onclick = function() {
if (data.filledCells[i][1]==""&&data.gameSet=="In Game") {
var ins = turn();
cellItems[i].innerHTML = ins;
data.filledCells[i][0] = true;
data.filledCells[i][1] = ins;
checkCellFill();
checkForWin();
}
};
}
}
curCellClick();

#board {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: #bfbfbf;
gap: 10px;
padding: 10px;
}
.cell {
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 80px;
background-color: #e8e8e8;
cursor: pointer;
}

<div id="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>

Answer 1

if (data.filledCells[wit[0]][1]==onThis&&data.filledCells[wit[1]][1]==onThis&&data.filledCells[wit[2]][1]==onThis) {
endGame(onThis);
return // you should return from here
} else {
love=i;
}

当endGame()从上面的代码片段中被调用时，你必须从方法中返回，否则它所做的就是继续循环，在循环结束后将调用endGame("XO")。