Ванильная JS TicTacToe Win LogicJavascript

Форум по Javascript
Ответить
Anonymous
 Ванильная JS TicTacToe Win Logic

Сообщение Anonymous »

Я возился с каким-то ванильным 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»