<div class="container">
    <h1>Adivina el Número</h1>
    <p>Estoy pensando en un número entre 1 y 100. ¡Intenta adivinarlo!</p>
    <div class="game-area">
        <input type="number" id="guessInput" placeholder="Introduce tu número">
        <button id="checkButton">Comprobar</button>
    </div>
    <p id="message"></p>
    <button id="resetButton" style="display: none;">Jugar de nuevo</button>
</div>

<script>
    // Asegura que el DOM (Document Object Model) esté completamente cargado antes de ejecutar el script
    document.addEventListener('DOMContentLoaded', () => {
        // Seleccionar elementos del DOM por su ID
        const guessInput = document.getElementById('guessInput');
        const checkButton = document.getElementById('checkButton');
        const messageDisplay = document.getElementById('message');
        const resetButton = document.getElementById('resetButton');

        let randomNumber; // Variable para almacenar el número aleatorio a adivinar
        let attempts = 0; // Contador de intentos del jugador
        const maxAttempts = 10; // Número máximo de intentos permitidos

        // Función para iniciar un nuevo juego
        function newGame() {
            // Genera un número aleatorio entre 1 y 100 (incluidos)
            randomNumber = Math.floor(Math.random() * 100) + 1;
            attempts = 0; // Reinicia el contador de intentos
            messageDisplay.textContent = ''; // Borra cualquier mensaje anterior
            guessInput.value = ''; // Borra el valor del campo de entrada
            guessInput.disabled = false; // Habilita el campo de entrada
            checkButton.disabled = false; // Habilita el botón de comprobar
            resetButton.style.display = 'none'; // Oculta el botón de reiniciar juego
            // console.log('Número a adivinar (solo para depuración):', randomNumber); // Línea para depuración, puedes eliminarla
        }

        // Función para comprobar la adivinanza del usuario
        function checkGuess() {
            const userGuess = parseInt(guessInput.value); // Obtiene el valor del input y lo convierte a número entero

            // Validación de la entrada del usuario
            if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
                messageDisplay.textContent = 'Por favor, introduce un número válido entre 1 y 100.';
                messageDisplay.style.color = 'orange'; // Mensaje de error en color naranja
                return; // Sale de la función si la entrada no es válida
            }

            attempts++; // Incrementa el contador de intentos

            // Comprueba si la adivinanza es correcta
            if (userGuess === randomNumber) {
                messageDisplay.textContent = `¡Felicidades! Adivinaste el número ${randomNumber} en ${attempts} intentos.`;
                messageDisplay.style.color = 'green'; // Mensaje de éxito en color verde
                endGame(); // Termina el juego
            } else if (attempts >= maxAttempts) { // Comprueba si se agotaron los intentos
                messageDisplay.textContent = `¡Se acabaron los intentos! El número era ${randomNumber}.`;
                messageDisplay.style.color = 'red'; // Mensaje de derrota en color rojo
                endGame(); // Termina el juego
            } else if (userGuess < randomNumber) { // La adivinanza es demasiado baja
                messageDisplay.textContent = `Demasiado bajo. Intento ${attempts} de ${maxAttempts}. ¡Intenta de nuevo!`;
                messageDisplay.style.color = 'blue'; // Mensaje de pista en color azul
            } else { // La adivinanza es demasiado alta
                messageDisplay.textContent = `Demasiado alto. Intento ${attempts} de ${maxAttempts}. ¡Intenta de nuevo!`;
                messageDisplay.style.color = 'blue'; // Mensaje de pista en color azul
            }
        }

        // Función para finalizar el juego
        function endGame() {
            guessInput.disabled = true; // Deshabilita el campo de entrada
            checkButton.disabled = true; // Deshabilita el botón de comprobar
            resetButton.style.display = 'block'; // Muestra el botón de reiniciar juego
        }

        // Configuración de los "Event Listeners"
        // Cuando se hace clic en el botón "Comprobar", se ejecuta la función checkGuess
        checkButton.addEventListener('click', checkGuess);

        // Cuando se presiona una tecla en el campo de entrada, si es "Enter", se ejecuta checkGuess
        guessInput.addEventListener('keypress', (event) => {
            if (event.key === 'Enter') {
                checkGuess();
            }
        });

        // Cuando se hace clic en el botón "Jugar de nuevo", se ejecuta la función newGame
        resetButton.addEventListener('click', newGame);

        // Inicia un nuevo juego cuando la página se carga por primera vez
        newGame();
    });
</script>