Browser Game Physics: How Collision Detection Works

A developer's guide to how browser games handle collision detection, from axis-aligned bounding boxes to spatial partitioning.

If you have ever rage-quit a browser platformer because your pixel-perfect jump clipped through a solid platform and sent you hurtling into a digital void, you can blame collision detection. Or rather, you can blame the maths trying to figure out if two digital shapes are occupying the same space at the same time.

With web gaming enjoying a massive renaissance thanks to powerful modern JavaScript engines and WebAssembly, understanding how browser games process physics has become essential. Whether you are building an indie arcade hit for Wobblox or just curious why your favourite HTML5 shooter runs so smoothly, let us dive into the mathematical wizardry that stops your sprite from falling straight through the floor.

What is Collision Detection in Browser Games?

Collision detection is the computational process of detecting the intersection or overlap of two or more digital objects (such as sprites, projectiles, or boundaries) within a game world. In web development, it acts as the invisible referee determining whether a player has collected a coin, smashed into a wall, or scored a goal.

Because browsers run code sequentially (mostly on a single main thread, unless Web Workers are involved), efficiency is everything. If your collision engine takes too long to calculate whether a laser beam hit an asteroid, your frames per second (FPS) will plummet faster than a lead balloon in a vacuum.

The Core Mechanics: From Boxes to Circles

Developers do not usually check pixel-for-pixel collisions unless they are making a retro retro-style retro game with very specific requirements. Instead, they use simplified geometric approximations called collision shapes or hitboxes.


+-------------------+      +-------------------+
| Axis-Aligned      |      | Bounding Circle   |
| Bounding Box      |      |                   |
|   +-----------+   |      |        /---\      |
|   |  Sprite   |   |      |       |  o  |     |
|   +-----------+   |      |        \---/      |
+-------------------+      +-------------------+

1. Axis-Aligned Bounding Boxes (AABB)

The bread and butter of casual web gaming. An AABB is a rectangular box aligned with the coordinate axes of the screen (meaning it cannot rotate).

The Math: To check if Box A overlaps Box B, we simply check if their X and Y intervals overlap.
The Verdict: Blazing fast, perfect for platformers and grid-based puzzles, but looks hilariously wrong if your character rotates diagonally.

2. Bounding Circles

Instead of a box, we wrap the game asset in a circle defined by a centre point and a radius ($r$).

The Math: Calculate the distance between the two circle centres using Pythagoras' theorem ($a^2 + b^2 = c^2$). If the distance is less than the sum of both radii ($r_1 + r_2$), you have a collision.
The Verdict: Rotation-proof and computationally cheap, making it a favourite for bullets, asteroids, and rolling spheres.

Code Example: Basic AABB Collision in JavaScript

Here is a quick, vanilla JavaScript snippet showing how easy it is to implement basic AABB collision detection in your own browser experiments:


function checkCollision(rect1, rect2) {
    return (
        rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y
    );
}

// Example usage:
const player = { x: 50, y: 50, width: 30, height: 30 };
const wall   = { x: 60, y: 50, width: 50, height: 50 };

if (checkCollision(player, wall)) {
    console.log("Ouch! Wall hit!");
}

The Performance Trap: $O(N^2)$ and Spatial Partitioning

Here is where casual web games often hit a brick wall. If you have 100 active bullets and 50 enemies on screen, naive collision checking requires comparing every single bullet against every single enemy. That is $100 \times 50 = 5,000$ checks every single frame (60 times a second).

If you scale that up to hundreds of objects, your JavaScript loop will start sweating profusely.

How Developers Solve It

According to recent discussions in community developer forums and technical subreddits, modern indie web developers avoid this bottleneck using spatial partitioning. Instead of checking everything against everything, the game world is split into a grid or a tree structure:

Optimisation Technique	How It Works	Best Used For
Spatial Hashing	Divides the game world into a grid of buckets; objects register only the bucket they currently occupy.	Open-world casual games with hundreds of moving entities.
Quadtrees	Recursively subdivides space into four quadrants whenever a section gets crowded.	2D physics engines with dense clusters of objects.
Broadphase / Narrowphase	Uses cheap checks (circles/boxes) first to weed out non-collisions, then expensive pixel-perfect checks only when necessary.	Action games requiring precise hitboxes.

Key Takeaways

Collision detection is the mathematical foundation that governs interaction between digital objects in browser games.
AABB and Bounding Circles offer the best performance-to-accuracy ratio for lightweight web titles.
Spatial partitioning (like Quadtrees and Spatial Hashing) is vital for stopping high object counts from tanking your frame rate.
Keeping collision logic lean ensures your indie browser game runs smoothly across everything from a high-end desktop rig down to a budget mobile phone.