Advanced Tic Tac Toe Game<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: white;\r\n padding: 1rem;\r\n }\r\n\r\n .container {\r\n text-align: center;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 2rem;\r\n border-radius: 20px;\r\n backdrop-filter: blur(10px);\r\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\r\n max-width: 500px;\r\n width: 100%;\r\n }\r\n\r\n h1 {\r\n margin-bottom: 1.5rem;\r\n font-size: 2.5rem;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .setup-section {\r\n margin-bottom: 2rem;\r\n background: rgba(255, 255, 255, 0.05);\r\n padding: 1.5rem;\r\n border-radius: 15px;\r\n }\r\n\r\n .setup-title {\r\n font-size: 1.3rem;\r\n margin-bottom: 1rem;\r\n color: #ffd700;\r\n text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\r\n }\r\n\r\n .mode-section, .player-choice-section {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .section-label {\r\n font-size: 1.1rem;\r\n margin-bottom: 0.8rem;\r\n opacity: 0.9;\r\n }\r\n\r\n .option-buttons {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .option-btn {\r\n padding: 0.8rem 1.5rem;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 10px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1rem;\r\n min-width: 120px;\r\n }\r\n\r\n .option-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .option-btn.active {\r\n background: rgba(255, 255, 255, 0.4);\r\n border-color: rgba(255, 255, 255, 0.6);\r\n box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .start-btn {\r\n padding: 1rem 2rem;\r\n background: linear-gradient(45deg, #ff6b6b, #ee5a52);\r\n border: none;\r\n border-radius: 25px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n margin-top: 1rem;\r\n box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);\r\n }\r\n\r\n .start-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);\r\n }\r\n\r\n .game-section {\r\n display: none;\r\n }\r\n\r\n .game-section.active {\r\n display: block;\r\n }\r\n\r\n .game-info {\r\n margin-bottom: 1.5rem;\r\n font-size: 1.2rem;\r\n min-height: 30px;\r\n padding: 0.5rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 10px;\r\n }\r\n\r\n .current-turn {\r\n font-size: 1rem;\r\n opacity: 0.8;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .game-board {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 10px;\r\n max-width: 300px;\r\n margin: 0 auto 2rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 15px;\r\n border-radius: 15px;\r\n }\r\n\r\n .cell {\r\n width: 80px;\r\n height: 80px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .cell:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: scale(1.05);\r\n }\r\n\r\n .cell:disabled {\r\n cursor: not-allowed;\r\n opacity: 0.7;\r\n }\r\n\r\n .cell.x {\r\n color: #ff6b6b;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .cell.o {\r\n color: #4ecdc4;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .controls {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .btn {\r\n padding: 0.8rem 1.5rem;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 10px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1rem;\r\n }\r\n\r\n .btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn.new-game {\r\n background: linear-gradient(45deg, #4ecdc4, #44a08d);\r\n }\r\n\r\n .score-board {\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 1.5rem;\r\n border-radius: 15px;\r\n }\r\n\r\n .score-title {\r\n font-size: 1.2rem;\r\n margin-bottom: 1rem;\r\n color: #ffd700;\r\n }\r\n\r\n .scores {\r\n display: flex;\r\n justify-content: space-around;\r\n }\r\n\r\n .score-item {\r\n text-align: center;\r\n }\r\n\r\n .score-label {\r\n font-size: 0.9rem;\r\n opacity: 0.8;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .score-value {\r\n font-size: 1.8rem;\r\n font-weight: bold;\r\n }\r\n\r\n .difficulty-section {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .difficulty-btn {\r\n padding: 0.6rem 1.2rem;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .winner-animation {\r\n animation: celebrate 0.5s ease-in-out;\r\n }\r\n\r\n @keyframes celebrate {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n .winning-line {\r\n background: rgba(255, 215, 0, 0.3);\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n padding: 1rem;\r\n margin: 0.5rem;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem;\r\n }\r\n \r\n .cell {\r\n width: 70px;\r\n height: 70px;\r\n font-size: 1.8rem;\r\n }\r\n \r\n .option-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .option-btn {\r\n min-width: 200px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1>🎮 Advanced Tic Tac Toe<\/h1>\r\n \r\n \r\n <div class=\"setup-section\" id=\"setupSection\">\r\n <div class=\"setup-title\">🚀 Game Setup<\/div>\r\n \r\n \r\n <div class=\"mode-section\">\r\n <div class=\"section-label\">Choose Game Mode:<\/div>\r\n <div class=\"option-buttons\">\r\n <button class=\"option-btn active\" onclick=\"setGameMode('computer')\">🤖 vs Computer<\/button>\r\n <button class=\"option-btn\" onclick=\"setGameMode('player')\">👥 2 Players<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"difficulty-section\" id=\"difficultySection\">\r\n <div class=\"section-label\">Choose Difficulty:<\/div>\r\n <div class=\"option-buttons\">\r\n <button class=\"difficulty-btn option-btn\" onclick=\"setDifficulty('easy')\">😊 Easy<\/button>\r\n <button class=\"difficulty-btn option-btn active\" onclick=\"setDifficulty('medium')\">🤔 Medium<\/button>\r\n <button class=\"difficulty-btn option-btn\" onclick=\"setDifficulty('hard')\">😤 Hard<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"player-choice-section\">\r\n <div class=\"section-label\">Choose Your Symbol:<\/div>\r\n <div class=\"option-buttons\">\r\n <button class=\"option-btn active\" onclick=\"setPlayerChoice('X')\">❌ Play as X<\/button>\r\n <button class=\"option-btn\" onclick=\"setPlayerChoice('O')\">⭕ Play as O<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"start-btn\" onclick=\"startGame()\">🎯 Start Game<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"game-section\" id=\"gameSection\">\r\n <div class=\"game-info\">\r\n <div class=\"current-turn\" id=\"currentTurn\">Game Starting...<\/div>\r\n <div id=\"gameStatus\">Choose your move!<\/div>\r\n <\/div>\r\n\r\n <div class=\"game-board\" id=\"gameBoard\">\r\n <button class=\"cell\" onclick=\"makeMove(0)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(1)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(2)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(3)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(4)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(5)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(6)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(7)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(8)\"><\/button>\r\n <\/div>\r\n\r\n <div class=\"controls\">\r\n <button class=\"btn\" onclick=\"resetGame()\">🔄 Reset Round<\/button>\r\n <button class=\"btn new-game\" onclick=\"newGame()\">🆕 New Game<\/button>\r\n <button class=\"btn\" onclick=\"resetScore()\">📊 Reset Score<\/button>\r\n <\/div>\r\n\r\n <div class=\"score-board\">\r\n <div class=\"score-title\">🏆 Score Board<\/div>\r\n <div class=\"scores\">\r\n <div class=\"score-item\">\r\n <div class=\"score-label\" id=\"player1Label\">Player 1<\/div>\r\n <div class=\"score-value\" id=\"score1\">0<\/div>\r\n <\/div>\r\n <div class=\"score-item\">\r\n <div class=\"score-label\">Draws<\/div>\r\n <div class=\"score-value\" id=\"scoreDraw\">0<\/div>\r\n <\/div>\r\n <div class=\"score-item\">\r\n <div class=\"score-label\" id=\"player2Label\">Computer<\/div>\r\n <div class=\"score-value\" id=\"score2\">0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Game state variables\r\n let board = ['', '', '', '', '', '', '', '', ''];\r\n let currentPlayer = 'X';\r\n let gameMode = 'computer'; \/\/ 'computer' or 'player'\r\n let playerChoice = 'X'; \/\/ Player's chosen symbol\r\n let computerChoice = 'O'; \/\/ Computer's symbol\r\n let difficulty = 'medium'; \/\/ 'easy', 'medium', 'hard'\r\n let gameActive = false;\r\n let firstPlayer = 'X'; \/\/ Who goes first\r\n let scores = {\r\n player1: 0,\r\n player2: 0,\r\n draw: 0\r\n };\r\n\r\n \/\/ Winning combinations\r\n const winningConditions = [\r\n [0, 1, 2], [3, 4, 5], [6, 7, 8], \/\/ Rows\r\n [0, 3, 6], [1, 4, 7], [2, 5, 8], \/\/ Columns\r\n [0, 4, 8], [2, 4, 6] \/\/ Diagonals\r\n ];\r\n\r\n \/\/ Set game mode\r\n function setGameMode(mode) {\r\n gameMode = mode;\r\n \r\n \/\/ Update button styles\r\n document.querySelectorAll('.mode-section .option-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.target.classList.add('active');\r\n \r\n \/\/ Show\/hide difficulty section\r\n const difficultySection = document.getElementById('difficultySection');\r\n if (mode === 'computer') {\r\n difficultySection.style.display = 'block';\r\n } else {\r\n difficultySection.style.display = 'none';\r\n }\r\n }\r\n\r\n \/\/ Set difficulty\r\n function setDifficulty(level) {\r\n difficulty = level;\r\n \r\n \/\/ Update button styles\r\n document.querySelectorAll('.difficulty-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.target.classList.add('active');\r\n }\r\n\r\n \/\/ Set player choice\r\n function setPlayerChoice(choice) {\r\n playerChoice = choice;\r\n computerChoice = choice === 'X' ? 'O' : 'X';\r\n \r\n \/\/ Update button styles\r\n document.querySelectorAll('.player-choice-section .option-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.target.classList.add('active');\r\n }\r\n\r\n \/\/ Start the game\r\n function startGame() {\r\n \/\/ Hide setup section, show game section\r\n document.getElementById('setupSection').style.display = 'none';\r\n document.getElementById('gameSection').classList.add('active');\r\n \r\n \/\/ Initialize game\r\n gameActive = true;\r\n currentPlayer = 'X';\r\n firstPlayer = 'X';\r\n \r\n \/\/ Update labels based on game mode\r\n updateLabels();\r\n \r\n \/\/ Reset board\r\n resetBoard();\r\n \r\n \/\/ Update display\r\n updateDisplay();\r\n \r\n \/\/ If computer goes first and player chose O\r\n if (gameMode === 'computer' && playerChoice === 'O') {\r\n computerMove();\r\n }\r\n }\r\n\r\n \/\/ Update labels based on game mode and player choice\r\n function updateLabels() {\r\n const player1Label = document.getElementById('player1Label');\r\n const player2Label = document.getElementById('player2Label');\r\n \r\n if (gameMode === 'computer') {\r\n if (playerChoice === 'X') {\r\n player1Label.textContent = 'You (X)';\r\n player2Label.textContent = 'Computer (O)';\r\n } else {\r\n player1Label.textContent = 'Computer (X)';\r\n player2Label.textContent = 'You (O)';\r\n }\r\n } else {\r\n player1Label.textContent = 'Player X';\r\n player2Label.textContent = 'Player O';\r\n }\r\n }\r\n\r\n \/\/ Make a move\r\n function makeMove(cellIndex) {\r\n if (board[cellIndex] !== '' || !gameActive) {\r\n return;\r\n }\r\n\r\n \/\/ Check if it's player's turn in computer mode\r\n if (gameMode === 'computer' && currentPlayer !== playerChoice) {\r\n return;\r\n }\r\n\r\n \/\/ Make the move\r\n board[cellIndex] = currentPlayer;\r\n updateCell(cellIndex, currentPlayer);\r\n\r\n \/\/ Check for game end\r\n const winner = checkWinner();\r\n if (winner) {\r\n handleWin(winner);\r\n return;\r\n }\r\n\r\n if (board.every(cell => cell !== '')) {\r\n handleDraw();\r\n return;\r\n }\r\n\r\n \/\/ Switch players\r\n currentPlayer = currentPlayer === 'X' ? 'O' : 'X';\r\n updateDisplay();\r\n\r\n \/\/ Computer move if in computer mode\r\n if (gameMode === 'computer' && currentPlayer === computerChoice && gameActive) {\r\n computerMove();\r\n }\r\n }\r\n\r\n \/\/ Computer AI move based on difficulty\r\n function computerMove() {\r\n if (!gameActive) return;\r\n\r\n let bestMove = -1;\r\n\r\n switch (difficulty) {\r\n case 'easy':\r\n bestMove = getRandomMove();\r\n break;\r\n case 'medium':\r\n bestMove = Math.random() < 0.7 ? getBestMove() : getRandomMove();\r\n break;\r\n case 'hard':\r\n bestMove = getBestMove();\r\n break;\r\n }\r\n\r\n if (bestMove !== -1) {\r\n board[bestMove] = computerChoice;\r\n updateCell(bestMove, computerChoice);\r\n\r\n \/\/ Check for game end\r\n const winner = checkWinner();\r\n if (winner) {\r\n handleWin(winner);\r\n return;\r\n }\r\n\r\n if (board.every(cell => cell !== '')) {\r\n handleDraw();\r\n return;\r\n }\r\n\r\n \/\/ Switch back to player\r\n currentPlayer = playerChoice;\r\n updateDisplay();\r\n }\r\n }\r\n\r\n \/\/ Get random available move\r\n function getRandomMove() {\r\n const availableCells = board.map((cell, index) => cell === '' ? index : null).filter(cell => cell !== null);\r\n if (availableCells.length > 0) {\r\n return availableCells[Math.floor(Math.random() * availableCells.length)];\r\n }\r\n return -1;\r\n }\r\n\r\n \/\/ Get best strategic move\r\n function getBestMove() {\r\n \/\/ Try to win\r\n for (let i = 0; i < 9; i++) {\r\n if (board[i] === '') {\r\n board[i] = computerChoice;\r\n if (checkWinner() === computerChoice) {\r\n board[i] = '';\r\n return i;\r\n }\r\n board[i] = '';\r\n }\r\n }\r\n\r\n \/\/ Try to block player from winning\r\n for (let i = 0; i < 9; i++) {\r\n if (board[i] === '') {\r\n board[i] = playerChoice;\r\n if (checkWinner() === playerChoice) {\r\n board[i] = '';\r\n return i;\r\n }\r\n board[i] = '';\r\n }\r\n }\r\n\r\n \/\/ Take center if available\r\n if (board[4] === '') {\r\n return 4;\r\n }\r\n\r\n \/\/ Take corners\r\n const corners = [0, 2, 6, 8];\r\n const availableCorners = corners.filter(corner => board[corner] === '');\r\n if (availableCorners.length > 0) {\r\n return availableCorners[Math.floor(Math.random() * availableCorners.length)];\r\n }\r\n\r\n \/\/ Take any available cell\r\n return getRandomMove();\r\n }\r\n\r\n \/\/ Check for winner\r\n function checkWinner() {\r\n for (let condition of winningConditions) {\r\n const [a, b, c] = condition;\r\n if (board[a] && board[a] === board[b] && board[a] === board[c]) {\r\n \/\/ Highlight winning cells\r\n highlightWinningCells(condition);\r\n return board[a];\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ Highlight winning cells\r\n function highlightWinningCells(winningCells) {\r\n winningCells.forEach(index => {\r\n document.querySelectorAll('.cell')[index].classList.add('winning-line');\r\n });\r\n }\r\n\r\n \/\/ Handle win\r\n function handleWin(winner) {\r\n gameActive = false;\r\n \r\n let winnerText = '';\r\n if (gameMode === 'computer') {\r\n if (winner === playerChoice) {\r\n winnerText = 'You Win!';\r\n scores.player1++;\r\n } else {\r\n winnerText = 'Computer Wins!';\r\n scores.player2++;\r\n }\r\n } else {\r\n winnerText = `Player ${winner} Wins!`;\r\n if (winner === 'X') {\r\n scores.player1++;\r\n } else {\r\n scores.player2++;\r\n }\r\n }\r\n \r\n document.getElementById('gameStatus').textContent = winnerText;\r\n document.getElementById('currentTurn').textContent = 'Game Over';\r\n \r\n \/\/ Add celebration animation\r\n document.querySelector('.game-info').classList.add('winner-animation');\r\n setTimeout(() => {\r\n document.querySelector('.game-info').classList.remove('winner-animation');\r\n }, 500);\r\n \r\n updateScoreDisplay();\r\n \r\n \/\/ Disable all cells\r\n document.querySelectorAll('.cell').forEach(cell => {\r\n cell.disabled = true;\r\n });\r\n }\r\n\r\n \/\/ Handle draw\r\n function handleDraw() {\r\n gameActive = false;\r\n scores.draw++;\r\n document.getElementById('gameStatus').textContent = \"It's a Draw!\";\r\n document.getElementById('currentTurn').textContent = 'Game Over';\r\n updateScoreDisplay();\r\n }\r\n\r\n \/\/ Update cell display\r\n function updateCell(cellIndex, player) {\r\n const cell = document.querySelectorAll('.cell')[cellIndex];\r\n cell.textContent = player;\r\n cell.classList.add(player.toLowerCase());\r\n cell.disabled = true;\r\n }\r\n\r\n \/\/ Update game display\r\n function updateDisplay() {\r\n if (!gameActive) return;\r\n\r\n const currentTurn = document.getElementById('currentTurn');\r\n const gameStatus = document.getElementById('gameStatus');\r\n \r\n if (gameMode === 'computer') {\r\n if (currentPlayer === playerChoice) {\r\n currentTurn.textContent = `Your turn (${playerChoice})`;\r\n gameStatus.textContent = 'Choose your move!';\r\n } else {\r\n currentTurn.textContent = `Computer's turn (${computerChoice})`;\r\n gameStatus.textContent = 'Computer will move instantly!';\r\n }\r\n } else {\r\n currentTurn.textContent = `Player ${currentPlayer}'s turn`;\r\n gameStatus.textContent = 'Make your move!';\r\n }\r\n }\r\n\r\n \/\/ Reset current game round\r\n function resetGame() {\r\n resetBoard();\r\n gameActive = true;\r\n currentPlayer = firstPlayer;\r\n \r\n \/\/ Remove winning highlights\r\n document.querySelectorAll('.cell').forEach(cell => {\r\n cell.classList.remove('winning-line');\r\n });\r\n \r\n updateDisplay();\r\n \r\n \/\/ If computer goes first\r\n if (gameMode === 'computer' && currentPlayer === computerChoice) {\r\n computerMove();\r\n }\r\n }\r\n\r\n \/\/ Reset board\r\n function resetBoard() {\r\n board = ['', '', '', '', '', '', '', '', ''];\r\n \r\n \/\/ Reset cells\r\n document.querySelectorAll('.cell').forEach(cell => {\r\n cell.textContent = '';\r\n cell.disabled = false;\r\n cell.classList.remove('x', 'o', 'winning-line');\r\n });\r\n }\r\n\r\n \/\/ Start new game (return to setup)\r\n function newGame() {\r\n document.getElementById('setupSection').style.display = 'block';\r\n document.getElementById('gameSection').classList.remove('active');\r\n \r\n \/\/ Reset game state\r\n gameActive = false;\r\n resetBoard();\r\n }\r\n\r\n \/\/ Reset score\r\n function resetScore() {\r\n scores = { player1: 0, player2: 0, draw: 0 };\r\n updateScoreDisplay();\r\n }\r\n\r\n \/\/ Update score display\r\n function updateScoreDisplay() {\r\n document.getElementById('score1').textContent = scores.player1;\r\n document.getElementById('score2').textContent = scores.player2;\r\n document.getElementById('scoreDraw').textContent = scores.draw;\r\n }\r\n\r\n \/\/ Initialize the game when page loads\r\n function initGame() {\r\n updateScoreDisplay();\r\n \r\n \/\/ Set default difficulty section visibility\r\n const difficultySection = document.getElementById('difficultySection');\r\n if (gameMode === 'computer') {\r\n difficultySection.style.display = 'block';\r\n } else {\r\n difficultySection.style.display = 'none';\r\n }\r\n }\r\n\r\n \/\/ Initialize\r\n initGame();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Advanced Tic Tac Toe Game 🎮 Advanced Tic Tac Toe 🚀 Game Setup Choose Game Mode: 🤖 vs Computer 👥 2 Players Choose Difficulty: 😊 Easy 🤔 Medium 😤 Hard Choose Your Symbol: ❌ Play as X ⭕ Play as O 🎯 Start Game Game Starting… Choose your move! 🔄 Reset Round 🆕 New Game …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/gadgetsguruji.in\/index.php\/tic-tac-toe-game\/\"> <span class=\"screen-reader-text\">Tic Tac Toe Game<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","_joinchat":[]},"_links":{"self":[{"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/pages\/92091"}],"collection":[{"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/comments?post=92091"}],"version-history":[{"count":13,"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/pages\/92091\/revisions"}],"predecessor-version":[{"id":92110,"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/pages\/92091\/revisions\/92110"}],"wp:attachment":[{"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/media?parent=92091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Advanced Tic Tac Toe Game<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: white;\r\n padding: 1rem;\r\n }\r\n\r\n .container {\r\n text-align: center;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 2rem;\r\n border-radius: 20px;\r\n backdrop-filter: blur(10px);\r\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\r\n max-width: 500px;\r\n width: 100%;\r\n }\r\n\r\n h1 {\r\n margin-bottom: 1.5rem;\r\n font-size: 2.5rem;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .setup-section {\r\n margin-bottom: 2rem;\r\n background: rgba(255, 255, 255, 0.05);\r\n padding: 1.5rem;\r\n border-radius: 15px;\r\n }\r\n\r\n .setup-title {\r\n font-size: 1.3rem;\r\n margin-bottom: 1rem;\r\n color: #ffd700;\r\n text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\r\n }\r\n\r\n .mode-section, .player-choice-section {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .section-label {\r\n font-size: 1.1rem;\r\n margin-bottom: 0.8rem;\r\n opacity: 0.9;\r\n }\r\n\r\n .option-buttons {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .option-btn {\r\n padding: 0.8rem 1.5rem;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 10px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1rem;\r\n min-width: 120px;\r\n }\r\n\r\n .option-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .option-btn.active {\r\n background: rgba(255, 255, 255, 0.4);\r\n border-color: rgba(255, 255, 255, 0.6);\r\n box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .start-btn {\r\n padding: 1rem 2rem;\r\n background: linear-gradient(45deg, #ff6b6b, #ee5a52);\r\n border: none;\r\n border-radius: 25px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n margin-top: 1rem;\r\n box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);\r\n }\r\n\r\n .start-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);\r\n }\r\n\r\n .game-section {\r\n display: none;\r\n }\r\n\r\n .game-section.active {\r\n display: block;\r\n }\r\n\r\n .game-info {\r\n margin-bottom: 1.5rem;\r\n font-size: 1.2rem;\r\n min-height: 30px;\r\n padding: 0.5rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 10px;\r\n }\r\n\r\n .current-turn {\r\n font-size: 1rem;\r\n opacity: 0.8;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .game-board {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 10px;\r\n max-width: 300px;\r\n margin: 0 auto 2rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 15px;\r\n border-radius: 15px;\r\n }\r\n\r\n .cell {\r\n width: 80px;\r\n height: 80px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .cell:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: scale(1.05);\r\n }\r\n\r\n .cell:disabled {\r\n cursor: not-allowed;\r\n opacity: 0.7;\r\n }\r\n\r\n .cell.x {\r\n color: #ff6b6b;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .cell.o {\r\n color: #4ecdc4;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .controls {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .btn {\r\n padding: 0.8rem 1.5rem;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 10px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1rem;\r\n }\r\n\r\n .btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn.new-game {\r\n background: linear-gradient(45deg, #4ecdc4, #44a08d);\r\n }\r\n\r\n .score-board {\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 1.5rem;\r\n border-radius: 15px;\r\n }\r\n\r\n .score-title {\r\n font-size: 1.2rem;\r\n margin-bottom: 1rem;\r\n color: #ffd700;\r\n }\r\n\r\n .scores {\r\n display: flex;\r\n justify-content: space-around;\r\n }\r\n\r\n .score-item {\r\n text-align: center;\r\n }\r\n\r\n .score-label {\r\n font-size: 0.9rem;\r\n opacity: 0.8;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .score-value {\r\n font-size: 1.8rem;\r\n font-weight: bold;\r\n }\r\n\r\n .difficulty-section {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .difficulty-btn {\r\n padding: 0.6rem 1.2rem;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .winner-animation {\r\n animation: celebrate 0.5s ease-in-out;\r\n }\r\n\r\n @keyframes celebrate {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n .winning-line {\r\n background: rgba(255, 215, 0, 0.3);\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n padding: 1rem;\r\n margin: 0.5rem;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem;\r\n }\r\n \r\n .cell {\r\n width: 70px;\r\n height: 70px;\r\n font-size: 1.8rem;\r\n }\r\n \r\n .option-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .option-btn {\r\n min-width: 200px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1>🎮 Advanced Tic Tac Toe<\/h1>\r\n \r\n \r\n <div class=\"setup-section\" id=\"setupSection\">\r\n <div class=\"setup-title\">🚀 Game Setup<\/div>\r\n \r\n \r\n <div class=\"mode-section\">\r\n <div class=\"section-label\">Choose Game Mode:<\/div>\r\n <div class=\"option-buttons\">\r\n <button class=\"option-btn active\" onclick=\"setGameMode('computer')\">🤖 vs Computer<\/button>\r\n <button class=\"option-btn\" onclick=\"setGameMode('player')\">👥 2 Players<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"difficulty-section\" id=\"difficultySection\">\r\n <div class=\"section-label\">Choose Difficulty:<\/div>\r\n <div class=\"option-buttons\">\r\n <button class=\"difficulty-btn option-btn\" onclick=\"setDifficulty('easy')\">😊 Easy<\/button>\r\n <button class=\"difficulty-btn option-btn active\" onclick=\"setDifficulty('medium')\">🤔 Medium<\/button>\r\n <button class=\"difficulty-btn option-btn\" onclick=\"setDifficulty('hard')\">😤 Hard<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"player-choice-section\">\r\n <div class=\"section-label\">Choose Your Symbol:<\/div>\r\n <div class=\"option-buttons\">\r\n <button class=\"option-btn active\" onclick=\"setPlayerChoice('X')\">❌ Play as X<\/button>\r\n <button class=\"option-btn\" onclick=\"setPlayerChoice('O')\">⭕ Play as O<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"start-btn\" onclick=\"startGame()\">🎯 Start Game<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"game-section\" id=\"gameSection\">\r\n <div class=\"game-info\">\r\n <div class=\"current-turn\" id=\"currentTurn\">Game Starting...<\/div>\r\n <div id=\"gameStatus\">Choose your move!<\/div>\r\n <\/div>\r\n\r\n <div class=\"game-board\" id=\"gameBoard\">\r\n <button class=\"cell\" onclick=\"makeMove(0)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(1)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(2)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(3)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(4)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(5)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(6)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(7)\"><\/button>\r\n <button class=\"cell\" onclick=\"makeMove(8)\"><\/button>\r\n <\/div>\r\n\r\n <div class=\"controls\">\r\n <button class=\"btn\" onclick=\"resetGame()\">🔄 Reset Round<\/button>\r\n <button class=\"btn new-game\" onclick=\"newGame()\">🆕 New Game<\/button>\r\n <button class=\"btn\" onclick=\"resetScore()\">📊 Reset Score<\/button>\r\n <\/div>\r\n\r\n <div class=\"score-board\">\r\n <div class=\"score-title\">🏆 Score Board<\/div>\r\n <div class=\"scores\">\r\n <div class=\"score-item\">\r\n <div class=\"score-label\" id=\"player1Label\">Player 1<\/div>\r\n <div class=\"score-value\" id=\"score1\">0<\/div>\r\n <\/div>\r\n <div class=\"score-item\">\r\n <div class=\"score-label\">Draws<\/div>\r\n <div class=\"score-value\" id=\"scoreDraw\">0<\/div>\r\n <\/div>\r\n <div class=\"score-item\">\r\n <div class=\"score-label\" id=\"player2Label\">Computer<\/div>\r\n <div class=\"score-value\" id=\"score2\">0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Game state variables\r\n let board = ['', '', '', '', '', '', '', '', ''];\r\n let currentPlayer = 'X';\r\n let gameMode = 'computer'; \/\/ 'computer' or 'player'\r\n let playerChoice = 'X'; \/\/ Player's chosen symbol\r\n let computerChoice = 'O'; \/\/ Computer's symbol\r\n let difficulty = 'medium'; \/\/ 'easy', 'medium', 'hard'\r\n let gameActive = false;\r\n let firstPlayer = 'X'; \/\/ Who goes first\r\n let scores = {\r\n player1: 0,\r\n player2: 0,\r\n draw: 0\r\n };\r\n\r\n \/\/ Winning combinations\r\n const winningConditions = [\r\n [0, 1, 2], [3, 4, 5], [6, 7, 8], \/\/ Rows\r\n [0, 3, 6], [1, 4, 7], [2, 5, 8], \/\/ Columns\r\n [0, 4, 8], [2, 4, 6] \/\/ Diagonals\r\n ];\r\n\r\n \/\/ Set game mode\r\n function setGameMode(mode) {\r\n gameMode = mode;\r\n \r\n \/\/ Update button styles\r\n document.querySelectorAll('.mode-section .option-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.target.classList.add('active');\r\n \r\n \/\/ Show\/hide difficulty section\r\n const difficultySection = document.getElementById('difficultySection');\r\n if (mode === 'computer') {\r\n difficultySection.style.display = 'block';\r\n } else {\r\n difficultySection.style.display = 'none';\r\n }\r\n }\r\n\r\n \/\/ Set difficulty\r\n function setDifficulty(level) {\r\n difficulty = level;\r\n \r\n \/\/ Update button styles\r\n document.querySelectorAll('.difficulty-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.target.classList.add('active');\r\n }\r\n\r\n \/\/ Set player choice\r\n function setPlayerChoice(choice) {\r\n playerChoice = choice;\r\n computerChoice = choice === 'X' ? 'O' : 'X';\r\n \r\n \/\/ Update button styles\r\n document.querySelectorAll('.player-choice-section .option-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.target.classList.add('active');\r\n }\r\n\r\n \/\/ Start the game\r\n function startGame() {\r\n \/\/ Hide setup section, show game section\r\n document.getElementById('setupSection').style.display = 'none';\r\n document.getElementById('gameSection').classList.add('active');\r\n \r\n \/\/ Initialize game\r\n gameActive = true;\r\n currentPlayer = 'X';\r\n firstPlayer = 'X';\r\n \r\n \/\/ Update labels based on game mode\r\n updateLabels();\r\n \r\n \/\/ Reset board\r\n resetBoard();\r\n \r\n \/\/ Update display\r\n updateDisplay();\r\n \r\n \/\/ If computer goes first and player chose O\r\n if (gameMode === 'computer' && playerChoice === 'O') {\r\n computerMove();\r\n }\r\n }\r\n\r\n \/\/ Update labels based on game mode and player choice\r\n function updateLabels() {\r\n const player1Label = document.getElementById('player1Label');\r\n const player2Label = document.getElementById('player2Label');\r\n \r\n if (gameMode === 'computer') {\r\n if (playerChoice === 'X') {\r\n player1Label.textContent = 'You (X)';\r\n player2Label.textContent = 'Computer (O)';\r\n } else {\r\n player1Label.textContent = 'Computer (X)';\r\n player2Label.textContent = 'You (O)';\r\n }\r\n } else {\r\n player1Label.textContent = 'Player X';\r\n player2Label.textContent = 'Player O';\r\n }\r\n }\r\n\r\n \/\/ Make a move\r\n function makeMove(cellIndex) {\r\n if (board[cellIndex] !== '' || !gameActive) {\r\n return;\r\n }\r\n\r\n \/\/ Check if it's player's turn in computer mode\r\n if (gameMode === 'computer' && currentPlayer !== playerChoice) {\r\n return;\r\n }\r\n\r\n \/\/ Make the move\r\n board[cellIndex] = currentPlayer;\r\n updateCell(cellIndex, currentPlayer);\r\n\r\n \/\/ Check for game end\r\n const winner = checkWinner();\r\n if (winner) {\r\n handleWin(winner);\r\n return;\r\n }\r\n\r\n if (board.every(cell => cell !== '')) {\r\n handleDraw();\r\n return;\r\n }\r\n\r\n \/\/ Switch players\r\n currentPlayer = currentPlayer === 'X' ? 'O' : 'X';\r\n updateDisplay();\r\n\r\n \/\/ Computer move if in computer mode\r\n if (gameMode === 'computer' && currentPlayer === computerChoice && gameActive) {\r\n computerMove();\r\n }\r\n }\r\n\r\n \/\/ Computer AI move based on difficulty\r\n function computerMove() {\r\n if (!gameActive) return;\r\n\r\n let bestMove = -1;\r\n\r\n switch (difficulty) {\r\n case 'easy':\r\n bestMove = getRandomMove();\r\n break;\r\n case 'medium':\r\n bestMove = Math.random() < 0.7 ? getBestMove() : getRandomMove();\r\n break;\r\n case 'hard':\r\n bestMove = getBestMove();\r\n break;\r\n }\r\n\r\n if (bestMove !== -1) {\r\n board[bestMove] = computerChoice;\r\n updateCell(bestMove, computerChoice);\r\n\r\n \/\/ Check for game end\r\n const winner = checkWinner();\r\n if (winner) {\r\n handleWin(winner);\r\n return;\r\n }\r\n\r\n if (board.every(cell => cell !== '')) {\r\n handleDraw();\r\n return;\r\n }\r\n\r\n \/\/ Switch back to player\r\n currentPlayer = playerChoice;\r\n updateDisplay();\r\n }\r\n }\r\n\r\n \/\/ Get random available move\r\n function getRandomMove() {\r\n const availableCells = board.map((cell, index) => cell === '' ? index : null).filter(cell => cell !== null);\r\n if (availableCells.length > 0) {\r\n return availableCells[Math.floor(Math.random() * availableCells.length)];\r\n }\r\n return -1;\r\n }\r\n\r\n \/\/ Get best strategic move\r\n function getBestMove() {\r\n \/\/ Try to win\r\n for (let i = 0; i < 9; i++) {\r\n if (board[i] === '') {\r\n board[i] = computerChoice;\r\n if (checkWinner() === computerChoice) {\r\n board[i] = '';\r\n return i;\r\n }\r\n board[i] = '';\r\n }\r\n }\r\n\r\n \/\/ Try to block player from winning\r\n for (let i = 0; i < 9; i++) {\r\n if (board[i] === '') {\r\n board[i] = playerChoice;\r\n if (checkWinner() === playerChoice) {\r\n board[i] = '';\r\n return i;\r\n }\r\n board[i] = '';\r\n }\r\n }\r\n\r\n \/\/ Take center if available\r\n if (board[4] === '') {\r\n return 4;\r\n }\r\n\r\n \/\/ Take corners\r\n const corners = [0, 2, 6, 8];\r\n const availableCorners = corners.filter(corner => board[corner] === '');\r\n if (availableCorners.length > 0) {\r\n return availableCorners[Math.floor(Math.random() * availableCorners.length)];\r\n }\r\n\r\n \/\/ Take any available cell\r\n return getRandomMove();\r\n }\r\n\r\n \/\/ Check for winner\r\n function checkWinner() {\r\n for (let condition of winningConditions) {\r\n const [a, b, c] = condition;\r\n if (board[a] && board[a] === board[b] && board[a] === board[c]) {\r\n \/\/ Highlight winning cells\r\n highlightWinningCells(condition);\r\n return board[a];\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ Highlight winning cells\r\n function highlightWinningCells(winningCells) {\r\n winningCells.forEach(index => {\r\n document.querySelectorAll('.cell')[index].classList.add('winning-line');\r\n });\r\n }\r\n\r\n \/\/ Handle win\r\n function handleWin(winner) {\r\n gameActive = false;\r\n \r\n let winnerText = '';\r\n if (gameMode === 'computer') {\r\n if (winner === playerChoice) {\r\n winnerText = 'You Win!';\r\n scores.player1++;\r\n } else {\r\n winnerText = 'Computer Wins!';\r\n scores.player2++;\r\n }\r\n } else {\r\n winnerText = `Player ${winner} Wins!`;\r\n if (winner === 'X') {\r\n scores.player1++;\r\n } else {\r\n scores.player2++;\r\n }\r\n }\r\n \r\n document.getElementById('gameStatus').textContent = winnerText;\r\n document.getElementById('currentTurn').textContent = 'Game Over';\r\n \r\n \/\/ Add celebration animation\r\n document.querySelector('.game-info').classList.add('winner-animation');\r\n setTimeout(() => {\r\n document.querySelector('.game-info').classList.remove('winner-animation');\r\n }, 500);\r\n \r\n updateScoreDisplay();\r\n \r\n \/\/ Disable all cells\r\n document.querySelectorAll('.cell').forEach(cell => {\r\n cell.disabled = true;\r\n });\r\n }\r\n\r\n \/\/ Handle draw\r\n function handleDraw() {\r\n gameActive = false;\r\n scores.draw++;\r\n document.getElementById('gameStatus').textContent = \"It's a Draw!\";\r\n document.getElementById('currentTurn').textContent = 'Game Over';\r\n updateScoreDisplay();\r\n }\r\n\r\n \/\/ Update cell display\r\n function updateCell(cellIndex, player) {\r\n const cell = document.querySelectorAll('.cell')[cellIndex];\r\n cell.textContent = player;\r\n cell.classList.add(player.toLowerCase());\r\n cell.disabled = true;\r\n }\r\n\r\n \/\/ Update game display\r\n function updateDisplay() {\r\n if (!gameActive) return;\r\n\r\n const currentTurn = document.getElementById('currentTurn');\r\n const gameStatus = document.getElementById('gameStatus');\r\n \r\n if (gameMode === 'computer') {\r\n if (currentPlayer === playerChoice) {\r\n currentTurn.textContent = `Your turn (${playerChoice})`;\r\n gameStatus.textContent = 'Choose your move!';\r\n } else {\r\n currentTurn.textContent = `Computer's turn (${computerChoice})`;\r\n gameStatus.textContent = 'Computer will move instantly!';\r\n }\r\n } else {\r\n currentTurn.textContent = `Player ${currentPlayer}'s turn`;\r\n gameStatus.textContent = 'Make your move!';\r\n }\r\n }\r\n\r\n \/\/ Reset current game round\r\n function resetGame() {\r\n resetBoard();\r\n gameActive = true;\r\n currentPlayer = firstPlayer;\r\n \r\n \/\/ Remove winning highlights\r\n document.querySelectorAll('.cell').forEach(cell => {\r\n cell.classList.remove('winning-line');\r\n });\r\n \r\n updateDisplay();\r\n \r\n \/\/ If computer goes first\r\n if (gameMode === 'computer' && currentPlayer === computerChoice) {\r\n computerMove();\r\n }\r\n }\r\n\r\n \/\/ Reset board\r\n function resetBoard() {\r\n board = ['', '', '', '', '', '', '', '', ''];\r\n \r\n \/\/ Reset cells\r\n document.querySelectorAll('.cell').forEach(cell => {\r\n cell.textContent = '';\r\n cell.disabled = false;\r\n cell.classList.remove('x', 'o', 'winning-line');\r\n });\r\n }\r\n\r\n \/\/ Start new game (return to setup)\r\n function newGame() {\r\n document.getElementById('setupSection').style.display = 'block';\r\n document.getElementById('gameSection').classList.remove('active');\r\n \r\n \/\/ Reset game state\r\n gameActive = false;\r\n resetBoard();\r\n }\r\n\r\n \/\/ Reset score\r\n function resetScore() {\r\n scores = { player1: 0, player2: 0, draw: 0 };\r\n updateScoreDisplay();\r\n }\r\n\r\n \/\/ Update score display\r\n function updateScoreDisplay() {\r\n document.getElementById('score1').textContent = scores.player1;\r\n document.getElementById('score2').textContent = scores.player2;\r\n document.getElementById('scoreDraw').textContent = scores.draw;\r\n }\r\n\r\n \/\/ Initialize the game when page loads\r\n function initGame() {\r\n updateScoreDisplay();\r\n \r\n \/\/ Set default difficulty section visibility\r\n const difficultySection = document.getElementById('difficultySection');\r\n if (gameMode === 'computer') {\r\n difficultySection.style.display = 'block';\r\n } else {\r\n difficultySection.style.display = 'none';\r\n }\r\n }\r\n\r\n \/\/ Initialize\r\n initGame();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Advanced Tic Tac Toe Game 🎮 Advanced Tic Tac Toe 🚀 Game Setup Choose Game Mode: 🤖 vs Computer 👥 2 Players Choose Difficulty: 😊 Easy 🤔 Medium 😤 Hard Choose Your Symbol: ❌ Play as X ⭕ Play as O 🎯 Start Game Game Starting… Choose your move! 🔄 Reset Round 🆕 New Game …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/gadgetsguruji.in\/index.php\/tic-tac-toe-game\/\"> <span class=\"screen-reader-text\">Tic Tac Toe Game<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","_joinchat":[]},"_links":{"self":[{"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/pages\/92091"}],"collection":[{"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/comments?post=92091"}],"version-history":[{"count":13,"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/pages\/92091\/revisions"}],"predecessor-version":[{"id":92110,"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/pages\/92091\/revisions\/92110"}],"wp:attachment":[{"href":"https:\/\/gadgetsguruji.in\/index.php\/wp-json\/wp\/v2\/media?parent=92091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}