How to Build a Platformer Game with Lovable

Build a side-scrolling platformer game using HTML Canvas with the following features:

PLAYER CHARACTER:
- A small square character (24x24 pixels), colored blue (#4a9eff), with simple eyes (two white dots)
- Arrow keys or A/D for horizontal movement (left/right)
- Spacebar or Up arrow to jump
- Gravity pulls the character down at a constant acceleration
- Character can only jump when standing on a platform or the ground (no double jump)
- Horizontal movement speed: smooth acceleration and deceleration (not instant stop)
- Character faces the direction of movement (flip the eyes)

PLATFORMS:
- Ground platform spans the bottom of the screen
- Floating platforms at various heights and widths throughout each level
- Platforms are solid green (#4ade80) rectangles with a darker top edge
- Character can land on top of platforms (collision from above) but passes through from below and sides
- Some platforms are moving: they slide horizontally back and forth slowly

COLLECTIBLES:
- Yellow coin circles scattered on and above platforms
- Collecting a coin (player overlaps it) increases score by 10
- Coins rotate (simple animation: scale X oscillation to simulate spinning)
- Each level has 10-15 coins to collect

ENEMIES:
- Red square enemies (20x20 pixels) that pace back and forth on platforms
- Enemies reverse direction when reaching the edge of their platform
- Touching an enemy from the side or below kills the player
- Jumping on top of an enemy destroys the enemy and bounces the player up (+5 points)
- 3-5 enemies per level

LEVEL SYSTEM:
- Level is wider than the screen: the camera follows the player horizontally (side-scrolling)
- A flag/goal post at the far right end of the level
- Reaching the goal advances to the next level
- 3 levels with increasing difficulty:
  - Level 1: mostly flat with a few gaps and platforms, 2 enemies, 10 coins
  - Level 2: more vertical platforming, moving platforms, 4 enemies, 12 coins
  - Level 3: large gaps, fast enemies, more moving platforms, 5 enemies, 15 coins

GAME STATE:
- HUD at the top: score, current level, lives (start with 3)
- Dying (falling off screen or touching enemy) loses a life and restarts the current level
- 0 lives = game over screen with final score and "Press SPACE to Restart"
- Completing all 3 levels shows a victory screen with total score and time

UI AND VISUALS:
- Sky blue gradient background (#87ceeb to #e0f0ff)
- Simple parallax: clouds in the background that move slower than the foreground
- Canvas size: 800x500 on desktop, scales proportionally on mobile
- 60 FPS game loop using requestAnimationFrame
- Retro pixel aesthetic with clean, colorful shapes
- All rendering done on a single HTML Canvas element

Adjust the platformer physics for better game feel:
1. Add "coyote time": the player can still jump for 100ms after walking off a platform edge
2. Add "jump buffering": if the player presses jump within 100ms of landing, the jump triggers immediately on landing
3. Make the jump height variable: tapping jump gives a short hop, holding jump gives a full-height jump (cut upward velocity when jump key is released early)
4. Add a subtle squash-and-stretch effect: the character squishes slightly on landing and stretches slightly at the peak of a jump
5. Increase horizontal air control slightly so the player can adjust position mid-jump
6. Add a small dust particle effect when landing and when changing direction on the ground

Improve the platformer visuals and level design:
1. Add decorative background elements: distant mountains (dark silhouettes), bushes (green semicircles on the ground), and animated clouds that drift slowly
2. Platforms should have a grass texture on top (a thin green strip with small triangle tufts)
3. Add a checkered or patterned ground instead of a solid block
4. Make coins glow with a subtle yellow radial gradient
5. Add floating "helper" platforms in Level 1 that blink on and off every 2 seconds (visible for 1.5s, invisible for 0.5s) with a warning flash before disappearing
6. Add a background color shift per level: Level 1 is daytime (sky blue), Level 2 is sunset (orange/pink), Level 3 is nighttime (dark blue with stars)

Add power-ups to the platformer:
1. Speed Boost (lightning bolt icon, yellow): increases movement speed by 50% for 8 seconds. Show a yellow trail behind the player while active.
2. Shield (star icon, light blue): protects from one enemy hit without losing a life. Show a glowing circle around the player while active. Disappears after one hit.
3. Double Jump (wing icon, white): grants one extra jump in mid-air for 15 seconds. Show small wing sprites on the character while active.
4. Power-ups appear on specific platforms in each level (1 per level in Level 1, 2 in Level 2, 3 in Level 3)
5. Show active power-up icons and remaining duration in the HUD
6. Add a collection sound and brief screen flash when picking up a power-up

Add sound effects to the platformer using the Web Audio API (no external files):
1. A short "boing" for jumping
2. A coin collection "pling" (ascending two-note chime)
3. A "boop" when stomping an enemy
4. A descending tone when the player dies
5. A subtle footstep sound that plays rhythmically while walking on ground
6. A whoosh sound for the speed boost power-up activation
7. A victory jingle when reaching the level goal
8. Quiet background music: a simple repeating 4-bar melody using square wave synthesis
9. Mute button in the top right corner. Sounds and music muted by default.

Add mobile support to the platformer:
1. On screens under 768px wide, scale the canvas to fill the screen width
2. Add on-screen touch controls at the bottom of the screen:
   - Left side: left and right arrow buttons (large, semi-transparent, circular, 64px)
   - Right side: jump button (large, semi-transparent, circular, 72px, labeled "A")
3. Touch controls should support press-and-hold for continuous movement
4. The jump button should support variable jump height (quick tap = short hop, long press = full jump)
5. Make sure touch events don't interfere with each other (player should be able to move right and jump simultaneously)
6. Add a thin semi-transparent bar behind the controls so they're visible against any background
7. Hide on-screen controls on desktop (show only when touch is detected)

Add difficulty selection on the start screen: Normal (3 lives, current speed), Hard (2 lives, enemies move 30% faster, moving platforms move faster, coins are worth double points), and Speedrun (1 life, a visible speedrun timer counting up, no power-ups, leaderboard shows fastest completion time). Show selected difficulty on the game over and victory screens.

Add a speedrun timer that displays in the HUD showing mm:ss:ms. The timer starts when the player first moves in Level 1 and stops when they reach the goal in Level 3. On the victory screen, show the total time alongside the score. Save the best time per difficulty to localStorage. Show a ghost trail of the best run (a semi-transparent version of the player that replays the best run's movements) if a best time exists.

Add juice and polish: screen shake when the player dies (canvas offset oscillation for 300ms), smooth camera lerp instead of snapping to the player position, parallax scrolling at 3 depths (far background moves at 10% speed, mid-ground at 30%, foreground at 100%), particle effects for enemy destruction (red squares burst outward), and a transition animation between levels (screen wipe from right to left with the new level's background color).

Save high scores to localStorage: track best score and best time for each difficulty level. Show a "Records" section on the start screen with a table: difficulty, best score, best time, coins collected. After the victory screen, if the player set a new record, show a "New Record!" banner with a golden flash. Add a "Reset Records" button with a confirmation dialog.

Add a simple level editor accessible from the start screen. The editor shows an empty grid matching the game canvas. Click to place platforms (left click), coins (right click or toggle), enemies (shift+click), and the goal flag. Add buttons to select which element to place. Include a "Test Level" button that plays the custom level immediately. Save custom levels to localStorage. Add "Save Level" and "Load Level" buttons. Limit to one custom level slot for simplicity.