Tic tac toe with UI restart button's game

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

No:39263

←

Prev Next

→

Tic tac toe with UI restart button
Developer User17562｜Date and time 24/1/27 14:13:56
Build time 17.146 sec｜Game capacity 3.789KB｜

Script

Sure, here's an example of a Tic Tac Toe game implemented as a single HTML file. It includes JavaScript for the game logic and a restart button to play again. The game can be played using smartphone operation.

You can save the above code into an HTML file, like `tic_tac_toe.html`, and open it in any web browser to play the Tic Tac Toe game.

←

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: 10px;
      max-width: 300px;
      margin: 0 auto;
    }

.cell {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      font-size: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

#message {
      text-align: center;
      margin-top: 10px;
      font-weight: bold;
    }

#restart {
      display: block;
      margin: 10px auto;
    }
  </style>
</head>
<body>
  <div class="board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div id="message"></div>
  <button id="restart" onclick="restartGame()">Restart</button>

// Winning combinations
    const winCombinations = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];

// Cell elements
    const cells = document.querySelectorAll('.cell');

// Initialize the game
    function startGame() {
      cells.forEach(cell => {
        cell.innerText = '';
        cell.addEventListener('click', handleCellClick);
      });
    }

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

// If the cell is already taken or game is not active, ignore the click
      if (gameState[clickedCellIndex] !== '' || !gameActive) {
        return;
      }

// Update the game state
      gameState[clickedCellIndex] = currentPlayer;
      clickedCell.innerText = currentPlayer;

// Check for a win
      checkWin();

// Switch players
      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }

// Check for a win
    function checkWin() {
      let roundWon = false;
      for (let combination of winCombinations) {
        const a = gameState[combination[0]];
        const b = gameState[combination[1]];
        const c = gameState[combination[2]];

if (a === '' || b === '' || c === '') {
          continue;
        }

if (a === b && b === c) {
          roundWon = true;
          break;
        }
      }

if (roundWon) {
        gameActive = false;
        document.getElementById('message').innerText = currentPlayer + ' has won the game!';
        return;
      }

// Check for a tie
      if (!gameState.includes('')) {
        gameActive = false;
        document.getElementById('message').innerText = 'It\'s a tie!';
      }
    }

// Restart the game
    function restartGame() {
      currentPlayer = 'X';
      gameActive = true;
      gameState = ['', '', '', '', '', '', '', '', ''];
      document.getElementById('message').innerText = '';
      cells.forEach(cell => {
        cell.innerText = '';
        cell.addEventListener('click', handleCellClick);
      });
    }

// Start the game
    startGame();
  </script>
</body>
</html>
```

You can save the above code into an HTML file, like `tic_tac_toe.html`, and open it in any web browser to play the Tic Tac Toe game.