Breakout Chaos

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive full-screen 2D HTML5 canvas arcade game titled “Breakout Chaos.” Rebuild it as a classic brick-breaker with a dark neon presentation and chaotic temporary power-ups.

Camera and layout: use a fixed, front-facing 2D playfield filling the viewport. The canvas background is a vertical gradient from deep navy (#11183b) at the top to almost-black navy (#090b1b) at the bottom, with faint horizontal guide lines every 36 pixels beginning below the HUD at about y=72. Keep the playfield responsive to window size and account for mobile touch input. The top HUD is HTML/UI over the canvas: four dark translucent rounded pills across the top reading “SCORE 0”, “LEVEL 1”, “LIVES 3”, and “NO CHAOS” initially. Use bold white system sans-serif text, subtle borders and shadows. At the beginning, show a centered title overlay around the upper fifth: large bold “BREAKOUT CHAOS” with a purple glow, and below it the instruction “Move with A/D or ←/→ • drag on mobile • smash bricks, catch the weird stuff.” A small bottom legend on desktop says: “Power-ups: ⚡ multiball · 🧲 sticky · 🪐 gravity · 🧱 giant · ☄️ laser · 💣 bomb · ⏱️ slowmo · 🔥 fire”. Hide that legend on coarse/mobile pointers.

Core gameplay: start a new game on the first canvas pointer interaction. Initialize score 0, level 1, lives 3, one white glowing ball, and a centered white rounded paddle near the bottom at y=viewport height minus 72. The paddle is about 120x16 pixels, with rounded corners, and the ball is an 8-pixel-radius glowing white circle. The ball launches upward at roughly 330 pixels/second. Move the paddle horizontally with A/D or left/right arrow keys; clamp it inside the screen. On mobile, dragging on the canvas directly positions the paddle horizontally; a pointer press also releases any sticky ball. Press Space to release balls held by sticky power.

Bricks: generate a centered grid below the HUD, starting around y=88. Use 7–11 columns depending on viewport width (roughly one column per 60 pixels), 5+level rows, capped at 10 rows, with 6-pixel gaps. Bricks are approximately 20 pixels high and at most 64 pixels wide. Use vivid alternating neon colors: pink, orange, yellow, mint, cyan, purple, and magenta. Most bricks have one hit point on level 1; higher levels increase hit points approximately every two levels, and upper rows on later levels can have an extra hit point. Multi-hit bricks show a small white square marker. About 12% of bricks except the first row are gray-purple “unbreakable” blocks with a metallic/light border, corner details, and glow. Normal ball impacts reverse horizontal or vertical velocity based on collision overlap, damage the brick, award score, spawn particles, and have a chance to drop power-ups. Destroying a normal brick awards 100 plus 10 times the current combo, while non-lethal damage awards 25; destroying an unbreakable brick awards 200. Reset the combo when all balls are lost. A visible screen shake and colorful burst particles should accompany destruction.

Ball rules: bounce off the left and right walls and the horizontal boundary at y=72, and bounce from the paddle. Paddle hits steer based on the ball’s horizontal offset from paddle center, with speed increasing slightly, capped around 620; reset combo on paddle contact. Balls falling below the viewport are removed. When no balls remain, lose one life and reset a new ball if lives remain. At zero lives, stop the game and display “GAME OVER” plus “Final score: [score] • chaos rating: [UNHINGED if score > 6000, otherwise WARMING UP]”, then show a prominent bottom-centered gradient pink/purple “PLAY AGAIN” button. When every brick is destroyed, advance the level, generate a denser/tougher new grid, and slightly increase existing ball speeds.

Power-ups: destroyed bricks have a 28% chance to release a slowly falling, rotating 28x28 rounded dark tile with a white outline and the corresponding emoji icon. Catch it with the paddle to activate it, show its icon and uppercase name in the right HUD pill instead of “NO CHAOS,” and emit white pickup particles. Implement exactly these effects: ⚡ MULTIBALL clones/creates two additional balls using perpendicular-ish velocities based on the current ball; 🧲 STICKY lasts 9 seconds and makes paddle-hit balls stick until Space or another pointer press; 🪐 GRAVITY FLIP immediately reverses the vertical velocity of every ball; 🧱 GIANT PADDLE lasts 10 seconds and expands paddle width to 1.75x; ☄️ LASER PADDLE lasts 10 seconds and turns the paddle pink/red while periodically firing two vertical laser bolts from points near its sides, which travel upward and damage bricks; 💣 BOMB detonates at the pickup location and destroys all nearby bricks within a 140-pixel radius, including unbreakables, with score and explosion effects; ⏱️ SLOWMO lasts 6 seconds and makes ball simulation run at about 38% time scale; 🔥 FIRE BALL lasts 7 seconds, colors the ball orange-red and makes it pierce/destroy bricks without normal bounce reversal, including unbreakables, while slightly accelerating it. Give the HUD priority to displaying sticky, giant, laser, slowmo, or fire when active, otherwise display other active power-up names; return to “NO CHAOS” when none is active.

Visual effects: balls have a short fading white motion trail; fire balls glow orange/red. The normal paddle is pale white with a strong glow, sticky paddle is cyan, laser paddle is hot pink/red, and giant retains the current effect color. Power-up tiles rotate as they fall. Lasers are narrow pink/red vertical beams. Use glowing brick shadows, white highlights on normal bricks, metallic gray unbreakable styling, white/orange explosion particles, and mild randomized camera shake on impacts. Keep the style clean, high-contrast, neon arcade, with no external assets required; use canvas primitives, text, gradients, emoji, and particles.