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

No:17542

←

Prev Next

→

Tic Tac Toe Game
Developer User7714｜Date and time 23/9/23 20:41:04
Build time 32.096 sec｜Game capacity 2.727KB｜

Script

Sure! Here's an example of a Tic Tac Toe game implemented as a single HTML file using JavaScript:

Tic Tac Toe

To play the game, simply copy the above code into a new HTML file, save it as `tic-tac-toe.html`, and open the file in a web browser. You will see a Tic Tac Toe grid displayed on the page. Click on any empty cell to place your 'X' or 'O' and take turns with the computer. The game will automatically detect if there is a winner or if the game ends in a draw, and display an alert message.

←

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>
    body {
      font-family: Arial, sans-serif;
    }

#game-board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
    }

.cell {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      font-size: 48px;
      border: 1px solid #000;
      box-sizing: border-box;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Tic Tac Toe</h1>
  
  <div id="game-board"></div>

// Game Variables
    let currentPlayer = PLAYER_X;
    let gameBoard = ['', '', '', '', '', '', '', '', ''];
    let gameEnded = false;

// Cell Click Event Handler
    function cellClicked(index) {
      if (gameEnded) return;

if (gameBoard[index] !== EMPTY_CELL) return;

gameBoard[index] = currentPlayer;
      document.getElementById(index).innerText = currentPlayer;

if (checkWinner(currentPlayer)) {
        endGame(currentPlayer + ' Wins!');
        return;
      }

if (gameBoard.every(cell => cell !== EMPTY_CELL)) {
        endGame('Draw!');
        return;
      }

currentPlayer = currentPlayer === PLAYER_X ? PLAYER_O : PLAYER_X;
    }

// Check for Win Condition
    function checkWinner(player) {
      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]
      ];

return winCombinations.some(combination => {
        return combination.every(index => gameBoard[index] === player);
      });
    }

// End Game
    function endGame(message) {
      gameEnded = true;
      alert(message);
    }
    
    // Create Game Board
    const gameContainer = document.getElementById('game-board');
    for (let i = 0; i < 9; i++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      cell.id = i;
      cell.addEventListener('click', () => cellClicked(i));
      gameContainer.appendChild(cell);
    }
  </script>
</body>
</html>
```