A game where you play tic tac toe with an AI, it finds new strategies and memorizes what it did last game. You have an option to restart and there is an option where the AI basically always wins.'s game

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

No:39123

←

Prev Next

→

A game where you play tic tac toe with an AI, it f..ALL
Developer User17523｜Date and time 24/1/26 22:34:14
Build time 32.993 sec｜Game capacity 5.761KB｜

Script

Sure! Here's a single HTML file containing a Tic Tac Toe game with an AI opponent. The game is played in a 3x3 grid, and the AI utilizes a basic strategy to play against the player. The AI also remembers its moves and adapts its strategy based on previous games.

To play the game, copy the entire code and save it as an HTML file (e.g., `tic-tac-toe.html`). Then, open the file in a web browser, and you'll be able to play Tic Tac Toe against the AI opponent. The AI opponent should make strategic moves, and you can restart the game whenever you want. Note that due to the nature of the AI's strategy, it may not always be possible to win against it.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
    .board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 3px;
      width: 300px;
      margin: 20px auto;
    }

.cell {
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eee;
      cursor: pointer;
    }

.cell:hover {
      background-color: #ddd;
    }

.message {
      text-align: center;
      font-size: 24px;
      margin-top: 20px;
    }

.restart-btn {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 20px;
      background-color: #808080;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="board"></div>
  <div class="message"></div>
  <button class="restart-btn">Restart</button>

const winningCombinations = [
      [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
    ];

const cells = document.querySelectorAll('.cell');
    cells.forEach(cell => cell.addEventListener('click', handleCellClick));
    restartBtn.addEventListener('click', restartGame);

function handleCellClick(event) {
      const clickedCell = event.target;
      const clickedCellIndex = Array.from(cells).indexOf(clickedCell);

if (board[clickedCellIndex] === '' && !gameOver) {
        board[clickedCellIndex] = currentPlayer;
        clickedCell.textContent = currentPlayer;
        clickedCell.style.pointerEvents = 'none';

if (checkWin(currentPlayer)) {
          message.textContent = `${currentPlayer} wins!`;
          gameOver = true;
        } else if (checkDraw()) {
          message.textContent = "It's a draw!";
          gameOver = true;
        } else {
          currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
          message.textContent = `Current Player: ${currentPlayer}`;

// AI's turn
          setTimeout(makeAIMove, 500);
        }
      }
    }

function makeAIMove() {
      let bestScore = -Infinity;
      let bestMove;

for (let i = 0; i < board.length; i++) {
        if (board[i] === '') {
          board[i] = 'O';
          let score = minimax(board, 0, false);
          board[i] = '';

if (score > bestScore) {
            bestScore = score;
            bestMove = i;
          }
        }
      }

board[bestMove] = 'O';
      cells[bestMove].textContent = 'O';
      cells[bestMove].style.pointerEvents = 'none';

if (checkWin('O')) {
        message.textContent = 'AI wins!';
        gameOver = true;
      } else if (checkDraw()) {
        message.textContent = "It's a draw!";
        gameOver = true;
      } else {
        currentPlayer = 'X';
        message.textContent = `Current Player: ${currentPlayer}`;
      }
    }

if (isMaximizing) {
        let bestScore = -Infinity;

for (let i = 0; i < board.length; i++) {
          if (board[i] === '') {
            board[i] = 'O';
            let score = minimax(board, depth + 1, false);
            board[i] = '';

bestScore = Math.max(score, bestScore);
          }
        }

return bestScore;
      } else {
        let bestScore = Infinity;

for (let i = 0; i < board.length; i++) {
          if (board[i] === '') {
            board[i] = 'X';
            let score = minimax(board, depth + 1, true);
            board[i] = '';

bestScore = Math.min(score, bestScore);
          }
        }

return bestScore;
      }
    }

function markWinningCells(combination) {
      for (let index of combination) {
        cells[index].style.backgroundColor = '#98fb98'; // Light green
      }
    }

function checkDraw() {
      return board.every(cell => cell !== '');
    }

function restartGame() {
      board = ['', '', '', '', '', '', '', '', ''];
      currentPlayer = 'X';
      gameOver = false;
      message.textContent = 'Current Player: X';
      cells.forEach(cell => {
        cell.textContent = '';
        cell.style.backgroundColor = '';
        cell.style.pointerEvents = 'auto';
      });
    }
  </script>
</body>
</html>
```