DEV Community

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

Posted on

Day 105 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 105 of my software engineering track! Today is Day 4 of my intensive 5-day 2D Flying Car Game challenge. I have successfully locked down the ultimate operational logic block of any arcade engine: 2D Bounding-Box Intersection Analytics and Complete Lifecycle Tear-Downs using the native getBoundingClientRect() API! 🏎️💥💀

When building native games without bulky physics wrappers, managing instant high-velocity collision detections requires tracking real-time layout vectors ($X, Y$) on every animation frame loop and performing surgical state resets the millisecond an overlap occurs.


🧠 Deconstructing the Day 105 Collision Engine & Lifecycle Architecture

As showcased live within my execution sandbox across "Screenshot (239).jpg" and "Screenshot (240).png", the backend-style state machine operates via highly explicit computational layers:

1. Bounding-Box Matrix Calculations (getBoundingClientRect())

  • Inside the calculation wrapper gainScoresByCoins(), the script extracts absolute client positioning dimensions for active entities ("Screenshot (240).png"):

javascript
  const goldCoin = coin.getBoundingClientRect();
  const Mycar = car.getBoundingClientRect();
Enter fullscreen mode Exit fullscreen mode

Top comments (0)