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

<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
    #board {
      width: 300px;
      margin: 0 auto;
      padding: 0;
    }
<pre><code>.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.winner {
  background-color: yellow;
}
</code></pre>
  </style>
</head>
<body>
  <h1>Tic Tac Toe</h1>
  <div id="board"></div>
  <script>
    var squares = [];
    var turn = 'X';
    var score = {
      'X': 0,
      'O': 0
    };
    var moves = 0;

    function squareClicked(square) {
      moves += 1;
      square.innerHTML = turn;
      square.removeEventListener('click', squareClicked);
      checkWin(turn);
      if (turn === 'X') {
        turn = 'O';
      } else {
        turn = 'X';
      }
    }

    function checkWin(turn) {
      if (
        squares[0].innerHTML === turn &&
        squares[1].innerHTML === turn &&
        squares[2].innerHTML === turn
      ) {
        score[turn] += 1;
        endGame(turn);
      } else if (
        squares[3].innerHTML === turn &&
        squares[4].innerHTML === turn &&
        squares[5].innerHTML === turn
      ) {
        score[turn] += 1;
        endGame(turn);
      } else if (
        squares[6].innerHTML === turn &&
        squares[7].innerHTML === turn &&
        squares[8].innerHTML === turn
      ) {
        score[turn] += 1;
        endGame(turn);
      } else if (
        squares[0].innerHTML === turn &&
        squares[3].innerHTML === turn &&
        squares[6].innerHTML === turn
      ) {
        score[turn] += 1;
        endGame(turn);
      } else if (
        squares[1].innerHTML === turn &&
        squares[4].innerHTML === turn &&
        squares[7].innerHTML === turn
      ) {
        score[turn] += 1;
        endGame(turn);
      } else if (
        squares[2].innerHTML === turn &&
        squares[5].innerHTML === turn &&
        squares[8].innerHTML === turn
      ) {
        score[turn] += 1;
        endGame(turn);
      } else if (
        squares[0].innerHTML === turn &&
        squares[4].innerHTML === turn &&
        squares[8].innerHTML === turn
      ) {
        score[turn] += 1;
        endGame(turn);
      } else if (
        squares[2].innerHTML === turn &&
        squares[4].innerHTML === turn &&
        squares[6].innerHTML === turn
      ) {
        score[turn] += 1;
        endGame(turn);
      } else if (moves === 9) {
        endGame('Tie');
      }
    }

    function endGame(winner) {
      document.querySelectorAll('#board div').forEach(function(square) {
        square.innerHTML = winner;
        if (winner === 'Tie') {
          square.classList.add('tied');
        } else {
          square.classList.add('winner');
        }
        square.removeEventListener('click', squareClicked);
      });
      if (winner !== 'Tie') {
        alert(winner + ' wins!');
      } else {
        alert('It's a tie!');
      }
      newGame();
    }

    function newGame() {
      document.querySelectorAll('#board div').forEach(function(square) {
        square.classList.remove('tied');
        square.classList.remove('winner');
        square.innerHTML = '';
        square.addEventListener('click', squareClicked);
      });
      turn = 'X';
      moves = 0;
    }

    document.querySelectorAll('#board div').forEach(function(square) {
      squares.push(square);
      square.addEventListener('click', squareClicked);
    });
  </script>
</body>
</html>