Game: Breakout Theme: Neon Arcade Date: 2026-04-04 ## Prompt Create a highly polished, single-file HTML5 Canvas game named "Shatterlight". It is a Breakout/Arkanoid clone using the Neon Arcade visual theme. Technical constraints: - Vanilla JavaScript, HTML, CSS in a single `index.html` file. - No external dependencies (no images, no framework, no audio). - HTML5 Canvas for all rendering. - Code should be complete. DO NOT use placeholder comments. Write every function and draw call out in full. Game mechanics: - Paddle at the bottom, moves horizontally. - Ball bounces off walls, paddle, and bricks. - Ball angle varies based on where it hits the paddle (center = straight, edge = steeper angle). - Grid of bricks at the top. Some bricks require multiple hits to break (e.g., 1 to 3 hits). - Ball speed increases slightly as the level progresses or after clearing a row. - 3 lives. Lose a life if the ball falls below the paddle. - Progressive difficulty: levels with more bricks, multi-hit bricks, and faster speeds. - Score system: points per brick based on durability, combo bonuses, level clear bonuses. Visual constraints (Neon Arcade Theme): - Palette: Deep void (#0a0a1a), electric cyan (#00f0ff), hot magenta (#ff00aa), laser purple (#8800ff). - Canvas `shadowBlur` for neon glow on bricks, paddle, and ball. - Trail/afterglow effect: Instead of clearRect, draw a translucent background every frame. - Additive blending (`globalCompositeOperation = 'lighter'`) for glowing particles. - Particle burst explosion when a brick is destroyed or damaged. - Screen shake when a life is lost or a tough brick is shattered. - CRT styling with subtle scanlines and vignette effect in CSS. Controls & Input: - Keyboard: Arrow keys / A and D to move. SPACE to launch the ball. - Mobile/Touch: Touch drag on the bottom half of the screen to move the paddle. Tap to launch. - Prevent default touch actions on the canvas to stop scrolling. Game States & Persistence: - START state with pulsing neon title and instructions. - PLAYING state with HUD overlay. - GAME OVER state showing final score and high score (persisted in `localStorage`). - PAUSED state with translucent overlay. SEO & Social Metadata: - Include meta description, Open Graph tags, and Twitter Cards in ``. - Evocative ``: "Shatterlight". ## Notes - Neon Arcade aesthetic provides a great atmosphere for Arkanoid/Breakout. - Additive blending particles ensure satisfying destruction. - We implement `requestAnimationFrame` with delta time limiting.