Scribd
Upload
3 views

script.js

This document contains JavaScript code for a Tic-Tac-Toe game implementation. It includes functions to create the game board, handle player moves, check for winning conditions, and reset or start a new game. The game alternates between two players, 'X' and 'O', and displays the result of the game through a result screen.

Uploaded by

sparshagrawal2698
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

script.js

This document contains JavaScript code for a Tic-Tac-Toe game implementation. It includes functions to create the game board, handle player moves, check for winning conditions, and reset or start a new game. The game alternates between two players, 'X' and 'O', and displays the result of the game through a result screen.

Uploaded by

sparshagrawal2698
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

const board = document.

getElementById("board");
const statusText = document.getElementById("status");
const resetButton = document.getElementById("reset");
const resultScreen = document.getElementById("resultScreen");
const gameScreen = document.getElementById("gameScreen");
const resultMessage = document.getElementById("resultMessage");
const newGameButton = document.getElementById("newGame");

let currentPlayer = "X";


let boardState = ["", "", "", "", "", "", "", "", ""];
let gameActive = true;

// Create the game board


function createBoard() {
board.innerHTML = "";
boardState.forEach((value, index) => {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.dataset.index = index;
cell.innerText = value;
cell.addEventListener("click", handleMove);
board.appendChild(cell);
});
}

// Handle player move


function handleMove(event) {
const index = event.target.dataset.index;
if (boardState[index] === "" && gameActive) {
boardState[index] = currentPlayer;
event.target.innerText = currentPlayer;
event.target.classList.add("taken");

if (checkWin()) {
showResult(`Player ${currentPlayer} Wins! 🎉`);
gameActive = false;
} else if (!boardState.includes("")) {
showResult("It's a Draw! 🤝");
gameActive = false;
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusText.innerText = `Player ${currentPlayer}'s turn`;
}
}
}

// Check for winning conditions


function checkWin() {
const winPatterns = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
[0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
[0, 4, 8], [2, 4, 6] // Diagonals
];

return winPatterns.some(pattern => {


const [a, b, c] = pattern;
return boardState[a] && boardState[a] === boardState[b] && boardState[a]
=== boardState[c];
});
}

// Show result screen


function showResult(message) {
resultMessage.innerText = message;
gameScreen.style.display = "none";
resultScreen.style.display = "block";
}

// Reset the game


function resetGame() {
boardState = ["", "", "", "", "", "", "", "", ""];
currentPlayer = "X";
gameActive = true;
statusText.innerText = "Player X's turn";
createBoard();
}

// New Game
function startNewGame() {
resultScreen.style.display = "none";
gameScreen.style.display = "block";
resetGame();
}

// Event Listeners
resetButton.addEventListener("click", resetGame);
newGameButton.addEventListener("click", startNewGame);

// Initialize game
createBoard();
statusText.innerText = "Player X's turn";

You might also like