检测html5画布是否已暂停

Question

i am developing a game with HTML5 canvas and JavaScript.

To time the game, i take the system milliseconds from now, subtract the system milliseconds from when the last frame occurred, which leaves me with the milliseconds the last frame took to render.

This works fine, but if i open a new tab in Firefox, the canvas seems to get paused by Firefox, and when i come back, the current system time is many seconds later then the system time the last frame occurred and everything jumps, because its movement is relative to the last frame time.

I need some way to either detect, that the canvas is not running at the moment, or that Firefox (and of course other browsers) has switchted to another tab, so i can pause my game, and when returning, update the 'last frame time' to prevent jumps.

Any ideas?

Answer 1

您还可以使用window onblur事件检测选项卡何时更改。

Answer 2

That's just one cause of clock jump. You're still vulnerable to forced process sleep, high system load, computer sleep mode, hibernation, and a dozen other scenarios.

You need to cap the time delta. In my projects (hobby games), I've found 80ms to be a functional maximum.

(Also, collision detection is much harder without a cap.)