How does Mario know he's standing on a platform? How does a bullet know it hit an enemy? It all starts with Collision Detection. The simplest and most efficient method used in 2D games is AABB (Axis-Aligned Bounding Box).
The Core Concept
"Axis-Aligned" means our boxes are not rotated; their edges are always parallel to the X and Y axes of the screen. This makes the math incredibly cheap for the CPU.
To check if two boxes are overlapping, we verify four conditions: 1. Is the right side of A to the right of the left side of B? 2. Is the left side of A to the left of the right side of B? 3. Is the bottom of A below the top of B? 4. Is the top of A above the bottom of B?
function isColliding(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
Why It Matters
AABB is the foundation of almost all platformers. While it can't handle complex rotations or irregular shapes, it is incredibly fast. Most games use AABB as a "broad-phase" check—if the bounding boxes aren't even touching, there's no need to run more expensive, pixel-perfect collision math.
The Takeaway
Don't overcomplicate your physics early on. 90% of game interactions can be solved with simple box-to-box checks.