Tic tac toe I'm o your x 3 in a row wins's game

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

No:27894

←

Prev Next

→

Tic tac toe I'm o your x 3 in a row wins
Developer User12706｜Date and time 23/12/10 0:50:58
Build time 28.001 sec｜Game capacity 3.51KB｜

Script

Sure, here's an implementation of a Tic Tac Toe game as a single HTML file using JavaScript and enclosed in script tags:

This implementation creates a Tic Tac Toe game with a 3x3 grid using div elements for each cell. Clicking on a cell triggers the `playerMove` function which updates the game board, checks for a win, and switches to the next player. The game continues until a player wins, at which point an alert is shown indicating the winner and the game is reset.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here's an implementation of a Tic Tac Toe game as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <script>
    // Function to start the game
    function startGame() {
      // Create an array to represent the game board
      var board = [
        '', '', '',
        '', '', '',
        '', '', ''
      ];

// Variable to keep track of the current player
      var currentPlayer = 'X';

// Function to handle a player's move
      function playerMove(position) {
        // Check if the position is empty
        if (board[position] === '') {
          // Set the position with the current player's symbol
          board[position] = currentPlayer;

// Update the game view
          document.getElementById('cell' + position).innerHTML = currentPlayer;

// Check if the current player has won
          if (checkWin()) {
            // Show the winner
            alert('Player ' + currentPlayer + ' wins!');
            // Reset the game
            startGame();
          } else {
            // Switch to the next player
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
          }
        }
      }

// Function to check if a player has won
      function checkWin() {
        // Define winning combinations
        var winCombinations = [
          [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
        ];

// Check each winning combination
        for (var i = 0; i < winCombinations.length; i++) {
          var [a, b, c] = winCombinations[i];
          if (board[a] !== '' && board[a] === board[b] && board[b] === board[c]) {
            return true; // Winning combination found
          }
        }
        return false; // No winning combination found
      }

// Add event listeners to the cells
      var cells = document.getElementsByClassName('cell');
      for (var i = 0; i < cells.length; i++) {
        cells[i].addEventListener('click', function() {
          playerMove(this.dataset.position);
        });
      }
    }
  </script>
  <style>
    .board {
      display: grid;
      grid-template: repeat(3, 1fr) / repeat(3, 1fr);
      gap: 5px;
      width: 300px;
      height: 300px;
    }

.cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 100px;
      background-color: #eee;
      cursor: pointer;
    }
  </style>
</head>
<body onload="startGame()">
  <div class="board">
    <div class="cell" id="cell0" data-position="0"></div>
    <div class="cell" id="cell1" data-position="1"></div>
    <div class="cell" id="cell2" data-position="2"></div>
    <div class="cell" id="cell3" data-position="3"></div>
    <div class="cell" id="cell4" data-position="4"></div>
    <div class="cell" id="cell5" data-position="5"></div>
    <div class="cell" id="cell6" data-position="6"></div>
    <div class="cell" id="cell7" data-position="7"></div>
    <div class="cell" id="cell8" data-position="8"></div>
  </div>
</body>
</html>
```
This implementation creates a Tic Tac Toe game with a 3x3 grid using div elements for each cell. Clicking on a cell triggers the `playerMove` function which updates the game board, checks for a win, and switches to the next player. The game continues until a player wins, at which point an alert is shown indicating the winner and the game is reset.