Croissant Adventure: como construi un juego web completo en JavaScript vanilla

Croissant Adventure es uno de esos proyectos que empezo como una idea divertida y acabo convirtiendose en un juego web bastante completo: un mundo central llamado Migalandia, personajes seleccionables, outfits, minijuegos, sistema de login, persistencia, musica, control parental y un asistente narrativo con IA.

El objetivo no era hacer un clon rapido de un juego existente. Queria construir un pequeno universo jugable desde cero, usando JavaScript vanilla, HTML5 Canvas y CSS, sin apoyarme en motores como Phaser o Unity. Eso hizo el proyecto mas dificil, pero tambien mucho mas formativo: tuve que pensar en escenas, input, camara, assets, audio, estado, menus, guardado y experiencia de usuario.

La idea: Migalandia como hub de aventuras

La premisa de Croissant Adventure es sencilla: el jugador entra en Migalandia y puede moverse por distintas zonas del mapa para descubrir aventuras. En lugar de lanzar directamente un minijuego, el proyecto tiene una estructura mas cercana a un RPG ligero:

• una pantalla de bienvenida,
• login y registro,
• seleccion de personaje entre Croiso y Croisa,
• seleccion de outfit,
• un mapa central con regiones,
• zonas interactivas que abren minijuegos,
• puntuacion, monedas y progreso,
• un chat narrativo que recomienda aventuras.

Ese enfoque me permitio practicar algo muy importante en desarrollo de software: separar el juego en sistemas. No todo vive en un unico archivo ni todo depende de un boton. Hay una arquitectura base que hace de motor y despues cada minijuego se conecta a esa estructura.

Stack tecnico

El proyecto esta construido con tecnologias web directas:

• HTML5 para las pantallas principales.
• CSS3 para la UI, responsive layout, animaciones y estilos del mundo.
• JavaScript vanilla para toda la logica del juego.
• HTML5 Canvas como superficie principal de renderizado.
• Firebase para autenticacion, base de datos y guardado de progreso.
• localStorage para sesion, seleccion de personaje, outfits y preferencias.
• WebAudio / audio assets para musica, efectos y feedback.
• Chat IA con sistema narrativo interno y una integracion externa.

La decision de hacerlo sin framework tuvo un coste: muchas cosas que un motor de juegos te da gratis las tuve que construir a mano. Pero tambien me obligo a entender mejor como funciona un juego por dentro.

El motor propio

La pieza central del proyecto es la clase Game. Esta clase coordina el canvas, el bucle principal, los inputs, las escenas, la puntuacion, el audio y parte del estado persistente.

El canvas trabaja con una resolucion base de 1200 x 800, y el juego escala las coordenadas del raton para que los clics sigan funcionando aunque el canvas se renderice a otro tamano en pantalla. Ese detalle parece pequeno, pero es clave: si no escalas bien el input, un boton puede verse en una posicion y recibir el clic en otra.

El motor tambien registra escenas mediante un sistema sencillo:

registerScene(nombre, escena)
switchScene(nombre)

Cada pantalla importante del juego es una escena: menu principal, mapa del mundo, minijuegos, panel de administracion o tutorial. Esto permite entrar y salir de cada experiencia sin romper el estado global.

Mapa del mundo: regiones, camara y minijuegos

El mapa de Migalandia esta planteado como un mundo con varias regiones. Hay una plaza central y zonas como Bosque de Chocolate, Montana Galleta, Playa Caramelizada, Ciudad Pastelera, Lago Merengue, Cueva Caramelo, Pradera Azucarada y Volcan Brownie.

Cada region tiene su propio color, descripcion, musica, efectos visuales y zonas de minijuego. El jugador puede moverse por el mapa con teclado y acercarse a puntos interactivos para iniciar una aventura.

El mapa tambien incluye:

• camara que sigue al jugador,
• transiciones entre regiones,
• minimapa,
• efectos ambientales,
• obstaculos,
• monedas repartidas por el mundo,
• prompts de interaccion,
• rutas entre zonas de minijuego.

Este fue uno de los aprendizajes mas claros del proyecto: un juego empieza a sentirse mas grande cuando tiene un lugar que conecta sus sistemas. El hub convierte minijuegos separados en una experiencia con continuidad.

Coleccion de minijuegos

Croissant Adventure no se queda en una sola mecanica. El repositorio incluye una coleccion amplia de minijuegos, cada uno con sus propias reglas, estado y forma de puntuar.

Algunos ejemplos:

• Coin Collector: recoger monedas contra el reloj.
• Roulette: ruleta de premios y azar.
• Chess: partida de ajedrez contra una IA sencilla.
• Maze: laberinto generado con tiempo limitado.
• Shooter: disparos a objetivos y high score.
• Platform: plataformas, saltos, monedas y meta.
• Platform Lava: variante con lava y mayor presion.
• Memory: cartas por parejas con puntuacion por movimientos y tiempo.
• Snake: clasico de serpiente con comida y crecimiento.
• Puzzle: rompecabezas deslizante.
• Rhythm: minijuego musical con notas, combo y precision.
• Tower Defense: oleadas, enemigos, jefes, torres, dinero y vidas.
• Fishing: pesca arcade con puntuacion.
• Surfing: obstaculos y coleccionables.
• Cave Explorer: exploracion en cueva con grid y objetivo.
• Paint Game: lienzo interno para dibujar con pinceles, colores y retos.
• Trivia Game: preguntas y respuestas.
• Story Teller: subminijuegos como tres en raya, conecta 4, memory y battleship.
• Tutorial: introduccion guiada al juego.
• Admin Panel: panel para revisar estadisticas y opciones.

