Play Tic Tac Toe Online - Free HTML Game - 常规

<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <style>
      .grid {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        height: 300px;
      }
      .grid div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div class='grid'>
      <div id='1'></div>
      <div id='2'></div>
      <div id='3'></div>
      <div id='4'></div>
      <div id='5'></div>
      <div id='6'></div>
      <div id='7'></div>
      <div id='8'></div>
      <div id='9'></div>
    </div>
    <script>
      let player1 = 'X';
      let player2 = 'O';
      let currentPlayer = player1;
      let gameStatus = 'playing';
<pre><code>  const boxes = document.querySelectorAll('.grid div');
  const result = document.querySelector('#result');

  boxes.forEach(box =&gt; {
    box.addEventListener('click', clickBox);
  });

  function clickBox(event) {
    const clickedBox = event.target;
    if (clickedBox.innerText === '' &amp;&amp; gameStatus === 'playing') {
      clickedBox.innerText = currentPlayer;
      switchPlayer();
      checkWinner();
    }
  }

  function switchPlayer() {
    if (currentPlayer === player1) {
      currentPlayer = player2;
    } else {
      currentPlayer = player1;
    }
  }

  function checkWinner() {
    const firstRow = boxes[0].innerText + boxes[1].innerText + boxes[2].innerText;
    const secondRow = boxes[3].innerText + boxes[4].innerText + boxes[5].innerText;
    const thirdRow = boxes[6].innerText + boxes[7].innerText + boxes[8].innerText;
    const firstColumn = boxes[0].innerText + boxes[3].innerText + boxes[6].innerText;
    const secondColumn = boxes[1].innerText + boxes[4].innerText + boxes[7].innerText;
    const thirdColumn = boxes[2].innerText + boxes[5].innerText + boxes[8].innerText;
    const firstDiagonal = boxes[0].innerText + boxes[4].innerText + boxes[8].innerText;
    const secondDiagonal = boxes[2].innerText + boxes[4].innerText + boxes[6].innerText;

    if (
      firstRow === 'XXX' ||
      secondRow === 'XXX' ||
      thirdRow === 'XXX' ||
      firstColumn === 'XXX' ||
      secondColumn === 'XXX' ||
      thirdColumn === 'XXX' ||
      firstDiagonal === 'XXX' ||
      secondDiagonal === 'XXX'
    ) {
      result.innerText = 'Player 1 Wins!';
      gameStatus = 'ended';
    } else if (
      firstRow === 'OOO' ||
      secondRow === 'OOO' ||
      thirdRow === 'OOO' ||
      firstColumn === 'OOO' ||
      secondColumn === 'OOO' ||
      thirdColumn === 'OOO' ||
      firstDiagonal === 'OOO' ||
      secondDiagonal === 'OOO'
    ) {
      result.innerText = 'Player 2 Wins!';
      gameStatus = 'ended';
    }
  }
&lt;/script&gt;
&lt;p id='result'&gt;&lt;/p&gt;
</code></pre>
  </body>
</html>