AI game creator

Click here for free DL of the app version that can save data.

No:9533

110

←

Prev Next

→

Tic Tac Toe
Developer User4380｜Date and time 23/7/26 0:51:24
Build time 24.529 sec｜Game capacity 2.923KB｜

Script

Sure, here's an implementation of Tic Tac Toe as a single HTML file using JavaScript:

To play the game, simply open the HTML file in a web browser, and you can start playing Tic Tac Toe. The game uses X and O as the symbols, and it will display an alert message when a player wins or the game ends in a draw.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

Sure, here's an implementation of Tic Tac Toe as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
    .board {
      display: flex;
      flex-wrap: wrap;
      max-width: 300px;
      margin: 0 auto;
    }
    
    .cell {
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      border: 2px solid black;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="board"></div>

// Create the cells
      for (let i = 0; i < 9; i++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.addEventListener('click', () => {
          if (!gameOver && cell.textContent === '') {
            cell.textContent = currentPlayer;
            cell.classList.add(currentPlayer);
            checkWin();
            currentPlayer = (currentPlayer === 'X') ? 'O' : 'X';
          }
        });
        cells.push(cell);
        board.appendChild(cell);
      }

// Define winning combinations
      const winningCombos = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
        [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
        [0, 4, 8], [2, 4, 6]  // Diagonals
      ];

// Check for a win
      function checkWin() {
        for (let combo of winningCombos) {
          if (
            cells[combo[0]].textContent === currentPlayer &&
            cells[combo[1]].textContent === currentPlayer &&
            cells[combo[2]].textContent === currentPlayer
          ) {
            gameOver = true;
            setTimeout(() => {
              alert(currentPlayer + ' wins!');
              resetGame();
            }, 100);
            break;
          }
        }
        if (!gameOver && isBoardFull()) {
          gameOver = true;
          setTimeout(() => {
            alert('It\'s a draw!');
            resetGame();
          }, 100);
        }
      }

// Check if the board is full
      function isBoardFull() {
        for (let cell of cells) {
          if (cell.textContent === '') {
            return false;
          }
        }
        return true;
      }

// Reset the game
      function resetGame() {
        for (let cell of cells) {
          cell.textContent = '';
          cell.classList.remove('X', 'O');
        }
        currentPlayer = 'X';
        gameOver = false;
      }
    });
  </script>
</body>
</html>
```