El reto aqui no fue solo programar mecanicas. Fue conseguir que todas convivieran dentro del mismo motor, con entrada/salida limpia, puntuacion comun, musica y una forma consistente de volver al mapa.

Personajes, outfits y sesion

Una parte importante de la experiencia es la personalizacion. El jugador puede elegir personaje y outfit antes de entrar al juego. Esa seleccion se guarda y luego el motor carga los sprites correctos para renderizar al jugador dentro del canvas.

La web tambien incluye login, registro y accesos especiales para pruebas. El juego guarda datos en localStorage y puede sincronizar progreso con Firebase: puntuacion, monedas, logros y datos de control parental.

Esto convierte el proyecto en algo mas cercano a una app web jugable que a una demo aislada.

Chat IA y narrador

Uno de los sistemas mas interesantes es el chat narrativo. El juego incluye un asistente llamado Trash que actua como guia de Migalandia. El usuario puede escribir que tipo de aventura busca, y el sistema detecta palabras clave para recomendar minijuegos relacionados.

Por ejemplo, si el jugador habla de estrategia, puede sugerir ajedrez o tower defense. Si habla de ritmo, puede llevarlo al minijuego musical. Si menciona laberintos, el sistema conecta con Maze.

La arquitectura combina:

• memoria conversacional,
• deteccion de palabras clave,
• respuestas predefinidas por contexto,
• recomendaciones de juegos,
• botones de acceso rapido,
• fallback local si la IA externa falla.

Esto me parecio especialmente interesante porque une narrativa, UX y logica de producto. El chat no esta ahi solo para decorar: intenta ayudar al jugador a encontrar la aventura que encaja con lo que le apetece.

Control parental y panel de administracion

Tambien anadi un sistema de control parental. Permite definir limites de tiempo, edad y tareas educativas. Cuando el tiempo termina, el juego puede mostrar actividades adaptadas, como ejercicios de escritura.

El panel de administracion y las estadisticas permiten revisar progreso, minijuegos jugados, tiempo de uso y configuracion. Para un juego orientado a un publico joven, esto le da una capa de producto real: no solo entretener, sino controlar la experiencia y hacerla mas responsable.

Dificultades tecnicas

El mayor reto fue la complejidad acumulada. Cada minijuego por separado parece asumible, pero cuando sumas mapa, escenas, login, audio, Firebase, chat, assets y responsive, aparecen problemas de arquitectura.

Algunos puntos especialmente delicados fueron:

• limpiar correctamente el estado al cambiar de minijuego,
• evitar que los inputs de una escena afectaran a otra,
• escalar clics y coordenadas del canvas,
• mantener rendimiento con muchos assets,
• no duplicar demasiada logica entre minijuegos,
• coordinar audio, musica de region y efectos,
• hacer que el mapa funcionara como hub y no como simple menu.

Tambien aprendi que en proyectos de juegos pequenos es facil caer en el "ya que estamos, anado otra mecanica". Eso da mucha vida al proyecto, pero obliga a ser mas disciplinado con la estructura.

Que mejoraria si lo llevara a produccion

Croissant Adventure funciona como proyecto web y como aprendizaje, pero si quisiera convertirlo en un producto mas serio haria varios cambios:

• migraria parte del codigo a modulos ES o TypeScript,
• separaria secretos y configuraciones sensibles del cliente,
• optimizaria assets de imagen y audio,
• anadiria lazy loading por minijuego,
• definiria una API de minijuegos mas estricta,
• crearia un sistema de guardado mas robusto,
• anadiria tests para reglas criticas,
• mejoraria accesibilidad y navegacion por teclado,
• prepararia una PWA para jugar sin conexion.

Lo interesante es que muchas de esas mejoras son naturales porque el proyecto ya tiene una base modular. No habria que reinventarlo entero, sino ordenar lo que ya existe.

Lo que aprendi

Este proyecto me enseno mucho mas que "hacer un juego". Me obligo a pensar como desarrollador de producto:

• como convertir una idea simpatica en un sistema jugable,
• como dividir un proyecto grande en piezas mantenibles,
• como disenar una experiencia para que el usuario entienda donde esta,
• como mezclar narrativa, juego, IA y persistencia,
• como decidir que se queda como demo y que necesita arquitectura mas seria.

Tambien me confirmo algo que me gusta mucho de programar: cuando construyes sin demasiadas capas encima, entiendes de verdad lo que esta pasando. JavaScript vanilla puede ser mas incomodo que un framework, pero para aprender motor, estado e interaccion es brutal.

Enlaces del proyecto

• Jugar a Croissant Adventure
• Repositorio en GitHub

Croissant Adventure es, para mi, una mezcla de juego, laboratorio tecnico y universo propio. No es solo un minijuego: es una prueba de que con HTML, CSS y JavaScript se puede construir una experiencia web bastante ambiciosa si se divide bien el problema.