Juego de adivinar el número
- AGR
- Web , Programación
- 15 Feb, 2025
Proyecto: Juego de Adivinar el Número
Objetivo
Crear un juego interactivo en el que el usuario debe adivinar un número aleatorio entre 1 y 100. El juego brindará retroalimentación indicando si el número ingresado es mayor, menor o correcto, y mostrará la cantidad de intentos realizados.
Paso 1: Preparar el Entorno
-
Crear la carpeta del proyecto:
Nómbrala, por ejemplo,juego_adivina_numero. -
Dentro de la carpeta, crear los siguientes archivos:
index.htmlstyles.cssscript.js
-
Abrir los archivos en tu editor de código favorito.
Paso 2: Estructura HTML
En el archivo index.html, coloca la siguiente estructura básica que incluye la interfaz del juego:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego: Adivina el Número</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Juego: Adivina el Número</h1>
</header>
<section>
<p>Adivina el número entre 1 y 100:</p>
<input type="number" id="guess" placeholder="Ingresa tu número">
<button id="guessBtn">Adivinar</button>
<p id="result"></p>
<p id="attempts"></p>
</section>
<script src="script.js"></script>
</body>
</html>Explicación:
- Se crea una cabecera (
<header>) con el título del juego. - En la sección principal se coloca un párrafo con las instrucciones, un campo de entrada para el número, un botón para enviar el intento y dos párrafos para mostrar el resultado y el número de intentos.
- Se enlaza el archivo de estilos (
styles.css) y el script de JavaScript (script.js).
Paso 3: Agregar Estilos con CSS
En el archivo styles.css, agrega los siguientes estilos para mejorar la apariencia del juego:
/* Estilos generales */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
text-align: center;
}
/* Cabecera */
header {
background-color: #333;
color: #fff;
padding: 20px 0;
margin-bottom: 20px;
}
/* Sección del juego */
section {
background: #fff;
padding: 20px;
max-width: 500px;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Campo de entrada y botón */
input[type="number"] {
padding: 10px;
font-size: 16px;
width: 200px;
margin-right: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
/* Mensajes de resultado */
#result {
font-size: 18px;
margin-top: 20px;
}Explicación:
- Se establecen estilos generales para el cuerpo y se centra el contenido.
- La cabecera tiene un fondo oscuro y texto blanco.
- La sección del juego se destaca con fondo blanco, bordes redondeados y una sombra para darle profundidad.
- Se definen estilos para el campo de entrada y el botón, haciendo la interfaz clara y usable.
Paso 4: Lógica con JavaScript
En el archivo script.js, implementa la lógica del juego para generar un número aleatorio, recibir la entrada del usuario y brindar retroalimentación:
// Genera un número aleatorio entre 1 y 100
const numeroSecreto = Math.floor(Math.random() * 100) + 1;
let intentos = 0;
// Seleccionar elementos del DOM
const guessInput = document.getElementById('guess');
const guessBtn = document.getElementById('guessBtn');
const resultDisplay = document.getElementById('result');
const attemptsDisplay = document.getElementById('attempts');
// Función que se ejecuta al hacer clic en el botón
guessBtn.addEventListener('click', function() {
const guess = Number(guessInput.value);
intentos++;
// Validar que el número esté entre 1 y 100
if (!guess || guess < 1 || guess > 100) {
resultDisplay.textContent = 'Por favor, ingresa un número entre 1 y 100.';
return;
}
// Comparar el número ingresado con el número secreto
if (guess === numeroSecreto) {
resultDisplay.textContent = `¡Felicidades! Adivinaste el número en ${intentos} intentos.`;
guessBtn.disabled = true;
guessInput.disabled = true;
} else if (guess < numeroSecreto) {
resultDisplay.textContent = 'Demasiado bajo. Intenta nuevamente.';
} else if (guess > numeroSecreto) {
resultDisplay.textContent = 'Demasiado alto. Intenta nuevamente.';
}
attemptsDisplay.textContent = `Intentos: ${intentos}`;
guessInput.value = '';
guessInput.focus();
});Explicación:
- Se genera un número aleatorio entre 1 y 100 y se inicializa un contador de intentos.
- Se seleccionan los elementos necesarios del DOM para interactuar con el usuario.
- Al hacer clic en el botón, se captura el número ingresado y se valida que esté dentro del rango.
- Se compara el número ingresado con el número secreto:
- Si es igual, se muestra un mensaje de éxito y se deshabilitan el campo de entrada y el botón.
- Si es menor o mayor, se muestra un mensaje indicando si el número es “demasiado bajo” o “demasiado alto”.
- Se actualiza y muestra la cantidad de intentos realizados.
Paso 5: Probar y Mejorar el Juego
-
Abrir el archivo
index.htmlen el navegador:
Verifica que la interfaz se muestre correctamente y que el juego funcione como se espera. -
Probar el juego:
Ingresa diferentes números y observa la retroalimentación. Asegúrate de que el juego cuente correctamente los intentos y que el mensaje de acierto se muestre al adivinar el número correcto. -
Personalizar y Extender:
- Reiniciar el juego: Puedes agregar un botón “Reiniciar” para que el usuario pueda jugar nuevamente sin recargar la página.
- Agregar animaciones o efectos: Usa CSS para mejorar la experiencia visual, como transiciones o cambios de color.
- Guardar puntajes: Experimenta guardando el número de intentos en el almacenamiento local del navegador.
Guía Detallada del Juego de Adivinanzas
- Reiniciar el juego sin recargar la página.
- Guardar puntajes en el almacenamiento local del navegador.
Código Completo Mejorado
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Juego de Adivinanzas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Juego de Adivinanzas</h1>
<p>Intenta adivinar el número secreto entre 1 y 100.</p>
<div class="game">
<input type="number" id="guess" placeholder="Ingresa un número">
<button id="guessBtn">Adivinar</button>
<button id="resetBtn">Reiniciar</button>
</div>
<p id="result"></p>
<p id="attempts">Intentos: 0</p>
<p id="bestScore">Mejor puntaje: N/A</p>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
/* Estilos generales */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Contenedor principal */
.container {
background-color: #fff;
padding: 20px 40px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
text-align: center;
}
/* Encabezado */
h1 {
margin-bottom: 20px;
}
/* Sección del juego */
.game {
margin-bottom: 20px;
}
/* Estilos para el campo de entrada */
input[type="number"] {
width: 60%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
/* Estilos para los botones */
button {
padding: 8px 12px;
margin: 5px;
border: none;
background-color: #4285F4;
color: #fff;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #357ae8;
}
button:disabled {
background-color: #aaa;
cursor: not-allowed;
}
/* Estilos para los párrafos */
p {
margin-top: 10px;
}
script.js
// Genera un número aleatorio entre 1 y 100
let numeroSecreto = Math.floor(Math.random() * 100) + 1;
let intentos = 0;
// Seleccionar elementos del DOM
const guessInput = document.getElementById('guess');
const guessBtn = document.getElementById('guessBtn');
const resultDisplay = document.getElementById('result');
const attemptsDisplay = document.getElementById('attempts');
const resetBtn = document.getElementById('resetBtn');
const bestScoreDisplay = document.getElementById('bestScore');
// Función para actualizar el mejor puntaje en el DOM
function actualizarMejorPuntaje() {
const bestScore = localStorage.getItem('bestScore');
if (bestScore) {
bestScoreDisplay.textContent = `Mejor puntaje: ${bestScore} intentos`;
} else {
bestScoreDisplay.textContent = 'Mejor puntaje: N/A';
}
}
// Función que se ejecuta al hacer clic en el botón de adivinar
guessBtn.addEventListener('click', function() {
const guess = Number(guessInput.value);
intentos++;
// Validar que el número esté entre 1 y 100
if (!guess || guess < 1 || guess > 100) {
resultDisplay.textContent = 'Por favor, ingresa un número entre 1 y 100.';
return;
}
// Comparar el número ingresado con el número secreto
if (guess === numeroSecreto) {
resultDisplay.textContent = `¡Felicidades! Adivinaste el número en ${intentos} intentos.`;
guessBtn.disabled = true;
guessInput.disabled = true;
// Guardar puntaje en localStorage si es el mejor (menos intentos)
const bestScore = localStorage.getItem('bestScore');
if (!bestScore || intentos < Number(bestScore)) {
localStorage.setItem('bestScore', intentos);
}
actualizarMejorPuntaje();
} else if (guess < numeroSecreto) {
resultDisplay.textContent = 'Demasiado bajo. Intenta nuevamente.';
} else if (guess > numeroSecreto) {
resultDisplay.textContent = 'Demasiado alto. Intenta nuevamente.';
}
// Actualizar el contador de intentos y limpiar el campo de entrada
attemptsDisplay.textContent = `Intentos: ${intentos}`;
guessInput.value = '';
guessInput.focus();
});
// Función para reiniciar el juego
function reiniciarJuego() {
numeroSecreto = Math.floor(Math.random() * 100) + 1;
intentos = 0;
guessBtn.disabled = false;
guessInput.disabled = false;
resultDisplay.textContent = '';
attemptsDisplay.textContent = 'Intentos: 0';
guessInput.value = '';
guessInput.focus();
}
// Agregar el evento al botón de reiniciar
resetBtn.addEventListener('click', reiniciarJuego);
// Actualizar el mejor puntaje al cargar la página
actualizarMejorPuntaje();
Explicación Detallada del Código
1. Generación del Número Secreto
- Código:
let numeroSecreto = Math.floor(Math.random() * 100) + 1; - Explicación:
Se genera un número aleatorio entre 1 y 100 utilizandoMath.random(). La funciónMath.floorredondea hacia abajo el resultado y se le suma 1 para asegurarse de que el rango sea de 1 a 100.
2. Variables y Selección de Elementos del DOM
- Variables principales:
intentos: Inicializado en 0 para contar la cantidad de intentos.
- Selección de elementos:
Se obtienen referencias a los elementos HTML necesarios usandodocument.getElementById:guessInput\: Campo de entrada para el número que ingresa el usuario.guessBtn\: Botón que el usuario presiona para enviar su conjetura.resultDisplay\: Área de la página donde se muestra el resultado (mensajes de retroalimentación).attemptsDisplay\: Área donde se muestra el número de intentos.resetBtn\: Botón para reiniciar el juego.bestScoreDisplay\: Elemento para mostrar el mejor puntaje, obtenido del almacenamiento local.
3. Manejo del Evento “Click” en el Botón de Adivinar
- Proceso:
Al presionar el botónguessBtn\, se ejecuta una función que:-
Obtiene el valor ingresado en
guessInput\y lo convierte a número. -
Incrementa el contador de
intentos\. -
Valida que el número esté en el rango de 1 a 100, mostrando un mensaje de error si no es válido.
-
Compara el número ingresado (
guess\) con elnumeroSecreto\:- Si acierta:
- Muestra un mensaje de felicitaciones junto con el número de intentos.
- Deshabilita el botón y el campo de entrada.
- Guarda el puntaje en el
localStorage\si es el mejor (menos intentos) hasta el momento.
- Si es menor:
Muestra un mensaje indicando que el número es “demasiado bajo”. - Si es mayor:
Muestra un mensaje indicando que el número es “demasiado alto”.
- Si acierta:
-
Actualiza la visualización del número de intentos y limpia el campo de entrada.
-
4. Guardar Puntajes en el Almacenamiento Local (localStorage)
- Proceso:
Cuando el usuario adivina correctamente el número:- Se obtiene el mejor puntaje almacenado con
localStorage.getItem('bestScore'). - Si no existe un puntaje anterior o si el puntaje actual es menor (mejor desempeño), se guarda el nuevo puntaje usando
localStorage.setItem('bestScore', intentos). - La función
actualizarMejorPuntaje()actualiza el elemento del DOM que muestra el mejor puntaje.
- Se obtiene el mejor puntaje almacenado con
5. Funcionalidad de Reiniciar el Juego
- Función
reiniciarJuego():- Genera un nuevo
numeroSecreto. - Resetea el contador de
intentosa 0. - Habilita nuevamente el botón y el campo de entrada.
- Limpia los mensajes y actualiza la visualización de los intentos.
- Genera un nuevo
- Evento:
Se añade un eventoclickal botónresetBtnpara ejecutar la función y reiniciar el juego sin necesidad de recargar la página.
6. Inicialización al Cargar la Página
- Al cargar la página, se llama a la función
actualizarMejorPuntaje()para mostrar el mejor puntaje almacenado en ellocalStorage.
Resumen de las Nuevas Funcionalidades
-
Reiniciar el Juego sin Recargar la Página:
Se ha agregado un botón “Reiniciar” que llama a la funciónreiniciarJuego()\, la cual restablece todas las variables y elementos del juego para que el usuario pueda empezar de nuevo sin necesidad de actualizar el navegador. -
Guardar Puntajes en el Almacenamiento Local:
Cuando el usuario adivina el número correctamente, el juego guarda el número de intentos en ellocalStorage\. Se compara con el mejor puntaje (el mínimo número de intentos) y se actualiza en caso de lograr un nuevo récord. Esto permite llevar un seguimiento del desempeño del usuario.
