Untitled

unknown
plain_text
7 months ago
2.4 kB
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] &&