{"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\/en\/jumping-game\/","title":{"rendered":"Jumping Game"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \n \t\t\t

Web Development<\/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

Overview<\/h2>\n\t\t\t\t\t

Developed as part of the Mayerfeld Practicum Program<\/strong> in collaboration with a 4-member development team, Jumping Game<\/strong> 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, real-time obstacle generation, collision logic, and dynamic DOM updates without relying on heavy external game libraries or frameworks.<\/p>\n\t\t\t\t\t

The Challenge<\/h2>\n\t\t\t\t\t

The core challenge lay in building a smooth, lightweight game loop natively in the browser while coordinating effectively across a multi-developer workflow. Key technical requirements included:
     - Physics Simulation:<\/strong> Crafting responsive jumping mechanics and simulated gravity using JavaScript input events (e.g., Spacebar listener).

     - Precise Collision Detection:<\/strong> Calculating accurate bounding-box physics between the player asset and continuously moving dynamic obstacles.

     - Performance & Pacing:<\/strong> Ensuring consistent obstacle rendering and speed scaling over time without frame drops or visual lag across different browsers.

     - Collaborative Code Structure:<\/strong> Maintaining clean, clean-coded, and modular CSS\/JS architecture across a 4-developer team structure.<\/p>\n\t\t\t\t\t

Our Approach<\/h2>\n\t\t\t\t\t

Working within an agile collaborative team, we broke down the development process into clear front-end and algorithmic milestones:
     - Semantic HTML5 & Visual Hierarchy:<\/strong> Designed a clean visual layout, structuring the main game canvas area alongside real-time UI counters for current scores and high scores.

     - Custom CSS Animation & Layout:<\/strong> Styled character sprites, obstacle assets, and background landscapes using structured CSS hierarchies to ensure dynamic visual feedback during gameplay.

Core JavaScript Game Engine:<\/strong>
     - Keyboard & Touch Controls:<\/strong> Bound keyup\/keydown listeners (Spacebar) to trigger realistic jump trajectories with parabolic gravity algorithms.

     - Obstacle Generation & Motion:<\/strong> Implemented timed interval loops to continuously spawn obstacles moving toward the player at synchronized speeds.

     - Real-time Collision Engine:<\/strong> Applied precise bounding-box detection logic inside a continuous requestAnimationFrame loop, instantly stopping the game session upon impact and triggering the \"Game Over\" screen and score overlay.

     - Dynamic Scoring System:<\/strong> Built an active score tracking system that increments as the player successfully navigates past obstacles.<\/p>\n\t\t\t\t\t

Project Gallery<\/h2>\n\t\t
\n
\n \t\t\t\"Mockup\t\t\n \t\t\t

Play Game Live<\/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

Results<\/h2>\n\t\t\t\t\t

The project successfully delivered a highly responsive, engaging, and lightweight web game that fulfilled all assignment criteria and showcased solid core JavaScript fundamentals:
     - Pure Vanilla JavaScript Architecture:<\/strong> Built a completely standalone mini-game with zero external dependencies, emphasizing high execution performance and clean DOM manipulation.

     - Seamless User Experience:<\/strong> Achieved zero-latency keyboard input response and smooth jump physics, offering an additive and intuitive gameplay loop.

     - Successful Team Collaboration:<\/strong> Successfully integrated modular features across a 4-person team, delivering a well-structured codebase within the Mayerfeld Practicum framework.<\/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

YEAR<\/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

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

Web Development
Interactive & Game Design
Front-End Engineering<\/p>\n\t\t\t\t\t

TOOLS & TECHNOLOGY<\/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

TAGS<\/p>\n\t\t

\n
\n \t\t\t

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

\n \t\t\t

JavaScript Mini-Game<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Front-End Logic<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Game Mechanics<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

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

\n \t\t\t

Team Collaboration<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

Interested in a similar project?<\/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\tGet in Touch<\/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>\n\t\t","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\/en\/wp-json\/wp\/v2\/pages\/1595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/comments?post=1595"}],"version-history":[{"count":88,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/1595\/revisions"}],"predecessor-version":[{"id":2908,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/1595\/revisions\/2908"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/media?parent=1595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}