# Gunblock ## About This App A retro action puzzle game where you shoot enemies and push blocks onto targets simultaneously ## Specification # Gunblock — Top-Down Action Puzzle Game Create a real-time top-down action puzzle game called **Gunblock** rendered on an HTML5 Canvas. The player navigates a grid-based arena, shoots enemies, and pushes blocks onto target locations — all simultaneously. The tension comes from juggling combat and puzzle-solving at once. ## App Type **HTML5 Canvas App** — This is a real-time game with fluid pixel-space rendering, sprite animation, continuous frame updates, and collision detection. Canvas is the ideal choice. ## Visual Style & Presentation ### Overall Aesthetic - **Pixel art style** with a retro 16-bit feel, reminiscent of top-down Zelda or classic SNES action games. - The arena fits on a single screen — no scrolling. The canvas should be centered on the page with a dark background (deep charcoal or near-black) surrounding it. - Use a **warm, earthy palette** for floor tiles (stone/dungeon feel), **bright saturated colors** for interactive elements (blocks, targets, player), and **menacing reds/purples** for enemies and spawners. - The grid is a logical layer — floor tiles are drawn on the grid but the grid lines themselves are subtle or invisible. Target locations are drawn as glowing floor markers (pulsing softly). ### Canvas Size & Layout - The game canvas should be approximately **640×640 pixels** (or a similar square), scaled up cleanly with `image-rendering: pixelated` for crisp pixel art. - Above the canvas: the game title **"GUNBLOCK"** in a bold, blocky pixel font, along with a **level indicator** and a **blocks remaining** counter (e.g., "3/5 blocks placed"). - Below the canvas: minimal control hints (e.g., "Arrow Keys: Move | Space: Shoot | R: Restart"). ### HUD Overlay - A small in-canvas HUD showing: current level number, blocks placed vs. total targets. - On death: a brief **screen flash** (red tint) and a "YOU DIED — Press R to Restart" overlay text. - On level complete: a satisfying **"LEVEL COMPLETE!"** banner with a brief celebratory particle burst before auto-advancing. ## Game Entities & Sprites ### Player Character - A small humanoid sprite (~16×16 or 32×32 pixel art) with **4 directional facing states** (up, down, left, right). - **Walking animation**: at least 2-3 frame cycle per direction. - **Idle state**: a gentle breathing/bobbing animation in the last-faced direction. - Movement is **fluid and continuous** (not snapped to grid). Speed should feel responsive but not twitchy — roughly 3-4 tiles per second. - The player has a visible "gun" or arm that indicates facing direction. ### Blocks - Grid-scale objects (one tile in size) with a distinct heavy/stone appearance — they should look pushable. - Blocks have a **rounded diamond collision shape** for forgiving pushes — slight angle nudges should gently correct alignment rather than hard-stopping. - When pushed, blocks **slide smoothly** in the push direction with slight momentum/friction (not instant teleport). - When within ~25% of a cell width from a target center, blocks **snap into place** with a smooth magnetic pull animation and a satisfying visual/audio cue (glow pulse, slight scale bounce). - Snapped blocks change appearance slightly (subtle glow or color shift) but **can still be pushed off**. ### Enemies - Small, distinct sprites (different shape/color from the player) with their own **movement animation** (2-frame waddle or hover cycle). - **Patrol behavior**: enemies wander in simple patterns when the player is far away. - **Chase behavior**: when the player enters a detection radius (~5 tiles), enemies switch to direct pursuit at a slightly slower speed than the player. - Contact with the player = **instant death and level restart**. - Enemies are destroyed by one bullet hit — show a brief **poof/explosion animation** on death. ### Spawners - Fixed, indestructible structures on the map — visually distinct (dark portal, glowing pit, or mechanical hatch). - They have a **pulsing animation** that intensifies just before spawning a new enemy. - Spawn rate: approximately one enemy every 4-6 seconds per spawner. - Spawners should be placed strategically to keep pressure on the player without making the puzzle unsolvable. ### Projectiles (Bullets) - Small, bright, fast-moving sprites (e.g., a glowing orb or pixel bullet). - Travel in a straight line in the player's facing direction at high speed (~8-10 tiles per second). - **Stopped by**: walls, blocks, and enemies (destroying the enemy on contact). - Fire rate should have a brief cooldown (~0.3-0.4 seconds) so the player can't just spray endlessly. - Brief muzzle flash animation at the player on firing. ## Level Design ### Arena Structure - Walls form the outer boundary and interior obstacles — drawn as solid dark stone tiles. - The arena is a grid of roughly **16×16 to 20×20 tiles**. - Include **at least 3-5 predefined levels** with increasing complexity: - **Level 1**: 2 blocks, 2 targets, 1 spawner — tutorial-like simplicity. - **Level 2**: 3 blocks, 3 targets, 2 spawners — introduces multi-block management. - **Level 3+**: More blocks, tighter corridors, more spawners, blocks that need to be routed around obstacles. - Target locations are marked with a **glowing diamond or circle on the floor** — they pulse gently to draw attention. ### Map Tiles - **Floor**: subtle stone/tile pattern, low contrast so gameplay elements stand out. - **Walls**: darker, heavier tiles with slight depth shading (top edge highlight). - **Targets**: bright, glowing floor markers (green or gold) with a soft pulse animation. ## Controls ### Keyboard (Primary) - **Arrow Keys** or **WASD**: Move in four cardinal directions. Holding a direction = continuous movement. The last pressed direction = facing direction. - **Space** or **Z**: Fire a projectile in the current facing direction. - **R**: Restart the current level immediately. - **Enter**: Start game / advance from title screen / confirm prompts. ### Gamepad (Optional/Bonus) - D-pad or left analog stick for movement. - A button to fire, Start to restart. ## Game Flow ### Title Screen - A stylish pixel-art title screen with **"GUNBLOCK"** in large blocky letters. - Animated background: maybe a slow pan across a sample arena, or a looping demo of blocks being pushed. - "Press ENTER to Start" prompt with a blinking cursor animation. ### Gameplay Loop 1. Level loads — player, blocks, targets, spawners, and walls are placed. 2. Player moves freely, shoots enemies, pushes blocks toward targets. 3. Enemies spawn continuously from spawners — player must manage threats while solving the puzzle. 4. When all blocks are simultaneously on their targets → **level complete**. 5. On death → instant restart of the current level from initial state. 6. On completion of all levels → a simple **"YOU WIN!"** screen with total deaths counter and option to replay. ### State Persistence - Use **localStorage** to save: current level progress, total death count, and best (fewest deaths) run per level. - Display a small "Deaths: X" counter during gameplay. ## UI Elements Outside Canvas ### Header Area - Game title in a pixel/retro font (use a Google Font like "Press Start 2P" or render with CSS). - Level indicator and score/stats. ### Controls Reference - A collapsible or always-visible small panel below the canvas showing control mappings. - Styled to match the retro aesthetic — dark background, pixel font, bordered box. ### Mobile Consideration - For mobile/touch: overlay **virtual d-pad** (bottom-left) and **fire button** (bottom-right) on the canvas. - These should be semi-transparent touch zones that don't obscure too much of the gameplay area. ## Audio & Feedback (Visual substitutes if no audio) Since we're in a web app context, lean on **visual feedback** heavily: - **Screen shake** on player death (brief 3-4 frame shake). - **Flash effects** on bullet impacts and enemy deaths. - **Particle effects**: small pixel particles on block snapping, enemy death, bullet wall impact. - **Pulsing UI elements**: targets pulse, spawners pulse before spawning, HUD elements flash on state changes. ## Color Palette Reference - **Background/Walls**: #2a2a3a (dark blue-grey), #3d3d5c (lighter wall accent) - **Floor**: #4a4a5a (muted stone), #555568 (tile variation) - **Player**: #4fc3f7 (bright blue) with #fff highlights - **Enemies**: #ef5350 (angry red) with #b71c1c darker accents - **Blocks**: #ff9800 (warm orange) with #e65100 shadow - **Targets**: #66bb6a (green glow) with #a5d6a7 pulse highlight - **Bullets**: #ffeb3b (bright yellow) with #fff glow - **Spawners**: #9c27b0 (purple) with pulsing #e1bee7 highlights ## Footer - Include the standard `Remix on Berrry` link styled subtly below the game area. ## About Berrry Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain. **Visit**: https://berrry.app Transform your social media ideas into real web applications today.