How should I prevent duplicate animation loops and input listeners when restarting a small HTML canvas brick-breaker game? Give a minimal lifecycle pattern, list the game state that must reset, and provide four checks that expose restart bugs. Do not produce a complete game or claim the pattern has been run.
Minimal Lifecycle Pattern (Recommendation): Bind inputs once: Attach DOM listeners (keydown, keyup, pointer) once during initialization (or tie them to an AbortController), never inside the restart routine. Track the frame handle: Hold rafId in an outer scope. Clean restart function: On restart, call cancelAnimationFrame(rafId), reset all mutable state variables, and only then schedule the next rafId = requestAnimationFrame(loop).


