Robot Wolf
Retos Interactivos 2D con Phaser
Módulo gamificado de retos 2D para la plataforma educativa Robot Wolf: puzzles con mecánicas de mover, recolectar y resolver construidos con Phaser.js dentro de React, con contenido gestionado desde Strapi.
Corporación Wolf S.A. · Robot Wolf
Contexto
Robot Wolf enseña programación y robótica a estudiantes, y necesitaba una forma de practicar lógica de matrices y secuencias sin que se sintiera como un ejercicio de matemáticas. La plataforma ya estaba construida en React y el contenido educativo vivía en Strapi, así que el módulo de juego tenía que integrarse en esa aplicación existente y permitir que los docentes crearan nuevos retos desde el CMS sin intervención de desarrollo.
Solución
Lo construimos entre dos personas, cubriendo en conjunto la escena en Phaser.js, la integración en React y el contenido en Strapi. Es un módulo de retos 2D embebido en la aplicación React. Cada reto se define en Strapi como una matriz (posiciones de inicio, obstáculos, objetos a recolectar y meta) y Phaser la interpreta para construir la escena; el estudiante resuelve el desafío moviendo el personaje, recolectando elementos y completando la secuencia lógica. Diseñamos nuevos tipos de reto basados en manipulación de matrices y arrays dinámicos, y un sistema de puntuación por tiempo y progreso que se guarda por estudiante. La integración entre React y Phaser se resolvió con un puente de eventos para que el estado del juego y el store de React se mantengan sincronizados.
Resultado
Los docentes crean retos nuevos desde Strapi sin tocar código, y los estudiantes practican lógica de matrices con retroalimentación visual inmediata y puntuación por progreso dentro de la misma plataforma.
Funcionalidades clave
- Lógica de puzzles basada en manipulación de matrices y arrays dinámicos
- Mecánicas tipo puzzle: mover, recolectar y resolver secuencias
- Retos definidos como contenido estructurado en Strapi y renderizados dinámicamente
- Sistema de puntuación por tiempo y progreso por estudiante
- Integración de la escena Phaser dentro del ciclo de vida de componentes React
Retos y soluciones
El mayor reto fue la abstracción: convertir operaciones sobre matrices en interacciones visuales intuitivas dentro de un canvas 2D. Definimos un formato de reto en Strapi que describe la matriz del nivel y sus reglas, y un intérprete en Phaser que la transforma en tiles, sprites y condiciones de victoria, así cada tipo de reto nuevo es contenido y no código. El segundo desafío fue técnico: Phaser tiene su propio ciclo de vida y bucle de juego, y React vuelve a renderizar componentes por su cuenta. Encapsulamos la instancia de Phaser en un componente que la crea una sola vez, expusimos un puente de eventos hacia el store de React y destruimos la escena correctamente al desmontar, con lo que evitamos fugas de memoria y estados desincronizados al navegar entre retos.