Understanding Browser Game Mechanics: Physics Judgment in Modern 2D Web Games

Editorial desk · dianyingsir.com · September 3, 2026

When a shot “should have gone in” or a bumper car clips a wall that looked clear, you are arguing with a simulation, not with gravity. 2D browser games almost never integrate Newton’s laws the way a research solver would. They advance a handful of bodies a few pixels per tick, test overlapping shapes, and resolve the overlap with a rule the designer can ship before lunch. That rule is the real physics engine. If you learn how it judges contact, the catalog on dianyingsir stops feeling random: Basketball Real is an impulse sport, Blumgi Ball is a bounce toy, and Parking Fury is a kinematic maze that only pretends to be a car.

What the engine is actually judging

A tick has three jobs. First, integrate: take velocity, multiply by a time step, write a new position. Second, detect: ask whether two shapes occupy the same space. Third, resolve: push them apart, bounce them, or freeze the loser. Everything you feel as “weight,” “slip,” or “cheap hit detection” is a preference in those three steps. The art can be a 3D mesh; the judgment is still a 2D test if the designer projected the playfield onto a plane.

Discrete tests versus continuous sweeps

Most HTML5 packages test overlap after the move. If a ball travels farther in one tick than its own radius, it can tunnel through a rim or a bumper and the detector never saw a frame of contact. Sports loops hide this by capping speed or by running several sub-steps per animation frame. Racing loops hide it by treating the car as a slow rectangle. Stackers hide it by moving one axis at a time. Stacky Clown is honest about that: the block does not fly, it settles, so a discrete AABB test is enough. A fast soccer shot in Freekick Football 3D is not. If the first kick phases through the wall, the package either skipped continuous collision detection or the first-frame timestep spiked while assets were still decoding.

• Discrete overlap: cheap, fails when speed × dt exceeds thickness.
• Continuous sweep (CCD): traces a capsule or ray along the motion, catches thin walls.
• Sub-stepping: fake CCD by running the discrete test four times per frame.

Shapes: why a hoop is not a circle

Designers pick the cheapest shape that still looks fair. Axis-aligned boxes are fast and lie about diagonals. Circles are honest in every direction and expensive to pack against walls. Capsules (a circle dragged along a segment) are the usual compromise for a ball plus a rim. Hitboxes in Basket Swooshes and Basketball Real are not the painted orange ring. They are a slightly generous volume so a mobile thumb can score. That generosity is a design choice, not a bug, until the box is so large that a brick still counts. Our browser sports timing essay covers input delay; this page is about the volume that delay is tested against.

Parking titles are the clearest teaching examples. The sprite looks like a vehicle with mass. The solver often has no mass at all: it interpolates along a spline or steps a box until it overlaps a painted stall. Brake “feel” is a speed cap, not friction. If you wait for weight transfer that never arrives, you will overshoot every bay. Read the first thirty seconds as a geometry puzzle. If the car slides like a cursor, Parking Fury is telling you the truth.

Time: the hidden referee

Browsers draw with requestAnimationFrame. Physics should not. A variable frame time makes the same jump land differently on a 60 Hz laptop and a 120 Hz phone. Serious 2D ports accumulate leftover milliseconds and step a fixed interval (often 1/60 or 1/50 of a second) until the accumulator is empty. Casual ports multiply velocity by the raw delta and hope. You can feel the second group when a tab hitch makes a ball teleport.

Why the first shot lies

The first second of an iframe is a bad laboratory. Textures decode, audio worklets start, the JIT warms the integrator. dt can spike. A release that would have been a swish on the tenth possession becomes a brick on the first. That is why we still put a briefing on the Basketball Real detail page and why the fullscreen player is a second chance, not a different ruleset. Give the simulation one settled attempt before you decide the hitbox is dishonest.

• Fixed timestep: repeatable arcs, extra cost if the frame is late.
• Variable timestep: cheaper, couples score to refresh rate and thermal throttle.
• Background tabs: browsers clamp rAF; treat alt-tab as a pause even if the HUD still ticks.

Motorcycle lines in Motox 3 M 1 make the clamp obvious. The bike is a chain of constraints. If the tab sleeps, those constraints wake up with a large dt and the rider either tunnels the dirt or gets launched. That is not “skill issue.” It is an integrator that was never told the tab was frozen.

Resolution: bounce, slide, or stop

Detection only answers “did they overlap.” Resolution answers “now what.” A positional correction nudges the ball out of the rim. An impulse changes velocity along the contact normal. Restitution (bounciness) and friction (tangential kill) are two scalars most players never see and always feel. Blumgi Ball advertises restitution: the joke of the loop is that energy barely dies. A parking stall wants the opposite: overlap should halt, not rebound, or the car chatters against the curb. If a package chatters, the solver is fighting itself—pushing out, overlapping again next tick—usually because friction is too low for the correction size.

Tile sliders are a third family. They skip impulses entirely. 2048 Remastered does not bounce tiles; it snaps them to a grid after a discrete move. Calling that physics is a stretch, but the judgment still exists: two tiles occupy one cell only if their values match. Collision is equality, not geometry. Once you see that, you stop waiting for inertia that the code never stored.

Input is sampled, not continuous

Pointer events arrive when the browser feels like delivering them. The simulation reads the latest pointer on its own tick. If you release between ticks, the engine may use the previous position. On a 60 Hz loop that is 16 ms of “I let go already.” Sports players call it input delay; it is often just aliasing. Football Kick 3D and Basketball Real both punish early release because the charge meter is a discrete bucket, not a smooth analog. Hold until the bucket you want, then release on the next tick rather than chasing a perfect millisecond that the engine cannot see.

How to read a new title in sixty seconds

You do not need the source. You need one experiment. Move slowly, then move at the game’s maximum, then glance off an edge. The three outcomes tell you the solver:

Use the detail page before you trust the iframe. We write how-to steps for the loop you are about to fight, not for a generic “use WASD” template. If the briefing and the first bounce disagree, believe the bounce, then leave a note via Contact if the package looks broken rather than merely strict.

Related reading: timing, hitboxes, and input delay, how instant-play runtimes evolved into WebAssembly, and the Sports or Racing shelves when you want to feel the difference instead of reading it.