Fruit Slicer Game - HTML CSS JavaScript

📌 Project Description:

The Fruit Slicer Game is a fun and interactive browser-based arcade game inspired by the popular mobile game Fruit Ninja. Built using HTML, CSS, and JavaScript, players slice fruits by swiping or clicking on them before they fall off the screen, while avoiding bombs. It combines engaging animation, real-time interaction, and point-based scoring — making it an exciting and educational project for web developers learning DOM manipulation, canvas animation, and event handling.

⚙️ Key Features:

• Dynamic fruit generation with randomized movement paths

• Mouse or swipe slicing input detection

• Real-time score and life tracking

• Bombs that end the game instantly if sliced

• Game over screen and restart functionality

• Background music and slicing sound effects

• Mobile-friendly responsive design

🕹️ How to Play:

Controls:

• Use your mouse to swipe/slice the fruits

• On touchscreens, drag your finger to slice

Objective:

• Slice as many fruits as possible before they fall or you hit a bomb

Scoring:

• 🥭 +1 point per fruit sliced

• 💣 Game over if you slice a bomb

Lives:

• Missing fruits reduces lives. Game over at 0 lives.

🧠 Skills You’ll Learn:

• Using requestAnimationFrame() for smooth canvas animation

• Collision detection and path tracking

• Mouse and touch input handling

• Object spawning and removal logic

• HTML5 <canvas> rendering

• Event listeners and game loop logic