Day 108 of Learning MERN Stack

#gamedev #javascript #css #html

Hello Dev Community! 👋

It is officially Day 108 of my software engineering marathon! Today marks Day 2 of building my top-down Runner Game, and I shifted the environment from a static graphic frame directly into an active, high-velocity simulation engine! 🏃‍♂️💨🔥

When building infinite scrollers, creating and deleting DOM elements continuously causes massive garbage collection spikes. Today, I bypassed this bottleneck by engineering a high-performance Object Recycler Algorithm alongside custom session clocks!

🧠 Breaking Down the Day 108 Engine Mechanics

As compiled live inside my system sandbox across "Screenshot (243).jpg", "Screenshot (244).png", and "Screenshot (245).png", today's engineering sprint locked in major functional layers:

1. The Obstacle Recycler Pattern (`reverseHurdlesOnHittingLimit`)

Instead of spawning new hurdle nodes, the engine tracks their boundary offsets dynamically.
The moment a hurdle asset passes the player and clears the screen edge boundary (e.g., hurdleNo1 > 705), it triggers a quick reset condition ("Screenshot (244).png"):


javascript
  if (hurdleNo1 > 705) {
      hurdleNo1 = -120; // Loops obstacle straight back to the top area
      hurdleElement1.classList.add('hid-line');
      // SetTimeout gracefully handles hidden visibility transition lifecycles
  }