Tic Tac Toe

Tic Tac Toe

body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .container { text-align: center; } h1 { color: #333; margin-bottom: 20px; } .board { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; margin-bottom: 20px; } .cell { width: 100px; height: 100px; background-color: #ddd; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 2em; cursor: pointer; transition: background-color 0.3s ease; } .cell:hover { background-color: #ccc; } .cell.x::before { content: 'X'; color: #e74c3c; /* Red */ font-size: 2.5em; } .cell.o::before { content: 'O'; color: #3498db; /* Blue */ font-size: 2.5em; } .message { font-size: 1.2em; margin-bottom: 20px; height: 30px; } button { padding: 10px 20px; font-size: 1em; border: none; border-radius: 5px; background-color: #2ecc71; /* Green */ color: white; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #27ae60; } const board = document.getElementById('board'); const cells = document.querySelectorAll('.cell'); const message = document.getElementById('message'); const restartBtn = document.getElementById('restartBtn'); let currentPlayer = 'x'; let gameBoard = ['', '', '', '', '', '', '', '', '']; let gameActive = true; 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(clickedCellEvent) { if (!gameActive) return; const clickedCell = clickedCellEvent.target; const clickedCellIndex = parseInt(clickedCell.dataset.index); if (gameBoard[clickedCellIndex] !== '') return; gameBoard[clickedCellIndex] = currentPlayer; clickedCell.classList.add(currentPlayer); checkWin(); checkDraw(); switchPlayer(); } function switchPlayer() { currentPlayer = currentPlayer === 'x' ? 'o' : 'x'; message.textContent = `Player ${currentPlayer.toUpperCase()}'s turn`; } function checkWin() { for (let i = 0; i <= 7; i++) { const winCondition = winningConditions[i]; const a = gameBoard[winCondition[0]]; const b = gameBoard[winCondition[1]]; const c = gameBoard[winCondition[2]]; if (a === '' || b === '' || c === '') { continue; } if (a === b && b === c) { message.textContent = `Player ${a.toUpperCase()} wins!`; gameActive = false; highlightWin(winCondition); return; } } } function highlightWin(winCondition) { winCondition.forEach(index => { cells[index].style.backgroundColor = '#ffdd59'; // Highlight color }); } function checkDraw() { if (!gameBoard.includes('') && gameActive) { message.textContent = "It's a draw!"; gameActive = false; } } function restartGame() { gameActive = true; currentPlayer = 'x'; gameBoard = ['', '', '', '', '', '', '', '', '']; message.textContent = `Player X's turn`; cells.forEach(cell => { cell.classList.remove('x', 'o'); cell.textContent = ''; cell.style.backgroundColor = '#ddd'; // Reset highlight }); } cells.forEach(cell => cell.addEventListener('click', handleCellClick)); restartBtn.addEventListener('click', restartGame); message.textContent = `Player X's turn`; ```