Descripción General

Desarrollado como parte del Programa de Prácticas de Mayerfeld en colaboración con un equipo de desarrollo de 4 personas, Jumping Game es un minijuego interactivo para navegador inspirado en la mecánica clásica offline del T-Rex de Chrome.
El objetivo principal del proyecto era diseñar desde cero un motor de juego responsivo, escrito completamente en JavaScript puro, centrándose en la física del movimiento fluido, la generación de obstáculos en tiempo real, la lógica de colisiones y las actualizaciones dinámicas del DOM, sin depender de bibliotecas o frameworks de juegos externos complejos.

El Desafío

El principal desafío radicaba en crear un ciclo de juego fluido y ligero de forma nativa en el navegador, coordinándolo eficazmente con un flujo de trabajo multidisciplinario. Los requisitos técnicos clave incluían:
     - Simulación Física: Implementar mecánicas de salto responsivas y gravedad simulada mediante eventos de entrada de JavaScript (por ejemplo, el detector de la barra espaciadora).

     - Detección Precisa de Colisiones: Calcular la física del cuadro delimitador con precisión entre el personaje del jugador y los obstáculos dinámicos en constante movimiento.

     - Rendimiento y Ritmo: Garantizar una renderización consistente de los obstáculos y una escala de velocidad uniforme a lo largo del tiempo, sin caídas de fotogramas ni retardo visual en diferentes navegadores.

     - Estructura de Código Colaborativa: Mantener una arquitectura CSS/JS limpia, con código limpio y modular en un equipo de cuatro desarrolladores.

Nuestro Enfoque

Trabajando en un equipo ágil y colaborativo, dividimos el proceso de desarrollo en hitos claros de front-end y algoritmos:
     - HTML5 Semántico y Jerarquía Visual: Diseñamos un diseño visual limpio, estructurando el área principal del juego junto con contadores de interfaz de usuario en tiempo real para las puntuaciones actuales y las más altas.

     - Animación y Diseño CSS Personalizados: Diseñamos sprites de personajes, elementos de obstáculos y fondos utilizando jerarquías CSS estructuradas para garantizar una retroalimentación visual dinámica durante el juego.

Motor de Juego JavaScript Principal:
     Controles de Teclado y Táctiles: Asignamos detectores de pulsaciones de teclas (barra espaciadora) para activar trayectorias de salto realistas con algoritmos de gravedad parabólica.

     - Generación y Movimiento de Obstáculos: Implementamos bucles de intervalos temporizados para generar continuamente obstáculos que se mueven hacia el jugador a velocidades sincronizadas.

     - Motor de Colisiones en Tiempo Real: Aplicamos lógica precisa de detección de cajas delimitadoras dentro de un bucle continuo de requestAnimationFrame, deteniendo instantáneamente la sesión de juego al impacto y activando la pantalla de "Fin del juego" y la superposición de puntuación.

     - Sistema de Puntuación Dinámico: Se ha creado un sistema de seguimiento de puntuación activo que aumenta a medida que el jugador supera los obstáculos.

Galería de Proyectos

Resultados

El proyecto entregó con éxito un juego web ligero, atractivo y de gran capacidad de respuesta que cumplió con todos los criterios de la tarea y demostró sólidos fundamentos de JavaScript:
     - Arquitectura Pura de JavaScript: Se creó un minijuego completamente independiente sin dependencias externas, priorizando el alto rendimiento y la manipulación limpia del DOM.

     - Experiencia de Usuario Fluida: Se logró una respuesta de entrada de teclado sin latencia y una física de salto fluida, ofreciendo una mecánica de juego adictiva e intuitiva.

     - Colaboración Exitosa en Equipo: Se integraron con éxito funcionalidades modulares en un equipo de cuatro personas, entregando un código base bien estructurado dentro del marco de Mayerfeld Practicum.