Collision Detection

Everything is a rectangle

Before we can detect collisions we need a rectangle type. Every game object, player, coin, spike, ground segment, is drawn as a box, so we represent each as a rectangle:

class Rect {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
}

x, y is the top-left corner (on a canvas y grows downward). w, h are width and height. The right edge is x + w; the bottom edge is y + h.

The whole question of collision comes down to one deceptively simple thing:

Do these two rectangles overlap?

The overlap test (AABB)

AABB stands for Axis-Aligned Bounding Box, a rectangle that isn't rotated. Our game never rotates objects, so this is perfect. Two rectangles overlap only if they overlap on both the X axis AND the Y axis at the same time.

function intersects(a, b) {
  return a.x < b.x + b.w &&          // A's left is left of B's right
         a.x + a.w > b.x &&          // A's right is right of B's left
         a.y < b.y + b.h &&          // A's top is above B's bottom
         a.y + a.h > b.y;            // A's bottom is below B's top
}

That is exactly the game's aabb() function from utils/math.js:

export function aabb(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x &&
         a.y < b.y + b.h && a.y + a.h > b.y;
}

Each of the four comparisons is one side of one rectangle reaching toward the opposite side of the other. If they miss on either axis, they don't collide.

How the real game uses it

In PlayState.update(), the game checks collisions every frame against every active object:

// Coin collisions.
for (const c of this.spawn.coins) {
  if (c.active && !c.collected && collide(this.player, c)) {
    c.collect();
    this.score.addCoin();
  }
}

// Hazard collisions.
for (const h of this.spawn.hazards) {
  if (h.active && collide(this.player.hurtRect, h)) {
    this.die();   // touched a spike → game over
  }
}

collide(a, b) just calls aabb(a.rect, b.rect): the same test you wrote. Two tiny loops turn "did the player touch this?" into "collect a coin" or "game over."

Two subtle things to notice:

• The player has two hitboxes. For coins it uses the full player.rect. For hazards it uses a smaller player.hurtRect (shrunk when sliding). Smaller hitbox = fairer, easier gameplay.
• **!c.collected*: once a coin is grabbed it's removed from the check. Without it you'd score the same coin over and over.

Walk it by hand: with A = {x:100,y:100,w:40,h:56} and B = {x:120,y:130,w:22,h:22}, all four conditions are true → OVERLAP. Move B to x:500 and A.x + A.w > B.x becomes 140 > 500 → false → no collision.