WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Estructura HTML del juego Tres en raya
309
iroger7
Abrir en el editor
Video
Publica tu código
0
Recomendado
27 October 2024
Sitio de juego agrietado público Cualquiera puede publicar
12 December 2025
Ejemplo de barra de navegación HTML CSS: Menú horizontal adaptable
7 May 2024
Plantilla de sitio web de presentaciones HTML y CSS
HTML
Copy
Tic Tac Toe Game
Tic Tac Toe
Restart Game
CSS
Copy
body { font-family: Arial, sans-serif; text-align: center; background: #f0f0f0; margin: 0; padding: 20px; } h1 { color: #333; } #game { display: grid; gap: 5px; grid-template-columns: repeat(3, 100px); margin: 20px auto; width: 310px; } .cell { width: 100px; height: 100px; background: #fff; border: 2px solid #333; font-size: 2em; line-height: 100px; cursor: pointer; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
JS
Copy
const cells = document.querySelectorAll('.cell'); const restartButton = document.getElementById('restartButton'); 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] ]; let isXTurn = true; let gameActive = true; const checkWin = (player) => { return winningCombinations.some(combination => combination.every(index => cells[index].textContent === player) ); }; const checkDraw = () => { return [...cells].every(cell => cell.textContent !== ''); }; const handleClick = (e) => { const cell = e.target; if (cell.textContent !== '' || !gameActive) return; cell.textContent = isXTurn ? 'X' : 'O'; if (checkWin(cell.textContent)) { alert(`${cell.textContent} wins!`); gameActive = false; return; } if (checkDraw()) { alert("It's a draw!"); gameActive = false; return; } isXTurn = !isXTurn; }; cells.forEach(cell => { cell.addEventListener('click', handleClick); }); restartButton.addEventListener('click', () => { cells.forEach(cell => { cell.textContent = ''; }); isXTurn = true; gameActive = true; });