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

No:27896

Tic tac toe I'm o ai is x 3 in a row wins
Developer User12706｜Date and time 23/12/10 0:53:37
Build time 43.007 sec｜Game capacity 4.896KB｜

Script

Sure! Here's an example of a Tic Tac Toe game implemented as a single HTML file with JavaScript. This game assumes a smartphone operation and uses pictograms for the game grid. The player is "O" and the AI is "X". The game ends when either the player or the AI achieves three in a row. Please note that this implementation is a simplified version and does not include levels of difficulty or advanced AI logic.

Tic Tac Toe

To play the game, save the above code in an HTML file, open it in a web browser, and start making your moves by tapping on the empty cells in the grid. The game will automatically switch between the player and the AI. The game ends when either the player or the AI achieves three in a row.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Please note that this implementation is a simplified version and does not include levels of difficulty or advanced AI logic.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 300px;
        margin: 20px auto;
      }
      .grid div {
        background-color: #eee;
        border-radius: 5px;
        text-align: center;
        font-size: 60px;
        line-height: 1;
        cursor: pointer;
      }
      .message {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Tic Tac Toe</h1>
    
    <div class="grid">
      <div onclick="makeMove(0, 0)"></div>
      <div onclick="makeMove(0, 1)"></div>
      <div onclick="makeMove(0, 2)"></div>
      <div onclick="makeMove(1, 0)"></div>
      <div onclick="makeMove(1, 1)"></div>
      <div onclick="makeMove(1, 2)"></div>
      <div onclick="makeMove(2, 0)"></div>
      <div onclick="makeMove(2, 1)"></div>
      <div onclick="makeMove(2, 2)"></div>
    </div>

// Variable to keep track of the current player
      var currentPlayer = 'O';

// Function to handle the player's move
      function makeMove(row, col) {
        if (grid[row][col] === '') {
          grid[row][col] = currentPlayer;
          document.getElementsByClassName('grid')[0].children[row * 3 + col].innerText = currentPlayer;
          checkWin();
          switchPlayer();
          if (currentPlayer === 'X') {
            makeAIMove();
          }
        }
      }

// Function to make the AI's move
      function makeAIMove() {
        var availableCells = [];
        for (var row = 0; row < 3; row++) {
          for (var col = 0; col < 3; col++) {
            if (grid[row][col] === '') {
              availableCells.push({ row, col });
            }
          }
        }
        if (availableCells.length > 0) {
          var randomIndex = Math.floor(Math.random() * availableCells.length);
          var randomCell = availableCells[randomIndex];
          makeMove(randomCell.row, randomCell.col);
        }
      }

// Function to switch the current player
      function switchPlayer() {
        currentPlayer = (currentPlayer === 'O') ? 'X' : 'O';
      }

// Function to check if the game has been won
      function checkWin() {
        var winningCombinations = [
          [[0, 0], [0, 1], [0, 2]], // Rows
          [[1, 0], [1, 1], [1, 2]],
          [[2, 0], [2, 1], [2, 2]],
          [[0, 0], [1, 0], [2, 0]], // Columns
          [[0, 1], [1, 1], [2, 1]],
          [[0, 2], [1, 2], [2, 2]],
          [[0, 0], [1, 1], [2, 2]], // Diagonals
          [[0, 2], [1, 1], [2, 0]]
        ];

for (var i = 0; i < winningCombinations.length; i++) {
          var combination = winningCombinations[i];
          var a = combination[0];
          var b = combination[1];
          var c = combination[2];

if (
            grid[a[0]][a[1]] !== '' &&
            grid[a[0]][a[1]] === grid[b[0]][b[1]] &&
            grid[a[0]][a[1]] === grid[c[0]][c[1]]
          ) {
            document.getElementsByClassName('message')[0].innerText = 'Player ' + currentPlayer + ' wins!';
            disableGrid();
            break;
          } else if (isGridFull()) {
            document.getElementsByClassName('message')[0].innerText = 'It\'s a tie!';
            disableGrid();
          }
        }
      }

// Function to check if the grid is full
      function isGridFull() {
        for (var row = 0; row < 3; row++) {
          for (var col = 0; col < 3; col++) {
            if (grid[row][col] === '') {
              return false;
            }
          }
        }
        return true;
      }

// Function to disable the grid after the game ends
      function disableGrid() {
        var cells = document.getElementsByClassName('grid')[0].children;
        for (var i = 0; i < cells.length; i++) {
          cells[i].onclick = null;
        }
      }
    </script>
  </body>
</html>
```