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

No:459

384

←

Prev Next

→

Tick tac toe
Developer User2987｜Date and time 23/6/14 17:32:42
Build time 43.585 sec｜Game capacity 3.27KB｜

Script

Tic Tac Toe

The Tic Tac Toe game is played on a 3x3 grid. Player s take turns marking a square with either an X or an O. The first player to get three squares in a row (horizontally, vertically, or diagonally) wins. If all squares are filled and no player has three in a row, the game is a tie. In this implementation, the game board is displayed using div elements styled with CSS. Clicking on a square will place the current player’s mark and check for a winning condition or tie. There is also a reset button to start a new game. The game can be played on a smartphone with emoji used to indicate player marks and prompts.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<body>
  <h1>Tic Tac Toe</h1>
  <div id="game-board">
    <div class="square" id="square-1"></div>
    <div class="square" id="square-2"></div>
    <div class="square" id="square-3"></div>
    <div class="square" id="square-4"></div>
    <div class="square" id="square-5"></div>
    <div class="square" id="square-6"></div>
    <div class="square" id="square-7"></div>
    <div class="square" id="square-8"></div>
    <div class="square" id="square-9"></div>
  </div>
  <div id="message"></div>
  <button id="reset-button">Reset Game</button>
</body>
<script>
  // Initialize variables
  let currentPlayer = "X";
  let gameState = ["", "", "", "", "", "", "", "", ""];
  let gameIsActive = true;
  const winningConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

// Functions for game logic
  function handlePlayerClick(event) {
    const square = event.target;
    const squareIndex = parseInt(square.id.replace("square-", ""));
    if (gameState[squareIndex] !== "" || !gameIsActive) {
      return;
    }
    gameState[squareIndex] = currentPlayer;
    square.textContent = currentPlayer;
    checkForWinningCondition();
    checkForTie();
    swapPlayers();
  }

function checkForTie() {
    if (!gameState.includes("")) {
      gameIsActive = false;
      displayMessage("It's a tie!");
    }
  }

function swapPlayers() {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    displayMessage(`Player ${currentPlayer}'s turn`);
  }

function resetGame() {
    currentPlayer = "X";
    gameState = ["", "", "", "", "", "", "", "", ""];
    gameIsActive = true;
    document.querySelectorAll(".square").forEach(square => square.textContent = "");
    displayMessage(`Player ${currentPlayer}'s turn`);
  }

function displayMessage(message) {
    document.getElementById("message").textContent = message;
  }

// Event listeners
  document.querySelectorAll(".square").forEach(square => square.addEventListener("click", handlePlayerClick));
  document.getElementById("reset-button").addEventListener("click", resetGame);

// Initial message
  displayMessage(`Player ${currentPlayer}'s turn`);
</script>

In this implementation, the game board is displayed using div elements styled with CSS. Clicking on a square will place the current player's mark and check for a winning condition or tie. There is also a reset button to start a new game. The game can be played on a smartphone with emoji used to indicate player marks and prompts.