I’m developing a Tic-Tac-Toe game in JavaScript and facing a few issues:
Switching Players: The currentPlayer isn’t switching correctly after each move. I expect playGame to alternate between player1 and player2.
Updating Game Board State: I have a gameBoard array to track game state, but it’s not updating as expected when a player makes a move.
Game Logic for Winning Conditions: I’m struggling to implement logic for checking winning conditions.
Specific Issues:
Player Switching: How can I ensure currentPlayer switches properly in the playGame function?
Game Board State: How do I correctly update and access the gameBoard array to reflect moves?
Winning Conditions: What’s the best way to structure the logic to check for wins?
Here’s a snippet of my code for context:
// DOM elements
const playerInput1 = document.querySelector("#player-select1");
const playerButton = document.querySelector(".add-player");
const playerInput2 = document.querySelector("#player-select2");
const playerPara1 = document.querySelector(".player1");
const playerPara2 = document.querySelector(".player2");
const showPlayers = document.querySelector(".player-shows");
const boxes = document.querySelectorAll(".box");
// Game state
const gameBoard = [
[null, null, null],
[null, null, null],
[null, null, null]
];
let currentPlayer;
let player1, player2;
// Player factory function
const playerSelection = (name, marker) => {
let score = 0;
return {
name,
marker,
getScore: () => score,
scorePlus: () => ++score
};
};
// Initialize players
player1 = playerSelection("Name", "X");
player2 = playerSelection("Name", "O");
// Event listener for player names
playerButton.addEventListener("click", () => {
player2.name = playerInput2.value.trim();
player1.name = playerInput1.value.trim();
if (!player1.name || !player2.name) {
alert("Please enter a name");
return;
}
playerPara1.textContent = `First Player is: ${player1.name} (${player1.marker})`;
playerPara2.textContent = `Second Player is: ${player2.name} (${player2.marker})`;
showPlayers.innerHTML = "";
showPlayers.append(playerPara1);
showPlayers.append(playerPara2);
playGame();
});
// Box event listeners
boxes.forEach(box => {
box.addEventListener("click", () => {
if (!box.textContent && currentPlayer) {
box.textContent = currentPlayer.marker;
box.style.color = "white";
box.style.textAlign = "center";
box.style.fontSize = "55px";
box.style.cursor = "pointer";
playGame();
}
});
});
// Switch current player
const playGame = () => {
currentPlayer = currentPlayer === player1 ? player2 : player1;
// Check game board state (this part is problematic)
if (gameBoard[0][0] === currentPlayer.marker) {
console.log("Testing if it works");
}
};
return {
playerSelection,
playGame
};
})();