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

<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
    .board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
    }
    .square {
      height: 80px;
      width: 80px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .x {
      background: #f00;
    }
    .o {
      background: #0f0;
    }
  </style>
</head>
<body>
  <h1>Tic Tac Toe</h1>
  <div class='board'>
    <div class='square' data-square='0'></div>
    <div class='square' data-square='1'></div>
    <div class='square' data-square='2'></div>
    <div class='square' data-square='3'></div>
    <div class='square' data-square='4'></div>
    <div class='square' data-square='5'></div>
    <div class='square' data-square='6'></div>
    <div class='square' data-square='7'></div>
    <div class='square' data-square='8'></div>
  </div>
  <script type='text/javascript'>
    // Get all squares
    const squares = document.querySelectorAll('.square');
    // Initialize empty array to hold player moves
    let playerMoves = [];
    // Initialize empty array to hold computer moves
    let computerMoves = [];
    // Create a winning combinations array
    let winningCombos = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];
    // Initialize turn to player
    let turn = 'player';
    // Function to add X
    function addX() {
      // Get square data-square value
      let square = this.dataset.square;
      // Add X to player moves
      playerMoves.push(parseInt(square));
      // Add X to board
      this.innerHTML = '<span class='x'>X</span>';
      // Check for win
      checkWin('player', playerMoves);
      // Change turn to computer
      turn = 'computer';
      // Call computer turn
      computerTurn();
    }
    // Function to add O
    function addO() {
      // Get square data-square value
      let square = this.dataset.square;
      // Add O to computer moves
      computerMoves.push(parseInt(square));
      // Add O to board
      this.innerHTML = '<span class='o'>O</span>';
      // Check for win
      checkWin('computer', computerMoves);
      // Change turn to player
      turn = 'player';
    }
    // Function to check win
    function checkWin(player, moves) {
      // Loop through winning combos
      for (let i = 0; i < winningCombos.length; i++) {
        // Get winning combo
        let combo = winningCombos[i];
        // Initialize counter
        let counter = 0;
        // Loop through moves
        for (let j = 0; j < moves.length; j++) {
          // Check if move is in winning combo
          if (combo.includes(moves[j])) {
            // Increment counter
            counter++;
            // Check if counter is 3
            if (counter === 3) {
              // Alert win message
              alert(`${player} wins!`);
              // Reset game
              resetGame();
            }
          }
        }
      }
    }
    // Function for computer turn
    function computerTurn() {
      // Initialize random number
      let randomNum = Math.floor(Math.random() * 9);
      // Check that randomNum is not in playerMoves or computerMoves
      while (playerMoves.includes(randomNum) || computerMoves.includes(randomNum)) {
        randomNum = Math.floor(Math.random() * 9);
      }
      // Add O to board
      squares[randomNum].innerHTML = '<span class='o'>O</span>';
      // Add O to computer moves
      computerMoves.push(randomNum);
      // Check for win
      checkWin('computer', computerMoves);
      // Change turn to player
      turn = 'player';
    }
    // Function to reset game
    function resetGame() {
      // Clear player moves array
      playerMoves = [];
      // Clear computer moves array
      computerMoves = [];
      // Clear board
      for (let i = 0; i < squares.length; i++) {
        squares[i].innerHTML = '';
      }
    }
    // Add event listener to all squares
    for (let i = 0; i < squares.length; i++) {
      // Add event listener to each square
      squares[i].addEventListener('click', addX);
    }
  </script>
</body>
</html>