Skip to main content
Back to all projects
Concept / PrototypeBrowser EngineeringYear: 2026

Tunnel Flap

First-Principles DOM-Based 2D Physics Game Engine

LinkedIn
Cyclic 8-node DOM pool: nodes exiting the left edge reposition to the right with randomized gap geometry

↳Cyclic 8-node DOM pool: nodes exiting the left edge reposition to the right with randomized gap geometry

01 / CONTEXT

What was this and who was it for?

A technical deep dive exploring browser rendering mechanics, garbage collection thresholds, and low-level object lifecycle management without framework abstractions.

02 / PROBLEM

What was broken, frustrating, or missing?

Naive DOM games continually create and remove elements in an infinite scroll, triggering repetitive garbage collection pauses that cause perceptible frame drops and stutter.

03 / CONSTRAINTS

Design & Platform Boundaries

  • [1]Strictly no `<canvas>` or WebGL rendering contexts allowed; rendering must use standard DOM tree elements.
  • [2]Strictly no external game libraries (Phaser, Pixi) or UI frameworks (React).
  • [3]Memory profile must remain flat throughout extended continuous play sessions.
04 / DECISION

Architectural & UX Strategy

Built a fixed object pool of eight DOM obstacle nodes recycled continuously along the horizontal axis, paired with a delta-time physics step and mathematical AABB bounding-box collision detection.

05 / IMPLEMENTATION

Execution Highlights

Engineered an 8-node circular queue where obstacles passing the left boundary are re-positioned to the right with randomized aperture heights.
Calculated precise mathematical bounding boxes rather than relying on DOM element rects to eliminate transparent sprite padding errors.
Implemented a fixed-step physics accumulator for gravity and flap impulses, synchronized with Web Audio API sound cues.
06 / TRADE-OFFS

What was compromised & what was gained?

  • /Accepted CSS transform rendering limitations compared to Canvas batch draws, restricting maximum concurrent particle count.
  • /Manually managed coordinate systems across varied display resolutions.
07 / OUTCOME

Verifiable Outcome

Demonstrated that careful memory architecture and object pooling can deliver fluid, responsive game physics directly within standard HTML/CSS DOM trees.

08 / WHAT CHANGED IN MY THINKING
"Frameworks are convenient, but understanding the browser's paint lifecycle, garbage collector, and layout pipeline from first principles is what makes high-performance frontend engineering possible."