随便画，变成真的能玩的游戏

I’m uploading a hand-drawn game sketch.

Your job is to turn this sketch into a REAL, FULLY PLAYABLE mobile web game.

IMPORTANT:
Do NOT create a mockup, prototype screen, concept page, or static demo.
Do NOT just explain how to build it.
Build the actual working game and make it immediately playable.

Use my uploaded hand-drawn sketch as the source of truth for the game concept, layout, objects, and overall idea.

GAME TITLE:
GIANT FOOD RUN

CORE CONCEPT:
Create a polished 3-lane mobile obstacle runner set inside a surreal GIANT FOOD WORLD.

The player is a tiny character running forward through a world filled with enormous fries, burgers, drinks, ketchup, food boxes, coins, and oversized restaurant objects.

The visual contrast should feel dramatic:
tiny player + gigantic food environment.

I want the final result to feel much more impressive than my simple hand-drawn sketch.

-----------------------------------
GAMEPLAY
-----------------------------------

Create a short, addictive runner level that takes around 45–60 seconds to complete.

The player automatically runs forward.

Use a 3-lane running system.

MOBILE CONTROLS:
- Swipe left = move left
- Swipe right = move right
- Swipe up = jump

DESKTOP CONTROLS:
- Left / Right arrows or A / D = change lanes
- Up arrow or Space = jump

The controls must feel responsive and smooth.

-----------------------------------
OBSTACLES
-----------------------------------

Use giant food objects as obstacles, including:

- giant fries boxes
- giant burgers
- giant drink cups
- ketchup bottles
- ketchup puddles
- food packaging
- stacked food boxes

Create different obstacle patterns so the gameplay does not feel repetitive.

Examples:

Fries blocking the left lane.

A giant burger blocking the middle lane.

A drink cup blocking the right lane.

Ketchup puddles that force the player to change lanes.

Some obstacles should require jumping.

-----------------------------------
COINS
-----------------------------------

Place collectible golden coins throughout the level.

Coins should appear:

- in straight lines
- between obstacles
- in curved patterns
- before jumps
- as rewards for risky routes

When a coin is collected:

- animate the coin disappearing
- increase the score
- create satisfying visual feedback
- play a subtle collection effect if possible

-----------------------------------
LIVES
-----------------------------------

The player starts with:

❤️ ❤️ ❤️

3 lives.

When the player hits an obstacle:

- lose 1 life
- create a short impact animation
- briefly flash or shake the screen
- give the player approximately 1 second of temporary protection

Do not immediately end the game after one collision.

When all 3 lives are lost:

show GAME OVER.

-----------------------------------
FINISH LINE
-----------------------------------

This is NOT an endless runner.

Create a real level with a clear ending.

At the end of the road, create a dramatic FINISH gate inspired by my sketch.

When the player crosses the finish line:

- slow the game slightly
- trigger a celebration
- show particles / confetti
- display final score
- display coins collected
- show a PLAY AGAIN button

The ending should feel rewarding.

-----------------------------------
GAME UI
-----------------------------------

Create a clean mobile game UI.

TOP LEFT:
Score

TOP CENTER:
Distance / progress

TOP RIGHT:
Lives ❤️❤️❤️

The interface should remain readable without covering the gameplay.

START SCREEN:

GIANT FOOD RUN

Include:
- PLAY button
- simple instruction:
  SWIPE TO MOVE • SWIPE UP TO JUMP

After pressing PLAY, immediately start the game.

GAME OVER SCREEN:

GAME OVER
Final Score
Coins Collected
RESTART

VICTORY SCREEN:

YOU MADE IT!
Final Score
Coins Collected
PLAY AGAIN

-----------------------------------
VISUAL DIRECTION
-----------------------------------

This is extremely important.

Do NOT make this look like a basic student coding project.

I want it to feel like a polished casual mobile game.

Visual direction:

CINEMATIC
PLAYFUL
BRIGHT
PREMIUM
COLORFUL
SLIGHTLY SURREAL
HIGH CONTRAST

Imagine a tiny human running through a gigantic fast-food world.

Create strong perspective depth.

The road should stretch dramatically into the distance.

Food objects should feel HUGE compared with the player.

Use:

- cinematic lighting
- soft shadows
- atmospheric depth
- vibrant food colors
- glossy highlights
- subtle motion
- depth and scale
- floating particles where appropriate
- smooth animations

Make the environment feel alive.

Add background elements such as:

- gigantic restaurant signs
- giant food packaging
- oversized tables or kitchen objects
- distant food structures
- atmospheric elements

Do not overcrowd the screen.

-----------------------------------
CAMERA
-----------------------------------

Use a third-person runner camera behind the character.

The camera should:

- follow the player smoothly
- create a strong sense of forward movement
- subtly react when changing lanes
- slightly react when jumping
- create a small shake when hitting an obstacle

The camera should make the game feel dynamic.

-----------------------------------
ANIMATION
-----------------------------------

Add polished micro-interactions.

Examples:

- player running animation
- lane-changing animation
- jumping animation
- coins rotating or floating
- obstacles entering perspective naturally
- subtle environment movement
- button press feedback
- collision feedback
- finish celebration

Avoid stiff movements.

-----------------------------------
MOBILE EXPERIENCE
-----------------------------------

Design MOBILE FIRST.

The game must work well in portrait orientation.

Target approximately:

9:16 vertical mobile screen.

It must:

- fit correctly on modern phones
- avoid horizontal scrolling
- support touch controls
- use large touch-friendly buttons
- maintain smooth gameplay
- keep important UI inside safe areas

-----------------------------------
TECHNICAL REQUIREMENTS
-----------------------------------

Build the game as a self-contained playable web experience.

Use HTML, CSS and JavaScript or the most appropriate browser-compatible approach available in this environment.

Prioritize:

- fast loading
- smooth animation
- responsive controls
- clean code
- mobile performance

Avoid unnecessary dependencies.

If external assets are not necessary, create the visual elements directly using CSS, Canvas, SVG, procedural graphics, or generated shapes.

The game must actually run.

Fix any errors before presenting the final result.

-----------------------------------
QUALITY CHECK
-----------------------------------

Before you finish, personally verify that:

1. PLAY starts the game.
2. The player automatically runs forward.
3. Left/right controls work.
4. Jump works.
5. Coins can be collected.
6. Score increases.
7. Obstacles cause collisions.
8. Lives decrease correctly.
9. GAME OVER works.
10. RESTART works.
11. The finish line can actually be reached.
12. The victory screen works.
13. PLAY AGAIN works.
14. The game works on mobile.
15. The page has no obvious broken UI or console errors.

If something does not work, fix it before finishing.

-----------------------------------
FINAL GOAL
-----------------------------------

I want someone to see my simple hand-drawn sketch first...

and then see the finished game and think:

“WAIT... THAT DRAWING BECAME THIS?!”

Preserve the core idea of my sketch,
but dramatically upgrade the execution.

Make the BEFORE vs AFTER transformation visually shocking.

Do not stop at planning.

Build the actual playable game now.