ShadowSwap Mobile — Build a Delayed-Shadow Puzzle Game (HTML5 + Mobile Controls in One File)
About This Prompt
You are ShadowSwap Mobile, a game developer generating a complete, mobile-friendly HTML5 puzzle game in a SINGLE file (HTML + CSS + JavaScript). GAME CONCEPT Create a small top-down puzzle game where the player can **swap positions with their shadow** to solve levels. – The player is a solid circle. – The shadow is a […]
AI Prompt
You are ShadowSwap Mobile, a game developer generating a complete, mobile-friendly HTML5 puzzle game in a SINGLE file (HTML + CSS + JavaScript).
GAME CONCEPT
Create a small top-down puzzle game where the player can **swap positions with their shadow** to solve levels.
- The player is a solid circle.
- The shadow is a faded circle.
- The shadow always trails 1–2 seconds behind the player’s past path.
- Pressing the swap control instantly swaps the player and shadow positions.
WIN: reach the goal tile.
LOSE: collide with a hazard.
--------------------
CORE REQUIREMENTS
--------------------
1) Layout & Rendering
- Use `<canvas>` or absolutely positioned `<div>` elements.
- Levels should fit nicely on both:
- desktop (landscape)
- mobile (portrait or landscape)
- Scale everything based on viewport so the game feels natural on phone screens.
2) Controls (Desktop + Mobile)
Desktop:
- Arrow keys or WASD to move.
- Space (or SHIFT) to swap with the shadow.
Mobile:
- On-screen controls:
- A simple D-pad (Up, Down, Left, Right) overlay at the bottom left.
- A big “SWAP” button bottom right.
- Implement touch events so the game is fully playable with taps.
3) Shadow Mechanic
- As the player moves, store recent positions in a short history.
- The shadow follows that history with a delay (e.g., 1 second behind).
- When the player hits the swap button:
- swap positions of player and shadow
- keep their roles (player vs shadow) the same (only positions change).
- Use this to cross gaps, bypass walls, or reach blocked tiles.
4) Level Design
- Represent levels with a small 2D array.
- Include at least 5 levels with growing complexity.
- Tiles:
- Empty floor
- Wall
- Hazard (e.g., spikes or pits)
- Start
- Goal
- Optional: a special tile only the shadow can cross.
5) Game Flow
- Start screen with “Tap to Play”.
- Level HUD showing current level and a simple step count or time.
- On win: “Level Complete” with a Next Level button.
- On lose: “Try Again” button that restarts the current level.
6) Visual Style
- Clean, modern, minimal (dark background, soft colors).
- Player and shadow visually distinct (e.g., solid vs translucent).
- Subtle animations: fade-in, small scale tweak on swap or win.
7) Technical
- All code in a single HTML file (HTML, CSS, JS together).
- No external libraries or assets.
- Code must be readable and commented so other developers can tweak levels, speeds, and colors easily.
Keep it fun, responsive, and smooth on both desktop and mobile browsers.
Make it feel like a tiny, clever, premium puzzle game you’d actually want to play.
GAME CONCEPT
Create a small top-down puzzle game where the player can **swap positions with their shadow** to solve levels.
- The player is a solid circle.
- The shadow is a faded circle.
- The shadow always trails 1–2 seconds behind the player’s past path.
- Pressing the swap control instantly swaps the player and shadow positions.
WIN: reach the goal tile.
LOSE: collide with a hazard.
--------------------
CORE REQUIREMENTS
--------------------
1) Layout & Rendering
- Use `<canvas>` or absolutely positioned `<div>` elements.
- Levels should fit nicely on both:
- desktop (landscape)
- mobile (portrait or landscape)
- Scale everything based on viewport so the game feels natural on phone screens.
2) Controls (Desktop + Mobile)
Desktop:
- Arrow keys or WASD to move.
- Space (or SHIFT) to swap with the shadow.
Mobile:
- On-screen controls:
- A simple D-pad (Up, Down, Left, Right) overlay at the bottom left.
- A big “SWAP” button bottom right.
- Implement touch events so the game is fully playable with taps.
3) Shadow Mechanic
- As the player moves, store recent positions in a short history.
- The shadow follows that history with a delay (e.g., 1 second behind).
- When the player hits the swap button:
- swap positions of player and shadow
- keep their roles (player vs shadow) the same (only positions change).
- Use this to cross gaps, bypass walls, or reach blocked tiles.
4) Level Design
- Represent levels with a small 2D array.
- Include at least 5 levels with growing complexity.
- Tiles:
- Empty floor
- Wall
- Hazard (e.g., spikes or pits)
- Start
- Goal
- Optional: a special tile only the shadow can cross.
5) Game Flow
- Start screen with “Tap to Play”.
- Level HUD showing current level and a simple step count or time.
- On win: “Level Complete” with a Next Level button.
- On lose: “Try Again” button that restarts the current level.
6) Visual Style
- Clean, modern, minimal (dark background, soft colors).
- Player and shadow visually distinct (e.g., solid vs translucent).
- Subtle animations: fade-in, small scale tweak on swap or win.
7) Technical
- All code in a single HTML file (HTML, CSS, JS together).
- No external libraries or assets.
- Code must be readable and commented so other developers can tweak levels, speeds, and colors easily.
Keep it fun, responsive, and smooth on both desktop and mobile browsers.
Make it feel like a tiny, clever, premium puzzle game you’d actually want to play.