Я возился с каким-то ванильным 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
Ванильная JS TicTacToe Win Logic ⇐ Javascript
Форум по Javascript
1736384302
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()[b] &&
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
Подробнее здесь: [url]https://stackoverflow.com/questions/79341111/vanilla-js-tictactoe-win-logic[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия