Fruit Smash 🍎🍉💣

A responsive, web-based fruit cutting game utilizing Google MediaPipe's hand tracking to let you slash fruits in real-time with your bare fingers! The game also supports classic mouse and touch drag controls.

🌟 Features

• Dual Control Modes:
  • Webcam Finger Tracking: Uses your computer webcam to track your index finger as a virtual blade to slash fruits.
  • Mouse / Touch Drag: Classic drag-to-slice controls for standard gameplay.
• Dynamic Physics & Particles: Realistic fruit throwing arcs, juice splatters, slice-cut effects (fruits split in two based on the angle of slash), blade trails, and sparks.
• Combos & High Scores: Combos for slicing multiple fruits in a single slash, complete with high score persistence via browser localStorage.
• Arcade Experience: Interactive SFX, life tracking (using strikes for bombs), and custom glassmorphism screens.
• Client-Side Processing: Fully processed on the frontend using MediaPipe CDNs—no camera data is sent to any server.

---

🛠️ Tech Stack

• Core: HTML5, Canvas, Vanilla JavaScript (ES6+).
• Styling: Vanilla CSS3 (featuring glassmorphism, responsive grids, custom fonts).
• Libraries (CDN):
  • @mediapipe/camera_utils (Camera frame streaming)
  • @mediapipe/hands (On-device machine learning for finger and hand landmark tracking)
• Tooling: Node.js & http-server (for secure local testing under HTTPS/HTTP).

---

🚀 Getting Started

To run the game locally, follow these simple steps:

Prerequisites

Make sure you have Node.js installed.

Setup and Running

1. Clone the Repository:

   git clone https://github.com/your-username/fruit-smash.git
   cd fruit-smash

2. Install Dependencies: Install http-server (specified as a devDependency in package.json):

   npm install

3. Start the Local Server: Start the development server via the custom npm script:

   npm start

   This runs a local server on http://localhost:8080 with caching disabled so your modifications display immediately.

4. Play the Game:

   • Open http://localhost:8080 in your web browser.
   • Choose your control mode. If you select Webcam Finger, allow browser webcam permissions so MediaPipe can track your hand.