Brick Breaker
Canvas Brick Breaker with launch state, wall/paddle/brick collisions, lives, levels, progress, feedback, and touch controls.
- Status
- Archived experiment / live demo
- Last updated
- May 2026
- Controls
- Move the paddle, launch the ball, clear bricks, and keep the ball in play.
- Keyboard
- Arrow keys or A/D move, Space launches or acts, and P, Escape, or Enter resumes from pause.
- Touch
- Use the on-screen left, launch, and right buttons or pointer movement on the playfield.
- Accessibility
- Score, best score, lives, level, power state, and clear progress are shown outside the canvas.
Ready
Brick Breaker ready.
Keyboard and touch controls
Keyboard shortcuts
- Left / AMove the paddle left while held.
- Right / DMove the paddle right while held.
- SpaceLaunch the ball or trigger the current action.
- EnterLaunch, resume, or continue from the current state.
- P / EscPause or resume the game.
Touch controls
- Left / RightHold the on-screen buttons to move the paddle.
- LaunchUse the center button to serve the ball.
- Pointer moveMove over the playfield to guide the paddle directly.
Paddle state, brick collision, and level progress.
Main state tracks paddle, ball, bricks, score, lives, level, power, and run state. The loop moves, collides, updates HUD, and redraws.
Paddle physics, level state, and arcade HUD behavior.
- Implemented paddle movement, ball launch state, wall/paddle/brick collision checks, lives, scoring, and level-clearing logic.
- Built progress, level, best-score, and power readouts around a viewport-aware Canvas playfield.
- Added keyboard, pointer, and labeled touch controls that share the same movement and launch state.
Brick-breaker rules are familiar; this loop, state, collision code, and presentation are custom.
Archived experiment with a working arcade loop.
Solid: launch, paddle movement, collisions, levels, scoring, and touch. Hardening: collision tests, profiling, level validation, mobile QA, and accessibility fallbacks.
Static arcade page with level data in source.
GitHub Pages serves brick-breaker.html, brick-breaker.css, and brick-breaker.js. No env vars or external APIs beyond browser APIs and LocalStorage. Local: run python -m http.server 8000 and open /brick-breaker.html.