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’s classic offline T-Rex mechanics.
The primary objective of the project was to engineer a responsive, pure Vanilla JavaScript game engine from scratch—focusing on fluid movement physics, real-time obstacle generation, collision logic, and dynamic DOM updates without relying on heavy external game libraries or frameworks.

The Challenge

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: Crafting responsive jumping mechanics and simulated gravity using JavaScript input events (e.g., Spacebar listener).

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

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

     - Collaborative Code Structure: Maintaining clean, clean-coded, and modular CSS/JS architecture across a 4-developer team structure.

Our Approach

Working within an agile collaborative team, we broke down the development process into clear front-end and algorithmic milestones:
     - Semantic HTML5 & Visual Hierarchy: 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: Styled character sprites, obstacle assets, and background landscapes using structured CSS hierarchies to ensure dynamic visual feedback during gameplay.

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

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

     - Real-time Collision Engine: 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: Built an active score tracking system that increments as the player successfully navigates past obstacles.

Project Gallery

Results

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: Built a completely standalone mini-game with zero external dependencies, emphasizing high execution performance and clean DOM manipulation.

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

     - Successful Team Collaboration: Successfully integrated modular features across a 4-person team, delivering a well-structured codebase within the Mayerfeld Practicum framework.