Scribd
Upload
2 views

script.js

This JavaScript code implements a Tic-Tac-Toe game where two players take turns marking cells in a 3x3 grid. It includes functionalities to check for a winner, highlight winning cells, and restart the game. The game state is managed through an array, and the current player's turn is displayed dynamically.

Uploaded by

c.abdullahzahid
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

script.js

This JavaScript code implements a Tic-Tac-Toe game where two players take turns marking cells in a 3x3 grid. It includes functionalities to check for a winner, highlight winning cells, and restart the game. The game state is managed through an array, and the current player's turn is displayed dynamically.

Uploaded by

c.abdullahzahid
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

// script.

js
document.addEventListener("DOMContentLoaded", () => {
const cells = document.querySelectorAll(".cell");
const statusDisplay = document.getElementById("status");
const restartButton = document.getElementById("restart");

let currentPlayer = "X";


let gameState = ["", "", "", "", "", "", "", "", ""];
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];

function handleCellClick(event) {
const cell = event.target;
const cellIndex = cell.getAttribute("data-index");

// If cell is already taken or the game is over, return


if (gameState[cellIndex] !== "" || checkWinner()) return;

// Update the cell and game state


gameState[cellIndex] = currentPlayer;
cell.textContent = currentPlayer;
cell.classList.add("taken");

// Check for winner or tie


if (checkWinner()) {
statusDisplay.textContent = `Player ${currentPlayer} Wins!`;
highlightWinningCells();
return;
} else if (gameState.every(cell => cell !== "")) {
statusDisplay.textContent = "It's a Tie!";
return;
}

// Switch player
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusDisplay.textContent = `Player ${currentPlayer}'s Turn`;
}

function checkWinner() {
for (const condition of winningConditions) {
const [a, b, c] = condition;
if (
gameState[a] &&
gameState[a] === gameState[b] &&
gameState[a] === gameState[c]
) {
return condition;
}
}
return null;
}
function highlightWinningCells() {
const winnerCells = checkWinner();
if (winnerCells) {
winnerCells.forEach(index => {
cells[index].style.backgroundColor = "#90ee90";
});
}
}

function restartGame() {
currentPlayer = "X";
gameState = ["", "", "", "", "", "", "", "", ""];
statusDisplay.textContent = `Player ${currentPlayer}'s Turn`;

cells.forEach(cell => {
cell.textContent = "";
cell.style.backgroundColor = "#fff";
cell.classList.remove("taken");
});
}

// Event listeners
cells.forEach(cell => cell.addEventListener("click", handleCellClick));
restartButton.addEventListener("click", restartGame);

// Initialize the status display


statusDisplay.textContent = `Player ${currentPlayer}'s Turn`;
});

You might also like