Interactive Collision Demo

This tiny demo shows simple 2D collision detection (circle vs circle). Use the arrow keys to move the green circle. When it touches the red circle, a collision event occurs.

Goal: show collision response & event

Code: vanilla JS + Canvas

Duration: ~30s to try

Controls: ← ↑ → ↓ Space (reset target)

Core collision snippet

// distance check
const dx = a.x - b.x;
const dy = a.y - b.y;
const dist2 = dx*dx + dy*dy;
if (dist2 <= (a.r + b.r)*(a.r + b.r)) {
  // collision!
}

This demo is intentionally tiny so you can open it quickly in-browser. It demonstrates detection and a simple visual reaction.