DEV Community

Cover image for Day 106 of Learning MERN Stack
Ali Hamza
Ali Hamza

Posted on

Day 106 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 106 of my software engineering marathon! Today marks the 5th and final day of my comprehensive 2D Flying Car Game challenge, and the engine is officially COMPLETE & FULLY DEPLOYED! 🏎️✈️🏁

After designing layout matrices, managing multi-directional arrow controls, and coding bounding-box collision tear-downs, today I injected the final layer of polish: 3D Z-Axis jump physics using native CSS perspective, programmatic score milestone rewards, and bulletproof state reset loops!


🧠 Deconstructing the Day 106 Architectural Finale

As captured live during runtime inside "Screenshot (241).jpg", the final deployment segment introduced advanced layout manipulation and state management:

1. 3D Spatial Jumping via CSS Perspective & Z-Axis

  • To simulate a realistic aerial jump over moving obstacle vehicles, I paired the JavaScript Spacebar interceptor with a native CSS 3D space configuration.
  • By modulating the perspective asset wrapper on the outer frame and mutating the hardware-accelerated translateZ() vector alongside scale factors dynamically, the player car physically "lifts" off the highway plane.
  • This seamlessly steps past standard bounding-box calculations while airborne, creating an actual pseudo-3D flight illusion without relying on WebGL or heavy canvas overhead!

2. Algorithmic Jump Rewards (+5 Score Threshold Rule)

  • Programmed a conditional tracking loop within the score validation handler.
  • The moment the user increments their score by a factor of 5 ($\text{Score } \% \ 5 === 0$), the engine rewards the player by incrementing the active flight pool (Jump++), giving them another tactical escape option over oncoming traffic rows.

3. Comprehensive State Reset Factory (The Restart Button)

  • As shown in "Screenshot (241).jpg", triggering the reset mechanics clears out game-over modals instantly and re-instantiates the tracking registry:

javascript
  userScore = 0;
  levelStage = 1;
  // Re-initializes highway lines, enemy vehicle arrays, and audio tracks cleanly
Enter fullscreen mode Exit fullscreen mode

Top comments (0)