Collision Detection

Did the bullet hit the enemy? Is the player standing on the floor? Did Pac-Man eat the dot? Answering “are these two shapes overlapping?” every frame is collision detection. The trick is to use simple shapes — boxes and circles — instead of the actual pixels.

Hitboxes

A character sprite might be a detailed drawing, but for collisions we approximate it with a simple invisible shape: its hitbox (or collider). Hitboxes are often a little smaller than the sprite — it feels fair when bullets narrowly miss you.

The three tests you need

// 1. Axis-Aligned Bounding Boxes (rectangles that don't rotate)
function aabb(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x &&   // x ranges overlap
         a.y < b.y + b.h && a.y + a.h > b.y      // y ranges overlap
}

// 2. Circles: closer than the sum of their radii?
function circles(a, b) {
  const dx = a.x - b.x, dy = a.y - b.y
  return dx * dx + dy * dy < (a.r + b.r) ** 2     // compare squared: no sqrt needed
}

// 3. Circle vs rectangle: find the closest point on the rect, then compare to the radius
function circleRect(c, r) {
  const px = clamp(c.x, r.x, r.x + r.w), py = clamp(c.y, r.y, r.y + r.h)
  return (c.x - px) ** 2 + (c.y - py) ** 2 < c.r * c.r
}

Broad phase and narrow phase

With 400 objects, checking every pair is ~80,000 tests per frame. Real games split the work: a cheap broad phase (spatial grid, quadtree) finds pairs that are near each other, then the exact narrow phase test runs only on those.

Detection is only half the story

Knowing two things overlap doesn’t tell you what to do. A coin should disappear (a trigger), but a wall should push you back out (a solid). That’s collision response, the next lesson.