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

No:27233

104

←

Prev Next

→

Tick tac toe but the al always picks it right
Developer User10969｜Date and time 23/12/5 10:55:52
Build time 121.346 sec｜Game capacity 4.399KB｜

Script

Sure! Here's a Tic Tac Toe game implemented as a single HTML file using JavaScript. The game is designed to be played on a smartphone and uses pictograms for the X and O symbols. The algorithm for the AI opponent ensures that it always picks the right move.

Tic Tac Toe

To play the game, simply copy and paste the code into a new HTML file and open it in a web browser on your smartphone. The game will automatically start, and you can take turns playing against the AI opponent. The AI opponent will always make the optimal move to ensure it never loses. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding-top: 50px;
    }

.grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 250px;
      margin: 0 auto;
    }

.cell {
      width: 80px;
      height: 80px;
      border: 2px solid #333;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28px;
    }

.cell:hover {
      cursor: pointer;
      background-color: lightgray;
    }

#result {
      font-size: 24px;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <h1>Tic Tac Toe</h1>
  <div class="grid">
    <div class="cell" onclick="placeSymbol(0)"></div>
    <div class="cell" onclick="placeSymbol(1)"></div>
    <div class="cell" onclick="placeSymbol(2)"></div>
    <div class="cell" onclick="placeSymbol(3)"></div>
    <div class="cell" onclick="placeSymbol(4)"></div>
    <div class="cell" onclick="placeSymbol(5)"></div>
    <div class="cell" onclick="placeSymbol(6)"></div>
    <div class="cell" onclick="placeSymbol(7)"></div>
    <div class="cell" onclick="placeSymbol(8)"></div>
  </div>
  <div id="result"></div>

// Attach click event handler to each cell
    cells.forEach((cell) => {
      cell.addEventListener('click', handleClick);
    });

function handleClick(event) {
      if (gameOver) return;

if (event.target.textContent === '') {
        event.target.textContent = currentPlayer;
        checkWin();
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';

if (currentPlayer === 'O') {
          makeComputerMove();
        }
      }
    }

function checkWin() {
      const 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]
      ];

for (let combo of winningCombos) {
        const [a, b, c] = combo;

if (cells[a].textContent === cells[b].textContent && cells[a].textContent === cells[c].textContent && cells[a].textContent !== '') {
          gameOver = true;
          document.getElementById('result').textContent = currentPlayer + ' wins!';
          return;
        }
      }

if (!cells.some(cell => cell.textContent === '')) {
        gameOver = true;
        document.getElementById('result').textContent = 'It\'s a tie!';
      }
    }

function makeComputerMove() {
      let availableCells = cells.filter(cell => cell.textContent === '');
      let bestMove = -1;
      let bestScore = -Infinity;

availableCells.forEach((cell, index) => {
        cell.textContent = 'O';
        let score = minimax(false);
        cell.textContent = '';

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

cells[availableCells[bestMove].dataset.index].textContent = 'O';
      currentPlayer = 'X';
      checkWin();
    }

function minimax(isMaximizingPlayer) {
      if (checkWin() === 'X') return -1;
      if (checkWin() === 'O') return 1;
      if (cells.every(cell => cell.textContent !== '')) return 0;

let bestScore = isMaximizingPlayer ? -Infinity : Infinity;

cells.forEach((cell, index) => {
        if (cell.textContent === '') {
          cell.textContent = isMaximizingPlayer ? 'O' : 'X';
          let score = minimax(!isMaximizingPlayer);
          cell.textContent = '';

bestScore = isMaximizingPlayer ? Math.max(score, bestScore) : Math.min(score, bestScore);
        }
      });

return bestScore;
    }
  </script>
</body>
</html>
```