Desde hace un par de años entré al mundo del Kpop. Fue en pandemia, cuando pasabas más tiempo en internet de lo normal, explorando cosas nuevas así llegue a Mamamoo.
Y desde entonces, me dedique a seguir tanto al gurpo, más que seguir al grupo como tal, empecé a seguir a cada una de sus integrantes.
Hace poco anunciaron su comeback —que básicamente significa que vuelven a sacar música como grupo— y, al momento en que escribo esto, faltan sólo dos meses para que pase. (Inserte gritos de fan aquí).
Entonces pensé: quiero hacer algo para ese momento, no algo complicado… algo que se sienta divertido, como un juego.
La primera idea fue una máquina expendedora.
De esas donde introduces algo… y obtienes algo, ya había hecho 2 antes me sentía confiada en hacer otra.
En este caso:
- Introduces un código
- Y obtienes una photocard digital del grupo
Hasta ahí sonaba bien, pero entonces vino la pregunta importante:
¿Cómo haría que las personas consiguieran esos códigos?
Y ahí fue donde empezó realmente el proyecto.
Un juego tenía sentido, pero no cualquier juego.
Pensé en lo que representa MAMAMOO, en su música y no se por que, se me vino a la cabeza una maquina de baile PUMP IT UP.
Un juego de ritmo.
Algo tipo Guitar Hero, donde presionas teclas siguiendo la música.
Y dependiendo de cuánto avanzas… obtienes un código.
Concepto del sistema
Así nació la idea completa:
Un minijuego musical conectado a una máquina expendedora virtual.
El flujo es simple, pero intencional:
- El usuario juega un minijuego musical
- Según su desempeño, obtiene un código
- Ese código se introduce en una máquina virtual
- Se desbloquea una imagen del grupo
Algo importante aquí es que decidí no automatizar todo.
Pude haber hecho que el premio apareciera directo… pero no era la misma sensación.
Quería que se sintiera como una interacción real:
- Escribes el código
- Presionas un botón
- Esperas el resultado
Pequeños pasos…
Arquitectura y tecnologías
El proyecto lo desarrollé completamente en frontend.
Utilicé:
- HTML5 para la estructura
- CSS3 para estilos, animaciones y responsive
- JavaScript (Vanilla JS) para toda la lógica
Componentes principales
- Motor de juego rítmico (basado en tiempos de notas)
- Sistema de niveles y progresión
- Generador de códigos aleatorios
- Máquina expendedora virtual (como interfaz independiente)
- Uso de localStorage para conectar la experiencia
Decidí hacerlo así porque quería algo no tan complicado de construir.
Mecánicas del juego
El juego está inspirado en dinámicas tipo Baile PUMP IT UP.
¿Cómo funciona?
- Se reproduce una pista musical modificada, usamos su cancion debut Mr. Ambiguous
- ancion debut de
- Aparecen notas en pantalla
- El usuario debe presionarlas en el momento correcto
- Hay un margen de error limitado
Reglas
- Máximo de errores: 12 notas falladas
- Si se supera el límite → el juego termina
- El nivel alcanzado define el tipo de recompensa
Progresión
Inicialmente pensé en 3 niveles… pero la realidad fue otra.
La canción era más larga de lo que esperaba, y no quería recortarla.
Se sentía mal quitarle partes, así que tomé otra decisión de mantener la canción completa y modificar su velocidad según el nivel
Así terminó en:
- Nivel 1
- Nivel 2
- Nivel 3
- Nivel 4
- Modo Leyenda
La música sigue siendo reconocible, pero cambia el ritmo, hasta x4 lo que transforma la dificultad.
Adaptación a móvil
Después del primer beta, pasó algo importante, varias personas me dijeron que querían jugarlo desde el celular.
Eso implicó rediseñar cosas:
- Cambié controles de teclado por botones táctiles
- Bajé la interfaz para que fuera cómoda con los pulgares
- Ajusté visuales para pantallas pequeñas
Y sin querer, esto afectó la dificultad…
lo que me llevó a recalibrar todo el sistema.
Sistema de dificultad
Este fue uno de los puntos más importantes. Quería que el juego realmente retara, no que fuera algo que pasas una vez y ya.
Cuando hice pruebas, especialmente en móvil, noté que se volvió más fácil de lo que esperaba
Así que hice ajustes:
- Aumenté la velocidad de las notas (x2, x4, x6)
- Incrementé la densidad de secuencias
- Reduje el margen de error perceptivo
- Y agregué una variación:
- Cada 10 notas aparece una adicional
Esto ayudó a mantener el ritmo del juego interesante y evitar que se volviera repetitivo.
Sistema de recompensas
Este es, sin duda, el corazón de todo el proyecto.
Desde el inicio no quería que fuera solo un juego… necesitaba que hubiera algo extra, para hacerlo intersante.
El flujo es sencillo, pero está pensado con intención: terminas una partida, recibes un código aleatorio y ese código lo introduces en una máquina expendedora virtual. A partir de ahí se desbloquea una imagen del grupo.
Cada uno de los códigos tiene un significado. No son combinaciones al azar: están relacionados con canciones, fechas importantes o referencias dentro de la historia de MAMAMOO. La idea era que incluso el código se sintiera como parte de la experiencia, no solo como una llave técnica.
En total hay 25 recompensas, todas distribuidas de forma aleatoria. Esto hace que no sea tan sencillo completar la colección y genera ese pequeño impulso de “una más y ya”, que termina manteniendo al usuario dentro del juego.
También cuidé mucho la selección del contenido. No quería usar las imágenes típicas que aparecen en una búsqueda rápida. Me fui más por momentos icónicos, fotos que como fan reconoces, pero que no siempre son las primeras que ves. La intención era que cada desbloqueo se sintiera como descubrimiento.
A nivel visual, quise mantener coherencia con la estética del grupo, especialmente inspirándome en “HIP”. Por eso la máquina, los colores y la sensación general del sistema tienen ese toque más fuerte, más visual, más marcado.
Además, los premios no están simplemente “listados”. Están organizados detrás de los discos del grupo, donde cada uno representa una canción. Esto no solo ordena el sistema, también refuerza la conexión con su música.
Para hacer la experiencia más dinámica, también integré un pequeño video compuesto por varias imágenes del grupo. No es solo un premio estático, sino algo que se siente más vivo dentro del sistema.
Y algo importante a nivel técnico: implementé una especie de memoria caché que se reinicia cada vez que recargas la página. Esto permite que, si ya usaste un código, no puedas volver a ingresarlo en la misma sesión. Con esto evito repeticiones y mantengo la lógica del desbloqueo más limpia.
Finalmente, el último desbloqueable es especial. Es una edición tipo “antes vs después” del grupo, pensada como cierre emocional para quienes logran llegar hasta el modo Leyenda.
Porque al final, más que coleccionar imágenes… la idea era que cada recompensa se sintiera como un pequeño pedazo de historia del grupo.
¿Cuántas fotos llevas hasta ahora?
Y más importante…
¿ya llegaste al modo Leyenda?
