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.
Four checks that expose restart bugs: Rapid restarts: restart 10 times quickly. The ball speed should stay the same. If it doubles, two loops are running. Keeping a counter of active loops (it should always be 1) makes this easy to see. One key press: press an arrow key once after several restarts. The paddle should move the same distance as on the first run. If it moves further, listeners are stacking up. Key held during restart: hold a key while restarting, then release it. The paddle should not keep drifting because of a stale held key. Restart in odd states: restart after game over, during a serve delay and after switching back from a hidden tab. You should see a full brick count, a score of 0, no ball jump on the first frame and no timer from the old run firing.


