Juego de Adivinanza: Programación con Estructuras Condicionales

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:36

Juego de Adivinanza: Programación con Estructuras Condicionales

Curso de Fundamentos de JavaScript

Clase 13 de 55

Clase 13 / 55

Recursos

Aprender a tomar decisiones dentro del código es una de las bases más importantes de la programación. A través de un juego sencillo pero efectivo, se construye paso a paso una lógica que permite generar un número aleatorio, capturar la respuesta del usuario y validar si adivinó o no. Todo esto usando estructuras condicionales en JavaScript.

¿Cómo generar un número aleatorio con Math.random y Math.floor?

Para que el juego funcione, lo primero es crear un número secreto que cambie cada vez que se ejecuta el programa. Esto se logra combinando dos métodos nativos de JavaScript [0:27]:

Math.random(): genera un número decimal aleatorio entre 0 y 1.
Math.floor(): redondea hacia abajo el resultado para obtener un número entero.

La constante se declara así:

javascript const numeroSecreto = Math.floor(Math.random() * 10) + 1;

Con esta línea, el programa produce un número entero aleatorio del 1 al 10 cada vez que se recarga la página. La combinación de ambos métodos es una técnica muy común cuando necesitas valores al azar dentro de un rango específico.

¿Cómo capturar la respuesta del jugador con prompt y parseInt?

Una vez definido el número secreto, se necesita que el usuario ingrese su intento. Para eso se utiliza prompt, que abre una ventana en el navegador donde el jugador puede escribir su respuesta [1:07]:

javascript const numeroJugador = parseInt(prompt("Adivina el número secreto entre el 1 al 10"));

El método parseInt es fundamental aquí porque el prompt siempre devuelve un string (texto). Al envolverlo con parseInt, se convierte ese texto en un número entero, lo cual es necesario para que las comparaciones funcionen correctamente.

Para verificar visualmente el valor ingresado, se agrega un console.log [1:42]:

javascript console.log("Este es el número con el que juegas:", numeroJugador);

¿Cómo funciona la estructura if, else if y else en este juego?

Aquí entra el corazón del ejercicio: la ejecución condicional. Dependiendo de la relación entre el número del jugador y el número secreto, el programa ejecuta un bloque de código diferente [2:14].

¿Qué pasa si el jugador adivina?

La primera condición compara ambos valores usando el operador de igualdad estricta (===), que valida tanto el valor como el tipo de dato:

javascript if (numeroJugador === numeroSecreto) { console.log("¡Felicidades! Adivinaste el número secreto"); }

Si coinciden, el jugador gana y recibe un mensaje de felicitación [2:30].

¿Qué ocurre si el número es muy bajo o muy alto?

Cuando el jugador no adivina, se utilizan las ramas else if y else para dar retroalimentación útil [3:48]:

javascript else if (numeroJugador < numeroSecreto) { console.log("El número es demasiado bajo. Intenta de nuevo"); } else { console.log("El número es demasiado alto. Intenta de nuevo"); }

Si el número del jugador es menor que el secreto, se le indica que su intento fue bajo.
El bloque else actúa como un caso default: si no es igual ni menor, entonces es mayor.

Una variante mencionada es agregar un else if adicional para validar si el número está fuera del rango del 1 al 10, y reservar el else para un mensaje genérico [4:38].

¿Por qué es importante practicar con ejecución condicional?

La estructura if / else if / else permite que el programa tome decisiones dinámicas basándose en la comparación de valores. En este ejercicio los resultados son simples mensajes en consola, pero esta misma lógica se aplica a validaciones de formularios, control de acceso, flujos de pago y cualquier situación donde el comportamiento dependa de una condición [5:48].

Puntos clave para recordar:

Usa === para comparaciones estrictas que incluyan tipo de dato.
Combina Math.floor y Math.random para generar enteros aleatorios.
Envuelve el prompt con parseInt para trabajar con números reales.
El bloque else siempre captura cualquier caso no contemplado.

Si quieres llevar este juego más lejos, intenta agregar un ciclo que permita múltiples intentos o un contador de oportunidades. Comparte en los comentarios cómo lo resolviste.

Calvin Rafael Bobadilla Fernandez

Hace 2 años

Aca mi version!!

Le hice algunos cambios, le agregue html y css para que se vea mejor y en vez de que sea del 1 al 10, ahora es hasta el 100.

CODE:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adivina el Número!</title>
    <style>

            :root {
            --Azul-oscuro: #282185;
            --Amarillo-anaranjado: #fcba3e;
            --Blanco: #f8f7f9;
            --Azul: #2f2692;
            --Marrón-claro: #9b8278;
        }

        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
            display: grid;
            place-items: center;
            background-color: var(--Azul-oscuro);
        }
        #game {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid var(--Amarillo-anaranjado);
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: var(--Azul);
            color: var(--Blanco);
        }
        input[type="number"] {
            width: 50px;
            padding: 5px;
            margin-right: 10px;
        }
        input[type="button"] {
            padding: 5px 10px;
        }
        #message {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="game">
        <h2>Adivina el Número</h2>
        <p>Adivina un número entre 1 y 100</p>
        <label for="game">
        <input type="number" id="guess" min="1" max="100">

        <input type="button" value="Guess!" onclick="checkGuess()">
    </label>
        <p id="message"></p>
    </div>

    <script>
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;

        function checkGuess() {
            let userGuess = document.getElementById('guess').value;
            let message = document.getElementById('message');
            attempts++;

            if (userGuess == randomNumber) {
                message.textContent = `¡Felicidades! Adivinaste el número en ${attempts} intentos.`;
                message.style.color = 'green';
                resetGame();
            } else if (userGuess > randomNumber) {
                message.textContent = 'Tu suposición es demasiado alta.';
                message.style.color = 'red';
            } else if (userGuess < randomNumber) {
                message.textContent = 'Tu suposición es demasiado baja.';
                message.style.color = 'red';
            } 
        }

        function resetGame() {
            randomNumber = Math.floor(Math.random() * 100) + 1;
            attempts = 0;
        }
    </script>
</body>
</html>

Andres Felipe Hernandez Anaya

Hace 2 años

Pura inteligencia artificial se nota.

Eugenia Maldonado

Hace un año

muy bueno

Comentarios (121)121 comentarios

Wilbort Encomenderos Ruiz

francisco porro

Juan Pablo Avila

Wilbertson Mojica Cifuentes

Pablo Diaz

César Augusto López Sierra

Nicolás Duque

Julio Cardenas

Gabriel Muñoz Castro

José Ignacio León

JYCC CONSULTORES

HOHN EDWAR DIAZ

Yudy Mildret Jame Moreno

Michael Crespo

Diana Briseidy Robles García

Aitor Garcia Ramos

Ana Rotela Cabrera

Viviana Díaz Duran

Marlon Melara

Santiago Heredia

Jonathan Lozano Alcalá

Jonathan Camilo Bernal Aldana

Johan Mauricio Durán Vargas

Hace 9 meses

luis jara

Proyectos IT Globers

Zain Abimael Barradas Mendoza

Hace 8 meses

Daniel Fernando Reyes Vasquez

Oscar Andres Ramos Lopez

Fabián Romero

Brad Velasquez

Claudio Gonzalo Vega

Daniel Jose Recinos Chavarria

Adrián Loaiza Carmona

Adrián Felipe Bejarano Castaño

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales