Minimal fixed step game timer based on requestAnimation frame.

Game Timer

A tiny (640 bytes), powerful game timer that provides a fixed timestep and abstracts away requestAnimationFrame and cancelAnimationFrame.


  1. Install
npm install game-timer
  1. Include Timer function.
const GameTimer = require('game-timer');
  1. Initialize by configuring with an update callback and a render callback.
const timer = GameTimer({
    update: (deltaTime) => {
    render: () => {
        drawGame(myGame, canvas);
  1. Start timer. Your update callback will be called with a fixed time step in seconds as time progress and your render callback will be called when the browser is ready to render a another frame.
  1. Pause if needed.


Beyond the update and render callback GameTimer takes a second argument which is will use a the time step. The default time step is 1/120th of a second (0.008333333333333333 seconds).

const timer = new GameTimer({
    update: ...,
    render: ...,
}, 1/320);

A lower time step makes simulations more accurate but requires more CPU. Changing time step after game logic has been establish might affect game play so be careful.

Why fixed time step?

In order to avoid locking game simulation to frame rate this game timer keeps track of passed time and emits fixed time to your game update logic. It also prevents skipping by enforcing every simulation tick to be computed. This prevents glitches like objects falling thru collision zones and make simulations deterministic.

Further explanation can be found in this video.