{"id":1595,"date":"2026-07-20T13:01:54","date_gmt":"2026-07-20T11:01:54","guid":{"rendered":"https:\/\/koredesign.studio\/?page_id=1595"},"modified":"2026-08-17T02:40:38","modified_gmt":"2026-08-17T00:40:38","slug":"jumping-game","status":"publish","type":"page","link":"https:\/\/koredesign.studio\/es\/jumping-game\/","title":{"rendered":"Jumping Game"},"content":{"rendered":"
\n\t\t\t\t
\n \n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/a>\n

\n\t\t\t\t\t
\n\t\t\t\t\t

Jumping Game<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n
\n \t\t\t

Descripci\u00f3n General<\/h2>\n\t\t\t\t\t

Desarrollado como parte del Programa de Pr\u00e1cticas de Mayerfeld<\/strong> en colaboraci\u00f3n con un equipo de desarrollo de 4 personas, Jumping Game<\/strong> es un minijuego interactivo para navegador inspirado en la mec\u00e1nica cl\u00e1sica offline del T-Rex de Chrome.
El objetivo principal del proyecto era dise\u00f1ar desde cero un motor de juego responsivo, escrito completamente en JavaScript puro, centr\u00e1ndose en la f\u00edsica del movimiento fluido, la generaci\u00f3n de obst\u00e1culos en tiempo real, la l\u00f3gica de colisiones y las actualizaciones din\u00e1micas del DOM, sin depender de bibliotecas o frameworks de juegos externos complejos.<\/p>\n\t\t\t\t\t

El Desaf\u00edo<\/h2>\n\t\t\t\t\t

El principal desaf\u00edo radicaba en crear un ciclo de juego fluido y ligero de forma nativa en el navegador, coordin\u00e1ndolo eficazmente con un flujo de trabajo multidisciplinario. Los requisitos t\u00e9cnicos clave inclu\u00edan:
     - Simulaci\u00f3n F\u00edsica:<\/strong> Implementar mec\u00e1nicas de salto responsivas y gravedad simulada mediante eventos de entrada de JavaScript (por ejemplo, el detector de la barra espaciadora).

     - Detecci\u00f3n Precisa de Colisiones:<\/strong> Calcular la f\u00edsica del cuadro delimitador con precisi\u00f3n entre el personaje del jugador y los obst\u00e1culos din\u00e1micos en constante movimiento.

     - Rendimiento y Ritmo:<\/strong> Garantizar una renderizaci\u00f3n consistente de los obst\u00e1culos y una escala de velocidad uniforme a lo largo del tiempo, sin ca\u00eddas de fotogramas ni retardo visual en diferentes navegadores.

     - Estructura de C\u00f3digo Colaborativa:<\/strong> Mantener una arquitectura CSS\/JS limpia, con c\u00f3digo limpio y modular en un equipo de cuatro desarrolladores.<\/p>\n\t\t\t\t\t

Nuestro Enfoque<\/h2>\n\t\t\t\t\t

Trabajando en un equipo \u00e1gil y colaborativo, dividimos el proceso de desarrollo en hitos claros de front-end y algoritmos:
     - HTML5 Sem\u00e1ntico y Jerarqu\u00eda Visual:<\/strong> Dise\u00f1amos un dise\u00f1o visual limpio, estructurando el \u00e1rea principal del juego junto con contadores de interfaz de usuario en tiempo real para las puntuaciones actuales y las m\u00e1s altas.

     - Animaci\u00f3n y Dise\u00f1o CSS Personalizados:<\/strong> Dise\u00f1amos sprites de personajes, elementos de obst\u00e1culos y fondos utilizando jerarqu\u00edas CSS estructuradas para garantizar una retroalimentaci\u00f3n visual din\u00e1mica durante el juego.

Motor de Juego JavaScript Principal:<\/strong>
     Controles de Teclado y T\u00e1ctiles:<\/strong> Asignamos detectores de pulsaciones de teclas (barra espaciadora) para activar trayectorias de salto realistas con algoritmos de gravedad parab\u00f3lica.

     - Generaci\u00f3n y Movimiento de Obst\u00e1culos:<\/strong> Implementamos bucles de intervalos temporizados para generar continuamente obst\u00e1culos que se mueven hacia el jugador a velocidades sincronizadas.

     - Motor de Colisiones en Tiempo Real:<\/strong> Aplicamos l\u00f3gica precisa de detecci\u00f3n de cajas delimitadoras dentro de un bucle continuo de requestAnimationFrame, deteniendo instant\u00e1neamente la sesi\u00f3n de juego al impacto y activando la pantalla de \"Fin del juego\" y la superposici\u00f3n de puntuaci\u00f3n.

     - Sistema de Puntuaci\u00f3n Din\u00e1mico:<\/strong> Se ha creado un sistema de seguimiento de puntuaci\u00f3n activo que aumenta a medida que el jugador supera los obst\u00e1culos.<\/p>\n\t\t\t\t\t

Galer\u00eda de Proyectos<\/h2>\n\t\t
\n
\n \t\t\t\"Mockup\t\t\n \t\t\t

Jugar en Vivo<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"View\t<\/a>\t\t\n<\/div>\n\n<\/div>\n\t\t\t

Resultados<\/h2>\n\t\t\t\t\t

El proyecto entreg\u00f3 con \u00e9xito un juego web ligero, atractivo y de gran capacidad de respuesta que cumpli\u00f3 con todos los criterios de la tarea y demostr\u00f3 s\u00f3lidos fundamentos de JavaScript:
     - Arquitectura Pura de JavaScript:<\/strong> Se cre\u00f3 un minijuego completamente independiente sin dependencias externas, priorizando el alto rendimiento y la manipulaci\u00f3n limpia del DOM.

     - Experiencia de Usuario Fluida:<\/strong> Se logr\u00f3 una respuesta de entrada de teclado sin latencia y una f\u00edsica de salto fluida, ofreciendo una mec\u00e1nica de juego adictiva e intuitiva.

     - Colaboraci\u00f3n Exitosa en Equipo:<\/strong> Se integraron con \u00e9xito funcionalidades modulares en un equipo de cuatro personas, entregando un c\u00f3digo base bien estructurado dentro del marco de Mayerfeld Practicum.<\/p>\n\t\t\n<\/div>\n

\n
\n
\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

A\u00d1O<\/p>\n\t\t\n<\/div>\n\t\t\t

2026<\/p>\n\t\t\n<\/div>\n

\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

SERVICIOS<\/p>\n\t\t\n<\/div>\n\t\t\t

Desarrollo Web
Dise\u00f1o Interactivo y de Juegos
Ingenier\u00eda de Front-End<\/p>\n\t\t\t\t\t

HERRAMIENTAS Y TECNOLOG\u00cdA<\/p>\n\t\t

\n
\n \t\t\t

JavaScript<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

VS Code<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Git<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

GitHub<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\t\t\t

ETIQUETAS<\/p>\n\t\t

\n
\n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Minijuego de JavaScript<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

L\u00f3gica de Front-End<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Mec\u00e1nicas de juego<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

UI Interactiva<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Colaboraci\u00f3n en Equipo<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

\u00bfTe interesa un proyecto similar?<\/p>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tPonte en contacto<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Web Development Jumping Game Overview Developed as part of the Mayerfeld Practicum Program in collaboration with a 4-member development team, Jumping Game is an interactive, browser-based mini-game inspired by Chrome\u2019s classic offline T-Rex mechanics.The primary objective of the project was to engineer a responsive, pure Vanilla JavaScript game engine from scratch\u2014focusing on fluid movement physics, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1595","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/1595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/comments?post=1595"}],"version-history":[{"count":88,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/1595\/revisions"}],"predecessor-version":[{"id":2908,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/1595\/revisions\/2908"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/media?parent=1595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}