Tic-tac-toe using pictograms and a 3 x 3 square's game

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

No:31823

←

Prev Next

→

Tic-tac-toe using pictograms and a 3 x 3 square
Developer User15232｜Date and time 23/12/28 12:28:28
Build time 33.397 sec｜Game capacity 3.895KB｜

Script

Sure! Here's an implementation of a Tic-Tac-Toe game using pictograms and a 3 x 3 square. To play the game, you can simply copy the following code into a single HTML file and open it in a web browser on your smartphone:

This code provides a visual Tic-Tac-Toe game where players can take turns by tapping on the grid cells using their smartphones. The game displays pictograms of X and O as the moves played by the players. The game ends when a player wins or there is a tie. Note: The game logic and visual presentation are included within a single HTML file for simplicity. However, in a real-world scenario, it's recommended to separate the game logic into separate JavaScript files and utilize proper CSS stylesheets for better maintainability and organization.

←

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>
    /* CSS styling for the game */
    .board {
      display: flex;
      flex-wrap: wrap;
      width: 270px;
      margin: 0 auto;
    }
    
    .cell {
      width: 90px;
      height: 90px;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50px;
    }
    
    .message {
      text-align: center;
      margin-top: 20px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="board"></div>
  <div class="message"></div>

// Pictograms for player 1 (X) and player 2 (O)
    const player1Pictogram = '❌';
    const player2Pictogram = '⭕️';

// Game state
    let currentPlayer = 1;
    let gameActive = true;
    let gameState = ["", "", "", "", "", "", "", "", ""];

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

// Render the Tic-Tac-Toe board
    function renderBoard() {
      const boardElement = document.querySelector('.board');
      boardElement.innerHTML = '';

gameState.forEach((cell, index) => {
        const cellElement = document.createElement('div');
        cellElement.classList.add('cell');
        cellElement.dataset.index = index;
        cellElement.innerText = cell;
        cellElement.addEventListener('click', handleCellClick);
        boardElement.appendChild(cellElement);
      });
    }

// Handle a click on a cell
    function handleCellClick(event) {
      const clickedCell = event.target;
      const clickedCellIndex = parseInt(clickedCell.dataset.index);

if (gameState[clickedCellIndex] !== "" || !gameActive) {
        return;
      }

gameState[clickedCellIndex] = currentPlayer === 1 ? player1Pictogram : player2Pictogram;
      clickedCell.innerText = gameState[clickedCellIndex];

checkGameResult();
      currentPlayer = currentPlayer === 1 ? 2 : 1;
    }

// Check if the game has a winner or ended in a tie
    function checkGameResult() {
      let roundWon = false;
      for (let i = 0; i < winningCombinations.length; i++) {
        const [a, b, c] = winningCombinations[i];
        const cellA = gameState[a];
        const cellB = gameState[b];
        const cellC = gameState[c];
        if (cellA === '' || cellB === '' || cellC === '') {
          continue;
        }
        if (cellA === cellB && cellB === cellC) {
          roundWon = true;
          break;
        }
      }

if (roundWon) {
        gameActive = false;
        document.querySelector('.message').innerText = 'Player ' + currentPlayer + ' wins!';
        return;
      }

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

// Initialize the game
    function initializeGame() {
      renderBoard();
    }

initializeGame();
  </script>
</body>
</html>
```

Note: The game logic and visual presentation are included within a single HTML file for simplicity. However, in a real-world scenario, it's recommended to separate the game logic into separate JavaScript files and utilize proper CSS stylesheets for better maintainability and organization.