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

No:13632

Un boton traductor de español a ingles sin apis, p..ALL
Developer User5971｜Date and time 23/8/29 4:52:51
Build time 19.71 sec｜Game capacity 4.453KB｜

Script

Tres en Raya

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

#container {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

#game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

.cell {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            cursor: pointer;
        }

#message {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="container">
    <h1>Tres en Raya</h1>
    <div id="game-board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <p id="message"></p>
    <button id="restart-btn">Reiniciar</button>
</div>

// Obtener elementos del DOM
    const celdas = document.getElementsByClassName('cell');
    const mensajeElemento = document.getElementById('message');
    const reiniciarBoton = document.getElementById('restart-btn');

// Asignar evento click a cada celda
    Array.from(celdas).forEach((celda) => {
        celda.addEventListener('click', gestionarMovimiento);
    });

// Asignar evento click al botón de reiniciar
    reiniciarBoton.addEventListener('click', reiniciarJuego);

// Función para gestionar el movimiento del jugador
    function gestionarMovimiento(evento) {
        const celdaSeleccionada = evento.target;
        
        // Verificar si la celda ya está ocupada
        if (celdaSeleccionada.textContent !== '') {
            return;
        }
        
        // Marcar la celda con el símbolo del jugador actual
        celdaSeleccionada.textContent = turno;

// Verificar si el jugador actual ha ganado
        if (verificarGanador(turno)) {
            mostrarMensaje(`${turno} ¡Ha ganado!`);
            desactivarCeldas();
            return;
        }
        
        // Cambiar el turno al siguiente jugador
        turno = (turno === jugador1) ? jugador2 : jugador1;
        
        // Verificar si hay un empate
        if (verificarEmpate()) {
            mostrarMensaje('¡Empate!');
            desactivarCeldas();
        }
    }

// Función para verificar si un jugador ha ganado
    function verificarGanador(jugador) {
        // Combinaciones ganadoras
        const combinaciones = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
        ];

// Verificar si alguna combinación contiene todas las celdas marcadas por el jugador actual
        return combinaciones.some(combination => {
            return combination.every(index => {
                return celdas[index].textContent === jugador;
            });
        });
    }

// Función para verificar si hay un empate
    function verificarEmpate() {
        return Array.from(celdas).every(celda => {
            return celda.textContent !== '';
        });
    }

// Función para mostrar un mensaje en la interfaz
    function mostrarMensaje(mensaje) {
        mensajeElemento.textContent = mensaje;
    }

// Función para desactivar las celdas
    function desactivarCeldas() {
        Array.from(celdas).forEach((celda) => {
            celda.style.pointerEvents = 'none';
        });
    }

// Función para reiniciar el juego
    function reiniciarJuego() {
        // Limpiar los contenidos de las celdas
        Array.from(celdas).forEach((celda) => {
            celda.textContent = '';
            celda.style.pointerEvents = 'auto';
        });
        
        // Reiniciar el turno y el mensaje
        turno = jugador1;
        mensajeElemento.textContent = '';
    }
</script>
</body>
</html>