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
}
Enter fullscreen mode Exit fullscreen mode
๋ต๊ธ ๋จ๊ธฐ๊ธฐ