Juego de Pociones

Descripción

Este proyecto es una versión web de un minijuego de memoria secuencial, desarrollada con HTML, CSS y JavaScript.

El objetivo del jugador es observar una receta de ingredientes, memorizar el orden correcto y repetirla sin cometer errores. La dificultad aumenta de forma progresiva: primero crece la longitud de la secuencia y, una vez alcanzado el máximo, aumenta la velocidad con la que se presentan los ingredientes.

Objetivo del juego

El jugador debe repetir correctamente una secuencia de ingredientes en el mismo orden en que fue mostrada.

Durante la partida:

• la receta se presenta visualmente al jugador
• el jugador observa y memoriza la secuencia
• después debe pulsar los ingredientes en el mismo orden
• si acierta, avanza a una nueva ronda
• si falla, la partida termina

El sistema aumenta la dificultad con el paso de las rondas para convertir el juego en una prueba de memoria y velocidad.

Tecnologías utilizadas

• HTML5 
• CSS3 
• JavaScript 

Explicación del archivo HTML

El archivo index.html contiene la estructura principal del juego. Su función es organizar visualmente todos los elementos que intervienen en la experiencia.

Elementos principales del HTML

Encabezado del juego

• título del proyecto
• subtítulo descriptivo
• panel de estadísticas

Panel de estadísticas

• ronda actual
• longitud actual de la secuencia
• mayor racha conseguida

Panel del caldero

• icono visual del caldero
• zona de vista previa de la receta

Panel de ingredientes

• botones interactivos para cada ingrediente
• nombre e icono de cada ingrediente

Panel de controles

• botón para iniciar la partida
• botón para reiniciar

Zona de mensajes

• mensajes de estado
• avisos de éxito o error
• indicaciones para el jugador

El HTML actúa como la base visual del proyecto y permite que JavaScript controle dinámicamente el flujo de la partida.

Explicación del archivo CSS

El archivo style.css define toda la apariencia visual del proyecto.

Qué controla el CSS

• fondo general del juego
• paneles de información
• diseño del caldero y vista previa
• rejilla de ingredientes
• botones interactivos
• resaltado visual de ingredientes activos
• colores de mensajes de éxito y fallo
• adaptación básica a distintos tamaños de pantalla

Objetivo visual

Se buscó una interfaz clara, mágica y fácil de entender, con una identidad visual inspirada en alquimia o preparación de pociones.

El diseño ayuda al jugador a identificar rápidamente:

• qué ronda está jugando
• qué ingredientes están disponibles
• cuándo un ingrediente está siendo mostrado
• cuándo la secuencia fue acertada o fallada

Explicación del archivo JavaScript

El archivo script.js contiene toda la lógica principal del juego.

Funciones más importantes del JavaScript

1. Definición de ingredientes

El sistema parte de una lista de ingredientes posibles, cada uno con:

• clave interna
• icono visual
• nombre

2. Generación de secuencias

En cada ronda se genera una receta aleatoria con una longitud determinada. La secuencia se construye usando ingredientes elegidos al azar.

3. Presentación visual de la receta

El juego muestra los ingredientes uno por uno:

• los enseña en el área de vista previa
• resalta visualmente el botón correspondiente
• espera un tiempo antes de pasar al siguiente

Esto permite que el jugador memorice el orden exacto.

4. Registro de la entrada del jugador

Cuando termina la fase de presentación:

• el jugador puede pulsar ingredientes
• cada pulsación se guarda en una secuencia del jugador
• se compara inmediatamente con la receta original

5. Validación de errores

Después de cada pulsación:

• se comprueba si el ingrediente pulsado coincide con el esperado en esa posición
• si no coincide, la partida termina
• si coincide y era el último ingrediente, el jugador supera la ronda

6. Escalado de dificultad

La dificultad sube de forma progresiva:

• primero aumenta la longitud de la secuencia hasta 8 ingredientes
• después la longitud se mantiene
• luego aumenta la velocidad de presentación para hacer el reto más difícil

7. Registro de la mejor racha

El juego guarda durante la sesión la mayor racha conseguida, para que el jugador pueda superarse en nuevas partidas.

8. Reinicio de la partida

El sistema permite volver a empezar sin recargar la página, restaurando los valores iniciales del juego.

Flujo general del juego

1. El jugador pulsa el botón de iniciar.
2. El juego genera una secuencia de ingredientes.
3. La receta se muestra visualmente uno por uno.
4. El jugador repite la secuencia usando los botones de ingredientes.
5. Si acierta, avanza a una nueva ronda.
6. Si falla, la partida termina.
7. Se actualiza la mejor racha y el jugador puede reiniciar.

Estado actual del proyecto

Actualmente el juego incluye:

• sistema funcional de memoria secuencial
• seis ingredientes interactivos
• generación aleatoria de recetas
• aumento progresivo de longitud
• aumento progresivo de velocidad
• contador de ronda
• registro de mayor racha
• reinicio de partida

Posibles mejoras futuras

Estas son algunas extensiones posibles del proyecto:

• agregar sonidos para cada ingrediente
• añadir animaciones más elaboradas al caldero
• incluir partículas o efectos mágicos al acertar
• guardar la mejor racha en localStorage
• incorporar más ingredientes o recetas especiales
• añadir niveles temáticos de alquimia
• mostrar una pantalla final de resultado más completa
• permitir modos de dificultad seleccionables

Ejecución

Para jugarlo, basta con abrir el archivo index.html en un navegador compatible.

No requiere instalación ni dependencias externas.