You do not need to know any of this to play. But four ideas explain most of the odd behaviour you will encounter in browser games — stutter, blurriness, games that pause, games that run at the wrong speed — so they are worth ten minutes.

1. The canvas

A browser game draws into a <canvas> element: a rectangle of pixels the page can paint into with JavaScript. There are no images being moved around and no sprites in the traditional sense — every frame, the game clears the rectangle and redraws everything from scratch.

That is why our games are made of simple shapes. A pitch is two rectangles and some stripes; a ball is a circle with a pentagon and three dots; a player is a few lines and a head. Drawing those sixty times a second costs almost nothing, which is why the games run smoothly on modest hardware.

It is also why the games need JavaScript. Without it there is nothing to draw the frame — although every article and policy page on this site works perfectly with JavaScript disabled.

2. The game loop

Every frame the game does three things: read your input, update the world, draw the result. Then it asks the browser to call it again for the next frame.

The asking matters. Games use a browser function that fires once per display refresh, which means the game is synchronised with your screen rather than running as fast as possible. Two consequences:

  • Your refresh rate is the game's frame rate. At 60Hz there are about 16.7 milliseconds between frames; at 120Hz, half that.
  • Background tabs get throttled. Browsers deliberately slow or stop these callbacks to save power, which is why a game left in a background tab does not keep running properly. Our games pause on losing focus rather than continuing at a crawl, because a timed run at three frames per second would record a meaningless score.

3. Delta time

This is the one that separates well-built games from careless ones.

If a game moves the ball "5 pixels per frame", it runs twice as fast on a 120Hz display as on a 60Hz one. Everything — difficulty, timing windows, your score — changes with your hardware.

The fix is to measure the elapsed time since the last frame and scale movement by it: "250 pixels per second" rather than "4 pixels per frame". Then the game plays identically on any display.

All of our games do this, which is why our scoring tables quote speeds in pixels per second and durations in seconds. If a browser game elsewhere feels weirdly fast or slow on your machine, this is almost certainly why.

4. Device pixel ratio

A canvas has two sizes: how big it is on the page, and how many actual pixels it contains. On a high-density screen those differ by two or three times.

A game that ignores the difference draws a low-resolution image which the browser then scales up, and the result looks soft. A game that accounts for it draws at the screen's real resolution and looks crisp. Ours scales by your device's ratio, capped at 2.5 to avoid drawing an absurd number of pixels on very dense displays.

How scores are saved

Local storage: a small area of your browser where a site can keep named values, readable only by that site and never sent anywhere automatically. Your personal best is a short string written there.

That is the whole mechanism, and it explains why scores do not follow you between devices and why clearing site data deletes them. How Browser Games Save Your High Score covers it in detail.

What this technology cannot do

Worth knowing so you can calibrate expectations of the genre:

  • Heavy 3D. Possible with WebGL, but a different kind of project. Simple 2D canvas games are where the arcade tradition lives.
  • True multiplayer without a server. Two browsers cannot talk to each other for free, which is why almost every small browser game is single player — including all of ours.
  • Guaranteed frame timing. The browser decides when you draw, so a game cannot promise exact millisecond behaviour. It is why our reaction test measures an average rather than trusting one round.
  • Protected scores. Anything running in your browser can be inspected and modified by you. It is also why you can verify our numbers — the same openness cuts both ways.

Verifying what we publish

Since all of this runs in your browser, every number in our guides is checkable. Open any game page, view the source, and read the JavaScript file for that game: the scoring formula and the key constants are documented in a comment at the top.

That is deliberate, and it is what our fact-checking policy relies on.