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

No:24773

←

Prev Next

→

A tic tac toe game
Developer User11849｜Date and time 23/11/12 2:16:23
Build time 120.675 sec｜Game capacity 3.546KB｜

Script

Sure! Here's an example of a tic-tac-toe game implemented as a single HTML file using JavaScript:

Tic Tac Toe

You can simply save the code above into an HTML file, open it in a web browser, and you'll have a playable tic-tac-toe game. The game logic is implemented using JavaScript, and the game board is represented visually using CSS grid and flexbox.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's an example of a tic-tac-toe game implemented as a single HTML file using JavaScript:

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

.game-cell {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: lightgray;
      font-size: 48px;
      font-weight: bold;
      cursor: pointer;
    }

.game-cell:not(.empty) {
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h1>Tic Tac Toe</h1>
  <div class="game-board">
    <div class="game-cell empty"></div>
    <div class="game-cell empty"></div>
    <div class="game-cell empty"></div>
    <div class="game-cell empty"></div>
    <div class="game-cell empty"></div>
    <div class="game-cell empty"></div>
    <div class="game-cell empty"></div>
    <div class="game-cell empty"></div>
    <div class="game-cell empty"></div>
  </div>

// Get DOM elements for the game cells
    const gameCells = document.querySelectorAll('.game-cell');

// Add click event listener to each game cell
    gameCells.forEach((cell, index) => {
      cell.addEventListener('click', () => {
        if (!gameOver && cell.classList.contains('empty')) {
          // Update game state
          const row = Math.floor(index / 3);
          const col = index % 3;
          board[row][col] = currentPlayer;

// Update DOM
          cell.textContent = currentPlayer;
          cell.classList.remove('empty');

// Check for win
          if (checkWin(board, currentPlayer)) {
            alert(`Player ${currentPlayer} wins!`);
            gameOver = true;
          } else if (isBoardFull(board)) {
            alert('It\'s a draw!');
            gameOver = true;
          } else {
            // Switch current player
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
          }
        }
      });
    });

// Check if a player has won
    function checkWin(board, player) {
      // Check rows
      for (let row = 0; row < 3; row++) {
        if (board[row][0] === player && board[row][1] === player && board[row][2] === player) {
          return true;
        }
      }

// Check columns
      for (let col = 0; col < 3; col++) {
        if (board[0][col] === player && board[1][col] === player && board[2][col] === player) {
          return true;
        }
      }

// Check diagonals
      if (board[0][0] === player && board[1][1] === player && board[2][2] === player) {
        return true;
      }
      if (board[2][0] === player && board[1][1] === player && board[0][2] === player) {
        return true;
      }

return false;
    }

// Check if the board is full
    function isBoardFull(board) {
      for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 3; col++) {
          if (board[row][col] === null) {
            return false;
          }
        }
      }
      return true;
    }
  </script>
</body>
</html>
```