Build a fully playable Brick Breaker game in a single HTML/CSS/JS file with the following features:
Pre-Game Screen
Display a centered input field with placeholder text like "Type something..."
A "Start Game" button below it
Clean, minimal UI — dark background, neon or retro arcade aesthetic
Text-to-Bricks Layout
When the user clicks Start, render the typed text as pixel/bitmap font bricks on the canvas — each letter is formed by a grid of colored bricks (like a dot-matrix display)
Use a built-in 5×7 or 7×9 pixel font map to convert each character into a brick pattern
Bricks should be colorful (e.g., each row or letter gets a distinct color)
Scale and center the brick layout to fit nicely in the upper half of the canvas
Classic Brick Breaker Gameplay
A paddle at the bottom, controlled by mouse or arrow keys / touch drag
A ball that bounces off walls, the paddle, and bricks
Bricks are destroyed on hit — satisfying pop effect (flash or particle burst)
Ball speed increases slightly over time or after N brick hits
Lives system — player gets 3 lives; losing a life when ball falls below paddle
Win condition — all bricks cleared; show a "You Win!" screen
Game Over screen with a "Play Again" button that goes back to the input screen
Polish
Score counter (top of screen)
Sound effects using Web Audio API (bounce, break, lose life)
Smooth 60fps requestAnimationFrame loop
Responsive canvas that fits the browser window












