Brick Breaker
Paddle games need precise collision and mobile input; I built a Canvas/JavaScript Brick Breaker with launch state, wall/paddle/brick collisions, lives, levels, progress tracking, power feedback, and labeled 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 covers paddle position, ball position and velocity, brick layout, score, lives, level, power state, best score, and whether the ball is served, playing, paused, won, or over. The animation loop moves the ball and paddle, resolves collisions, updates HUD values, and redraws the canvas. Collision logic handles walls, paddle angles, brick removal, power feedback, and level-cleared progress; scoring comes from brick hits, level clears, and survival. Keyboard input uses Arrow keys or A/D for movement and Space/Enter for launch or resume. Touch buttons set the same movement flags and launch action. The lesson was keeping pointer, keyboard, and button input funneled into shared paddle/action state so controls stay predictable.
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 a known arcade pattern; this play loop, UI state, collision code, and presentation are custom browser code.
Archived experiment with a working arcade loop.
Already solid includes launch state, paddle movement, wall/paddle/brick collisions, levels, scoring, and touch controls. Demo-only areas include informal collision tuning and limited nonvisual alternatives. Hardening would add collision edge tests, performance profiling, validated level data, mobile QA, and stronger accessibility fallbacks.
Static arcade page with level data in source.
Hosted/run location: GitHub Pages serves brick-breaker.html, brick-breaker.css, and brick-breaker.js. Environment/config: no environment variables are required; level layout, scoring, lives, and physics constants live in JavaScript. External APIs/services: none beyond Canvas, keyboard/touch/pointer events, Fullscreen, and LocalStorage for best score. Local development: run python -m http.server 8000 and open /brick-breaker.html. Security: there are no secrets or remote writes.