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

No:50887

Un juego simple de TIC TAC toe con un fondo rojo
Developer User21437｜Date and time 24/3/10 5:06:53
Build time 8.108 sec｜Game capacity 2.302KB｜

Script

Juego de TIC TAC TOE

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>TIC TAC TOE</title>
</head>
<body style="background-color: red;">
  <h1>Juego de TIC TAC TOE</h1>
  <div id="game-board" style="display: flex; flex-wrap: wrap; width: 300px;"></div>
  
  <script>
    let currentPlayer = 'X';
    let gameBoard = ['', '', '', '', '', '', '', '', ''];
    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]
    ];

const gameBoardElement = document.getElementById('game-board');

function handleClick(index) {
      if (gameBoard[index] !== '' || checkWinner()) {
        return;
      }

gameBoard[index] = currentPlayer;
      render();
      
      if (checkWinner()) {
        setTimeout(() => {
          alert('¡' + currentPlayer + ' ha ganado!');
          resetGame();
        }, 100);
      } else if (!gameBoard.includes('')) {
        setTimeout(() => {
          alert('¡Empate!');
          resetGame();
        }, 100);
      } else {
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
      }
    }

function render() {
      gameBoardElement.innerHTML = '';
      gameBoard.forEach((cell, index) => {
        const cellElement = document.createElement('div');
        cellElement.style.width = '100px';
        cellElement.style.height = '100px';
        cellElement.style.border = '1px solid black';
        cellElement.style.display = 'flex';
        cellElement.style.justifyContent = 'center';
        cellElement.style.alignItems = 'center';
        cellElement.style.fontSize = '2em';
        cellElement.style.cursor = 'pointer';
        cellElement.textContent = cell;
        cellElement.addEventListener('click', () => handleClick(index));
        gameBoardElement.appendChild(cellElement);
      });
    }

function resetGame() {
      gameBoard = ['', '', '', '', '', '', '', '', ''];
      render();
    }

render();
  </script>
</body>
</html>