Untitled
unknown
plain_text
7 months ago
2.4 kB
0
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Tic Tac Toe</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; width: 100px; height: 100px; text-align: center; vertical-align: middle; font-size: 3em; } td:hover { background-color: #e6e6e6; } .winner { background-color: #00ff00; } .tie { background-color: #ffff00; } </style> </head> <body> <h1>Tic Tac Toe</h1> <table id="board"> <tr> <td id="0"></td> <td id="1"></td> <td id="2"></td> </tr> <tr> <td id="3"></td> <td id="4"></td> <td id="5"></td> </tr> <tr> <td id="6"></td> <td id="7"></td> <td id="8"></td> </tr> </table> <script> // Initialize the game board with null values let board = [null, null, null, null, null, null, null, null, null]; // Initialize the current player let currentPlayer = "X"; // Get references to the game board and all cells const gameBoard = document.getElementById("board"); const cells = document.getElementsByTagName("td"); // Render the game board function render() { for (let i = 0; i < 9; i++) { cells[i].textContent = board[i] || ""; } } // Handle player turns function handleTurn(cell, index) { if (board[index] === null) { board[index] = currentPlayer; cell.textContent = currentPlayer; cell.style.backgroundColor = "#ddd"; currentPlayer = currentPlayer === "X" ? "O" : "X"; } checkForWinner(); } // Check for a winner function checkForWinner() { const winningCombinations = [ // Rows [0, 1, 2], [3, 4, 5], [6, 7, 8], // Columns [0, 3, 6], [1, 4, 7], [2, 5, 8], // Diagonals [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i < winningCombinations.length; i++) { const [a, b, c] = winningCombinations[i]; if (board[a] &&