Breakout
Ball, paddle, bricks — and collision that never tunnels through.
IntermediateWeb appGame8–18hAI-buildable 4/5no setup
The arcade classic, where the real work is collision detection. A fast ball can pass straight through a brick between frames, so naive per-frame overlap checks aren't enough. Swept collision and correct reflection angles are the substance here.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Paddle controlled by pointer and keyboard
- Ball reflects off walls, paddle and bricks correctly
- Reflection angle varies by where the ball hits the paddle
- Bricks break and the level completes when cleared
- The ball never tunnels through a brick at high speed
- Lives, score and multiple levels
- Physics is frame-rate independent
The interesting part
- Swept collision detection to prevent tunnelling
- Determining which face of a brick was hit for correct reflection
- Frame-rate independence without physics becoming unstable
Once it works
- Add power-ups like multi-ball and paddle extension
- Add a level editor
- Add brick types requiring multiple hits
Suggested stack
reacttypescripttailwindcanvas-api