Я возился с каким-то ванильным JS, слишком привык к фреймворкам, и создавал простую игру в крестики-нолики, и я застрял на определенной части логики выигрыша и логики переключения игроков. Вот код (надеюсь, он не слишком длинный):
const GameBoard = (() => {
const board = Array(9).fill("");
const getBoard = () => board;
const resetBoard = () => board.fill("");
const setBoard = (symbol, index) =>
board.forEach(() => (board[index] === "" ? (board[index] = symbol) : ""));
const checkForWinner = () => {
const winningCombinations = [
[0, 1, 2], // Top row
[3, 4, 5], // Middle row
[6, 7, 8], // Bottom row
[0, 3, 6], // Left column
[1, 4, 7], // Middle column
[2, 5, 8], // Right column
[0, 4, 8], // Diagonal from top-left to bottom-right
[2, 4, 6], // Diagonal from top-right to bottom-left
];
for (const combo of winningCombinations) {
const [a, b, c] = combo;
if (
getBoard()[a] &&
getBoard()[a] === getBoard() &&
getBoard()[a] === getBoard()[c]
) {
return true;
}
}
return false;
};
return { checkForWinner, getBoard, resetBoard, setBoard };
})();
const players = () => {
const activePlayers = [
{
name: "Player 1 (X)",
symbol: "X",
active: true,
},
{
name: "Player 2 (O)",
symbol: "O",
active: false,
},
];
const getActivePlayer = () => activePlayers.find((player) => player.active);
const switchPlayers = () =>
activePlayers.forEach((player) => (player.active = !player.active));
return { getActivePlayer, switchPlayers };
};
(() => {
const gameBoardContainer = document.querySelector("#game-board");
const { checkForWinner, getBoard, setBoard } = GameBoard;
const { getActivePlayer, switchPlayers } = players();
let button;
for (let i = 0; i < getBoard().length; i++) {
button = document.createElement("button");
gameBoardContainer.appendChild(button);
}
document.querySelectorAll("button").forEach((button, index) => {
button.addEventListener("click", () => {
if (getBoard()[index] === "" && !checkForWinner()) {
setBoard(getActivePlayer().symbol, index);
button.textContent = getActivePlayer().symbol;
switchPlayers();
}
if (checkForWinner()) {
console.log(`${getActivePlayer().name} has won!`);
return;
}
});
});
})();
Моя проблема связана именно с addEventListener элементов button. Логика проверки победителя, кажется, работает, но по какой-то причине, когда я пишу console.logс указанием победителя активного игрока, на самом деле он регистрирует победу не того пользователя. Если у меня есть все X, то он регистрирует, что O является победителем, и наоборот. Я предполагаю, что это как-то связано с функциональностью switchPlayers, но не знаю точно, где она дает сбой и почему.
Кто-нибудь выскажет какие-нибудь мысли? Спасибо...!
РЕДАКТИРОВАТЬ: И для справки, вот соответствующий HTML:
Tic Tac Toe
Подробнее здесь: https://stackoverflow.com/questions/793 ... -win-logic
