Pausing the Game

Pausing should freeze the game but keep it on screen. The easiest way is to split your game into two functions, one that moves everything and one that draws everything. While paused, only the drawing one runs.

Press Escape to pause and unpause.

How it Works

Every tick, main() checks for Escape with isClicked(). It's only true on the tick the key is pressed, so holding Escape doesn't flicker between paused and unpaused.

While paused is true, update() gets skipped, so nothing moves. draw() still runs, so the game stays on screen. The pause overlay is a see-through black rectangle over everything. The last two digits of "#00000099" are how see-through it is, from 00 (invisible) to ff (solid).

Pausing When the Player Leaves

It's nice to pause automatically when the player switches tabs. The browser tells you when that happens with a visibilitychange event:

document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        paused = true;
    }
});

Timers Pause Too

Anything counted in ticks, like a cooldown or a countdown, stops while paused for free, as long as it's counted in update(). That's a big reason to count ticks instead of using setTimeout(), which keeps going while the game is paused. See Timers and Cooldowns.