Click a link, and a full game starts instantly — physics, particles, sound, saved high scores — with nothing installed. It feels like magic, but it's a small set of elegant web technologies working together. Here's a friendly tour, using a game like Candy Jump as the example.
The canvas: a pixel playground
At the heart of most browser games is the HTML5 <canvas> element — essentially a blank rectangle that JavaScript can paint on, pixel by pixel, shape by shape. Every ring, ball, glow and particle you see is drawn onto this surface with simple commands: draw an arc here, a circle there, a gradient behind everything.
The game loop: 60 paintings per second
A game isn't one drawing — it's a flipbook. Roughly sixty times every second, the game runs the same cycle:
- Update — apply gravity to the ball, rotate every obstacle a tiny bit, check collisions.
- Render — erase the canvas and repaint the entire scene in its new state.
The browser provides a special scheduler (requestAnimationFrame) that runs this loop in sync with your screen's refresh rate, which is why good browser games feel perfectly smooth.
Physics without a physics engine
A tap-to-bounce game needs surprisingly little math. The ball stores a vertical speed; every frame, gravity nudges that speed downward and the speed moves the ball. A tap simply sets the speed to a fixed upward value. Collision with a rotating wheel is a small geometry check: how far is the ball from the wheel's center, and which color segment lives at that angle right now? A dozen lines of code, and the whole game feel emerges.
Input, sound and memory
Input: the browser fires events for taps, clicks and key presses; the game just listens. Sound: the Web Audio API can synthesize tones directly in code — the blips and chimes in many casual games are generated live, no audio files needed. Memory: localStorage lets a game keep a few kilobytes on your device, which is exactly where your high score lives between visits.
Why this beats downloads for casual play
- Instant access — the "install" is loading one page.
- Every device — one game runs on phones, tablets, laptops and desktops alike.
- Safe by design — browser games run in the browser's sandbox, with no access to your files.
- Always current — refresh the page and you have the latest version.
Next time you're mid-run, spare a thought for the sixty repaints per second happening under your thumb. Then get back to focusing — the pink segment is coming around again.
