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

<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
    table, th, td {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h2>Tic Tac Toe</h2>
  <table>
    <tr>
      <td onclick="turn(this)" class="square" id="sq1"></td>
      <td onclick="turn(this)" class="square" id="sq2"></td>
      <td onclick="turn(this)" class="square" id="sq3"></td>
    </tr>
    <tr>
      <td onclick="turn(this)" class="square" id="sq4"></td>
      <td onclick="turn(this)" class="square" id="sq5"></td>
      <td onclick="turn(this)" class="square" id="sq6"></td>
    </tr>
    <tr>
      <td onclick="turn(this)" class="square" id="sq7"></td>
      <td onclick="turn(this)" class="square" id="sq8"></td>
      <td onclick="turn(this)" class="square" id="sq9"></td>
    </tr>
  </table>
  <script>
    var turnCount = 0;
    function turn(square) {
      if (turnCount % 2 === 0) {
        square.innerHTML = 'X';
      } else {
        square.innerHTML = 'O';
      }
      turnCount++;
      checkWin();
    }
    function checkWin() {
      var sq1 = document.getElementById('sq1').innerHTML;
      var sq2 = document.getElementById('sq2').innerHTML;
      var sq3 = document.getElementById('sq3').innerHTML;
      var sq4 = document.getElementById('sq4').innerHTML;
      var sq5 = document.getElementById('sq5').innerHTML;
      var sq6 = document.getElementById('sq6').innerHTML;
      var sq7 = document.getElementById('sq7').innerHTML;
      var sq8 = document.getElementById('sq8').innerHTML;
      var sq9 = document.getElementById('sq9').innerHTML;
      // Check rows
      if (sq1 !== '' && sq1 === sq2 && sq2 === sq3) {
        alert('Player ' + sq1 + ' wins!');
        reset();
      } else if (sq4 !== '' && sq4 === sq5 && sq5 === sq6) {
        alert('Player ' + sq4 + ' wins!');
        reset();
      } else if (sq7 !== '' && sq7 === sq8 && sq8 === sq9) {
        alert('Player ' + sq7 + ' wins!');
        reset();
      // Check columns
      } else if (sq1 !== '' && sq1 === sq4 && sq4 === sq7) {
        alert('Player ' + sq1 + ' wins!');
        reset();
      } else if (sq2 !== '' && sq2 === sq5 && sq5 === sq8) {
        alert('Player ' + sq2 + ' wins!');
        reset();
      } else if (sq3 !== '' && sq3 === sq6 && sq6 === sq9) {
        alert('Player ' + sq3 + ' wins!');
        reset();
      // Check diagonals
      } else if (sq1 !== '' && sq1 === sq5 && sq5 === sq9) {
        alert('Player ' + sq1 + ' wins!');
        reset();
      } else if (sq3 !== '' && sq3 === sq5 && sq5 === sq7) {
        alert('Player ' + sq3 + ' wins!');
        reset();
      }
    }
    function reset() {
      document.getElementById('sq1').innerHTML = '';
      document.getElementById('sq2').innerHTML = '';
      document.getElementById('sq3').innerHTML = '';
      document.getElementById('sq4').innerHTML = '';
      document.getElementById('sq5').innerHTML = '';
      document.getElementById('sq6').innerHTML = '';
      document.getElementById('sq7').innerHTML = '';
      document.getElementById('sq8').innerHTML = '';
      document.getElementById('sq9').innerHTML = '';
    }
  </script>
</body>
</html>