HTML Editor

Edita código
		
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pasapalabra Mejorado</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(to bottom right, #e0eafc, #cfdef3);
        }
        #game-container {
            text-align: center;
            background: linear-gradient(to bottom, #ffffff, #f7f9fc);
            padding: 10px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            max-width: 800px;
            width: 100%;
            position: relative;
        }
        #rosco {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            position: relative;
            background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
        }
        .letra {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4169E1, #1E90FF);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 22px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            border: 2px solid white;
        }
        .letra.actual {
            border-color: brown;
            z-index: 10;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
        }
        .letra.acierto {
            background: linear-gradient(135deg, #32CD32, #228B22);
        }
        .letra.fallo {
            background: linear-gradient(135deg, #FF6347, #DC143C);
        }
        #marcador {
            background: linear-gradient(to right, #1E90FF, #00BFFF);
            border-radius: 10px;
            padding: 0px;
            margin: 10px auto;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            width: 200px;
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            font-size: 1.5em; /* Aumenta el tamaño de letra del marcador */
            color: white;
        }
        #pregunta-container {
            margin: 5px 0;
            padding: 5px;
            background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            border: 2px outset #999;
            font-size: 18px;
        }
        button {
            margin: 10px;
            padding: 6px 12px;
            font-size: 16px;
            cursor: pointer;
            background: linear-gradient(to bottom, #4CAF50, #45a049);
            color: white;
            border: none;
            border-radius: 5px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        button:hover {
            background: linear-gradient(to bottom, #45a049, #4CAF50);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        #pasapalabra-button {
            background: linear-gradient(to right, #00f, #1E90FF);
            color: white;
            border-radius: 5px;
        }
        #continuar-button {
            background: linear-gradient(to bottom, #FF4500, #FF6347);
            color: white;
            border-radius: 5px;
            display: none;
        }
        input[type="text"] {
            padding: 8px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 5px;
            margin-right: 10px;
            transition: border-color 0.3s ease;
        }
        input[type="text"]:focus {
            border-color: #4CAF50;
            outline: none;
        }
        #respuesta-correcta-container {
            margin-top: 10px;
            font-weight: bold;
            color: #4CAF50;
            padding: 5px;
            background-color: #E8F5E9;
            border-radius: 5px;
            border: 2px outset #999;
            display: none;
            font-size: 18px;
        }
        #mensaje-final {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
            color: #333;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        #titulo-juego {
            font-size: 32px;
            margin-bottom: 10px;
            color: #1E90FF;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <h1 id="titulo-juego">Pasapalabra</h1>
        <div id="rosco">
            <button onclick="comenzarJuego()">Comenzar</button>
        </div>

        <div id="marcador" style="display:none;">
            <div id="aciertos">Aciertos: 0</div>
            <div id="fallos">Fallos: 0</div>
            <div id="tiempo">Tiempo: 150s</div>
        </div>

        <div id="pregunta-container" style="display:none;">
            <div id="pregunta"></div>
            <input type="text" id="respuesta" placeholder="Tu respuesta">
            <button onclick="verificarRespuesta()">Responder</button>
            <button id="pasapalabra-button" onclick="pasarPalabra()">Pasapalabra</button>
            <button id="continuar-button" onclick="continuarJuego()">Continuar</button>
            <div id="respuesta-correcta-container"></div>
        </div>

        <div id="mensaje-final"></div>
    </div>

    <audio id="audioInicio" src="inicio.mp3"></audio>
    <audio id="audioAcierto" src="acierto.mp3"></audio>
    <audio id="audioFallo" src="fallo.mp3"></audio>
    <audio id="sonido-pasapalabra" src="pasapalabra.mp3" preload="auto"></audio>
    <audio id="audioContinuar" src="continuar.mp3"></audio>
    <audio id="audioTiempo" src="tiempo.mp3"></audio>
    <audio id="audioExitoTotal" src="exito_total.mp3"></audio>
    <audio id="audioRoscoTerminado" src="rosco_terminado.mp3"></audio>

    <script>
const letras = 'ABCDEFGHIJLMNÑOPQRSTUVXYZ'.split('');
const preguntasRespuestas = {
    "A": { "pregunta": "Empieza por A: Hucha.", "respuesta": "Alcancía" },
    "B": { "pregunta": "Empieza por B: Tercera medalla de una competición.", "respuesta": "Bronce" },
    "C": { "pregunta": "Empieza por C: Residencia en la que viven las personas.", "respuesta": "Casa" },
    "D": { "pregunta": "Empieza por D: Sin ropa.", "respuesta": "Desnudo" },
    "E": { "pregunta": "Empieza por E: Cuerpo geométrico en 3D sin aristas.", "respuesta": "Esfera" },
    "F": { "pregunta": "Empieza por F: Proceso biológico de las plantas para captar energía del sol.", "respuesta": "Fotosíntesis" },
    "G": { "pregunta": "Empieza por G: Mamifero que se dice que tiene 7 vidas.", "respuesta": "Gato" },
    "H": { "pregunta": "Empieza por H: Respecto a ti, hijo de tu padre y madre.", "respuesta": "Hermano" },
    "I": { "pregunta": "Empieza por I: Pais con capital en Roma", "respuesta": "Italia" },
    "J": { "pregunta": "Empieza por J: En el critianismo nombre propio de mesias.", "respuesta": "Jesús" },
    "L": { "pregunta": "Empieza por L: Fruto de color amarillo, ácido, utilizado en limonada.", "respuesta": "Limón" },
    "M": { "pregunta": "Empieza por M: Cantidad de materia que tiene un cuerpo.", "respuesta": "Masa" },
    "N": { "pregunta": "Empieza por N: Jamas.", "respuesta": "Nunca" },
    "Ñ": { "pregunta": "Contiene la Ñ: Piedra grande", "respuesta": "Peñasco" },
    "O": { "pregunta": "Empieza por O: Plantogrado.", "respuesta": "Oso" },
    "P": { "pregunta": "Empieza por P: Extremo inferior del cuerpo humano.", "respuesta": "Pie" },
    "Q": { "pregunta": "Empieza por Q: Persona amada", "respuesta": "Querida" },
    "R": { "pregunta": "Empieza por R: Sistema de comunicación que usa ondas electromagnéticas.", "respuesta": "Radio" },
    "S": { "pregunta": "Empieza por S: Sin compañía.", "respuesta": "Sola" },
    "T": { "pregunta": "Empieza por T: Recipiente para tomar café", "respuesta": "Taza" },
    "U": { "pregunta": "Empieza por U: Primer número natural.", "respuesta": "Uno" },
    "V": { "pregunta": "Empieza por V: Día de la semana que sigue al jueves.", "respuesta": "Viernes" },
    "X": { "pregunta": "Empieza por X: Elemento químico de símbolo Xe.", "respuesta": "Xenon" },
    "Y": { "pregunta": "Empieza por Y: Primera persona del singular.", "respuesta": "Yo" },
    "Z": { "pregunta": "Empieza por Z: Animal de la familia vulpes.", "respuesta": "Zorro" }
};

let letraActual = 0;
let aciertos = 0;
let fallos = 0;
let tiempoRestante = 150;
let timer;
let letrasRespondidas = new Set();
let letrasRespondidasCorrectamente = new Set();
let letrasFalladas = new Set();

function comenzarJuego() {
    document.getElementById('audioInicio').play();
    crearRosco();
    mostrarPregunta();
    iniciarTemporizador();
    document.querySelector('#rosco button').style.display = 'none';
    document.getElementById('marcador').style.display = 'block';
    document.getElementById('pregunta-container').style.display = 'block';
    document.getElementById('titulo-juego').style.display = 'none';
    letrasRespondidasCorrectamente.clear();
    letrasFalladas.clear();
}

function crearRosco() {
    const rosco = document.getElementById('rosco');
    letras.forEach((letra, index) => {
        const angulo = (index * 360 / letras.length + 270) % 360;
        const x = 250 + 220 * Math.cos(angulo * Math.PI / 180);
        const y = 250 + 220 * Math.sin(angulo * Math.PI / 180);
        const letraElement = document.createElement('div');
        letraElement.className = 'letra';
        letraElement.textContent = letra;
        letraElement.style.left = `${x - 25}px`;
        letraElement.style.top = `${y - 25}px`;
        rosco.appendChild(letraElement);
    });
}

function mostrarPregunta() {
    const letrasElements = document.querySelectorAll('.letra');
    letrasElements[letraActual].classList.add('actual');
    const letraActualChar = letras[letraActual];
    const pregunta = preguntasRespuestas[letraActualChar].pregunta;
    document.getElementById('pregunta').textContent = pregunta;
    document.getElementById('respuesta').value = '';
    document.getElementById('respuesta-correcta-container').style.display = 'none';
    // Eliminamos document.getElementById('respuesta').focus(); de aquí
}

function normalizeString(str) {
    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}

function verificarRespuesta() {
    const respuesta = normalizeString(document.getElementById('respuesta').value.toLowerCase().trim());
    const letraActualChar = letras[letraActual];
    const respuestaCorrecta = normalizeString(preguntasRespuestas[letraActualChar].respuesta.toLowerCase());
    const letraElement = document.querySelectorAll('.letra')[letraActual];

    if (respuesta === respuestaCorrecta) {
        aciertos++;
        document.getElementById('aciertos').textContent = `Aciertos: ${aciertos}`;
        letraElement.classList.add('acierto');
        document.getElementById('audioAcierto').play();
        letrasRespondidasCorrectamente.add(letras[letraActual]);
        if (aciertos === 25) {
            finalizarRosco();
        } else {
            pasarASiguientePregunta();
        }
    } else {
        fallos++;
        document.getElementById('fallos').textContent = `Fallos: ${fallos}`;
        letraElement.classList.add('fallo');
        detenerTemporizador();
        mostrarRespuestaCorrecta();
        desactivarBotonResponder();
        mostrarBotonContinuar();
        letrasFalladas.add(letras[letraActual]);
        desactivarCampoRespuesta(); 
        if (aciertos + fallos === 25) {
            finalizarRosco();
        }
    }

    letrasRespondidas.add(letras[letraActual]);
    resetearTamanoLetra(letraElement);
}

function desactivarBotonResponder() {
    const responderButton = document.querySelector('button[onclick="verificarRespuesta()"]');
    responderButton.disabled = true;
    responderButton.style.background = '#ccc';
    responderButton.style.cursor = 'not-allowed';
}

function resetearTamanoLetra(letraElement) {
    setTimeout(() => {
    }, 300);
}

function mostrarRespuestaCorrecta() {
    const respuestaCorrectaContainer = document.getElementById('respuesta-correcta-container');
    respuestaCorrectaContainer.textContent = `Respuesta correcta: ${preguntasRespuestas[letras[letraActual]].respuesta}`;
    respuestaCorrectaContainer.style.display = 'block';
    document.getElementById('audioFallo').play();
}

function mostrarBotonContinuar() {
    document.getElementById('pasapalabra-button').style.display = 'none';
    document.getElementById('continuar-button').style.display = 'inline-block';
    desactivarCampoRespuesta(); 
}

function pasarPalabra() {
    const sonidoPasapalabra = document.getElementById('sonido-pasapalabra');
    sonidoPasapalabra.play();
    const letrasElements = document.querySelectorAll('.letra');
    letrasElements[letraActual].classList.remove('actual');

    let siguienteLetra = (letraActual + 1) % letras.length;

    
    while (letrasRespondidasCorrectamente.has(letras[siguienteLetra]) || letrasFalladas.has(letras[siguienteLetra])) {
        siguienteLetra = (siguienteLetra + 1) % letras.length;
        if (siguienteLetra === letraActual) {
            
            finalizarRosco();
            return;
        }
    }

    letraActual = siguienteLetra;
    letrasElements[letraActual].classList.add('actual');
    document.getElementById('respuesta').value = '';
    mostrarPregunta();
}

function continuarJuego() {
    iniciarTemporizador();
    document.getElementById('audioContinuar').play();
    document.getElementById('continuar-button').style.display = 'none';
    document.getElementById('pasapalabra-button').style.display = 'inline-block';
    const responderButton = document.querySelector('button[onclick="verificarRespuesta()"]');
    responderButton.disabled = false;
    responderButton.style.background = ''; 
    responderButton.style.cursor = 'pointer';
    document.getElementById('respuesta').value = '';
    pasarASiguientePregunta(); 
    reactivarCampoRespuesta();
    document.getElementById('respuesta').focus(); // Lo ponemos aquí para que se ejecute después de reactivarCampoRespuesta()
}

function pasarASiguientePregunta() {
    const letrasElements = document.querySelectorAll('.letra');
    letrasElements[letraActual].classList.remove('actual');

    
    let siguienteLetra = (letraActual + 1) % letras.length;

    
    while (letrasRespondidasCorrectamente.has(letras[siguienteLetra]) || letrasFalladas.has(letras[siguienteLetra])) {
        siguienteLetra = (siguienteLetra + 1) % letras.length;

        
        if (siguienteLetra === 0 && letrasRespondidasCorrectamente.size === letras.length) {
            finalizarRosco();
            return;
        }
    }

    
    letraActual = siguienteLetra;

    
    if (letraActual === 0 && letrasRespondidasCorrectamente.size === letras.length) {
        letrasRespondidas.clear();
    }

    letrasElements[letraActual].classList.add('actual');
    mostrarPregunta();
}

function iniciarTemporizador() {
    timer = setInterval(() => {
        tiempoRestante--;
        document.getElementById('tiempo').textContent = `Tiempo: ${tiempoRestante}s`;
        if (tiempoRestante <= 0) {
            clearInterval(timer);
            document.getElementById('audioTiempo').play();
            finalizarRosco();
        }
    }, 1000);
}

function detenerTemporizador() {
    clearInterval(timer);
}

function finalizarRosco() {
    detenerTemporizador();
    document.getElementById('pregunta-container').style.display = 'none';
    document.getElementById('pasapalabra-button').style.display = 'none'; // Ocultar botón Pasapalabra
    document.getElementById('continuar-button').style.display = 'none';  // Ocultar botón Continuar

    if (aciertos === 25) {
        document.getElementById('mensaje-final').textContent = '¡Rosco completado con éxito!';
        document.getElementById('audioExitoTotal').play();
    } else if (aciertos + fallos === 25) {
        document.getElementById('mensaje-final').textContent = 'Rosco completado';
        document.getElementById('audioRoscoTerminado').play();
    } else {
        document.getElementById('mensaje-final').textContent = 'Tiempo terminado';
        document.getElementById('audioRoscoTerminado').play(); 
    }

    desactivarBotones();
    desactivarCampoRespuesta(); 
}

function desactivarBotones() {
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
        button.disabled = true;
        button.style.background = '#ccc';
        button.style.cursor = 'not-allowed';
    });
}

function desactivarCampoRespuesta() {
    const campoRespuesta = document.getElementById('respuesta');
    campoRespuesta.disabled = true;
    campoRespuesta.style.background = '#ccc';
    campoRespuesta.style.cursor = 'not-allowed';
}

function reactivarCampoRespuesta() {
    const campoRespuesta = document.getElementById('respuesta');
    campoRespuesta.disabled = false;
    campoRespuesta.style.background = '';
    campoRespuesta.style.cursor = 'text';
}
    </script>
</body>
</html>