🍉 Fruit Ninja — Web Edition

A browser-based Fruit Ninja game with real-time webcam hand tracking using MediaPipe. Slice fruits by moving your index finger in front of your camera!

---

✨ Features

• Real-time hand tracking via MediaPipe Tasks Vision (runs 100% in your browser)
• 3 difficulty levels — Easy, Medium, Hard with different speeds, lives, and bomb rates
• Special fruits — Golden (3× points), Ice (freeze), Bombs (avoid!)
• Combo system — chain slices for multipliers up to 5×
• Bonus lives — earn extra lives every 100 points
• Glowing trail that follows your finger
• Juice particles on every slice
• 60 FPS smooth gameplay on HTML5 Canvas
• Level select by hovering your finger over a card for 1.5 seconds

---

🎮 How to Play

1. Allow camera access when prompted
2. Hold up your index finger in front of the camera
3. On the level select screen, hover your finger over a card for 1.5 s — or press 1, 2, or 3 on the keyboard
4. Swipe your index finger through fruits to slice them
5. Avoid bombs (red glow) — slicing one costs a life
6. Slice the cyan ❄️ ICE fruit to freeze everything for 3.5 seconds
7. Slice golden fruits (cyan ring) for 3× points
8. Press R to return to level select after a game

---

🚀 Local Development

# 1. Install dependencies
npm install

# 2. Start dev server
npm run dev

# 3. Open http://localhost:5173 in your browser

Note: The game requires HTTPS or localhost for webcam access. The Vite dev server handles this automatically.

---

☁️ Deploy to Vercel

Option A — Vercel CLI (recommended)

# 1. Install Vercel CLI
npm i -g vercel

# 2. Build and deploy
vercel

# Follow the prompts:
#   - Set up and deploy? → Y
#   - Which scope? → your account
#   - Link to existing project? → N
#   - Project name → fruit-ninja-web (or anything)
#   - In which directory is your code? → ./
#   - Override build command? → N
#   - Override output directory? → N

Your game will be live at https://your-project.vercel.app 🎉

Option B — Vercel Dashboard (drag & drop)

# 1. Build the project locally
npm run build

# 2. Go to https://vercel.com/new
# 3. Drag and drop the `dist/` folder

Option C — GitHub Integration

1. Push this repo to GitHub
2. Go to https://vercel.com/new
3. Import your GitHub repository
4. Vercel auto-detects Vite — click Deploy

Important: The vercel.json in this repo sets required CORS headers (Cross-Origin-Embedder-Policy and Cross-Origin-Opener-Policy) needed by MediaPipe's WASM runtime. These are already configured.

---

📁 Project Structure

fruit-ninja-web/
├── public/
│   └── assets/          # Fruit PNG sprites (from original Python project)
├── src/
│   ├── components/
│   │   ├── GameCanvas.jsx   # Main canvas + game loop orchestrator
│   │   └── StartScreen.jsx  # Loading screen while MediaPipe initialises
│   ├── game/
│   │   ├── GameEngine.js    # State machine, physics, slice detection
│   │   ├── Renderer.js      # All canvas drawing (HUD, fruits, trail, etc.)
│   │   ├── Fruit.js         # Fruit entity + spawn logic + segment distance
│   │   └── WebcamTracker.js # MediaPipe hand landmarker wrapper
│   ├── utils/
│   │   └── constants.js     # Level configs, fruit catalog (ported from config.py)
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── vite.config.js
├── vercel.json
└── package.json

---

🌐 Webcam & Privacy

• All hand tracking runs locally in your browser using WebAssembly
• No video data is sent to any server
• The MediaPipe model is downloaded from Google's CDN on first load (~8 MB, cached after)

---

🛠 Tech Stack

Layer	Technology
Framework	React 18 + Vite
Rendering	HTML5 Canvas 2D
Hand tracking	MediaPipe Tasks Vision (@mediapipe/tasks-vision)
Camera	Browser getUserMedia API
Deployment	Vercel

---

🎯 Level Reference

Level	Target	Lives	Bomb %	Speed
1 EASY	120 pts	5	6%	Slow
2 MEDIUM	180 pts	4	11%	Medium
3 HARD	250 pts	3	17%	Fast

---

⚡ Performance Tips

• Use Chrome or Edge for best GPU-accelerated hand tracking
• Good lighting helps MediaPipe detect your hand reliably
• Keep your index finger extended and other fingers curled
• Fast, decisive swipes slice better than slow drags #� �w�e�b� � �

Built With

• html
• javascript