How to Build an Endless Runner Game with Lovable

Build a side-scrolling endless runner game using HTML5 Canvas with these features:

1. PLAYER: A square character (40x40px) on the left side of the screen (x=100). The character runs in place with a simple 2-frame leg animation. The player can only move vertically (jump).

2. JUMPING: Press Space or tap the screen to jump. The jump should feel good — fast upward acceleration, smooth gravity pulling back down. Allow double-jump (one extra jump in mid-air). The player should not be able to jump while on the ground if already grounded.

3. OBSTACLES: Spawn obstacles from the right side of the screen moving left. Two types:
   - Ground obstacles: rectangles (30-60px wide, 40-80px tall) sitting on the ground
   - Flying obstacles: rectangles floating at jump height (force the player to time their jumps)
   Spawn a new obstacle every 1.5-2.5 seconds (random interval). Increase spawn rate as score goes up.

4. COINS: Golden circles (15px radius) that appear between obstacles at random heights. Collecting a coin adds 10 to the score and shows a brief "+10" popup.

5. SCORING: Distance-based score that counts up 1 point per frame. Display the score in the top-right corner. Show high score below it (saved to localStorage).

6. SPEED: Start at a base speed of 5px/frame. Increase speed by 0.5 every 500 points, capping at 12px/frame. The background should scroll to show movement.

7. COLLISION: Simple rectangular hitbox collision. When the player hits an obstacle, show a "Game Over" screen with final score, high score, and a "Play Again" button. Flash the screen red briefly on death.

8. BACKGROUND: A simple parallax scrolling background with a sky gradient (light blue to white), distant mountains (slow scroll), and a ground plane (fast scroll matching obstacle speed).

9. VISUAL STYLE: Clean geometric style with a dark blue player character, green ground, red/orange obstacles, and golden coins. Use bright, saturated colors.

10. CONTROLS: Space bar to jump on desktop. Tap anywhere on screen to jump on mobile. Show "Press Space or Tap to Start" on the title screen.

Improve the jump physics:
- Make the initial jump velocity faster so the player reaches max height quickly
- Add a brief "hang time" at the peak of the jump where gravity is reduced by 50% for 5 frames
- When the player releases the Space key early during a jump, cut the upward velocity in half for a short hop
- Add a subtle squash-and-stretch effect: the player compresses slightly on landing and stretches slightly at the start of a jump
- Make the double jump slightly weaker than the first jump (80% of the height)
- Add a small dust particle effect on landing

Add more obstacle variety:
- Add a third obstacle type: wide gaps in the ground that the player must jump over (remove a section of the ground platform)
- Create obstacle patterns: sometimes spawn two ground obstacles close together requiring precise timing, or a ground obstacle followed immediately by a flying obstacle
- Add warning indicators: show a small "!" icon 200px ahead of flying obstacles so players can react
- Color-code obstacles: ground obstacles are dark red, flying obstacles are dark orange, and gaps have yellow warning stripes on their edges
- As speed increases past level 5 (2,500 points), start spawning taller ground obstacles that require double-jump to clear

Add three power-ups that spawn occasionally (every 15-25 seconds, appearing as floating items):

1. SHIELD (blue diamond icon): Absorbs one hit from an obstacle. Show a blue glow around the player while shield is active. The shield breaks with a shatter animation on impact.

2. MAGNET (purple horseshoe icon): Attracts all coins within a 150px radius toward the player for 8 seconds. Show a purple aura while active.

3. SLOW-MO (green clock icon): Reduces game speed by 50% for 5 seconds. Everything moves in slow motion except the player's jump speed. Show a green tint overlay while active.

Show active power-ups as small icons below the score. Each power-up should have a visible timer bar showing how long it lasts.

Add sound effects using the Web Audio API (generate sounds programmatically, no audio files):
- Jump: short upward pitch sweep (200Hz to 400Hz over 100ms)
- Double jump: higher pitch sweep (300Hz to 600Hz over 100ms)
- Coin collect: bright two-note chime (800Hz then 1200Hz, 50ms each)
- Obstacle hit / death: low rumble (100Hz, 300ms with decay)
- Power-up collect: ascending three-note arpeggio
- Milestone (every 500 points): brief triumphant fanfare
- Add a mute button in the top-left corner that toggles all sounds on/off
- Save mute preference to localStorage

Add polished game screens:
- START SCREEN: Show the game title "Endless Runner" in large pixel-style text, the high score, and "Press Space or Tap to Start" with a pulsing animation. Show the player character running in place in the center. Add a subtle scrolling background behind the title screen.
- GAME OVER SCREEN: Show "Game Over" with the final score counting up from 0 to the actual score. Show "New High Score!" in gold text if they beat their record. Display stats: distance run, coins collected, obstacles dodged. Add "Play Again" button and "Share Score" button that copies "I scored [X] in Endless Runner! Can you beat me?" to clipboard.
- Add a brief 3-2-1 countdown before each game starts so the player can get ready.

Add a difficulty selector on the start screen: "Easy" (slower speed, fewer obstacles, triple jump), "Normal" (default settings), and "Hard" (faster start speed, more obstacles, single jump only). Save the selected difficulty and show it during gameplay. Track separate high scores for each difficulty.

Add a "Timed Run" mode: survive for exactly 60 seconds with obstacles spawning faster and faster. Show a large countdown timer at the top. If the player survives the full minute, show a special "YOU SURVIVED!" victory screen with celebration effects. Track the best time survived.

Add visual juice: trails behind the player that intensify with speed, screen shake on obstacle collision, particles exploding from collected coins, a speed-lines effect when the game speed is above 8px/frame, and a dramatic slow-motion zoom on the death frame before showing the game over screen.

Save the top 10 high scores to localStorage with the date achieved. Show a "Top Scores" leaderboard on the start screen as a scrollable list. Highlight the current run's position in the leaderboard if it qualifies. Show rank badges (gold, silver, bronze) for the top 3 scores.

Add 5 unlockable character skins that change the player's color and shape: Default (blue square), Ghost (white, slightly transparent), Fire (red, with flame trail particles), Ice (cyan, with snowflake trail), and Gold (earned by scoring 10,000+ points). Show a skin selector on the start screen. Save unlocked skins to localStorage.