Fruit Slayer | Devpost

Title Screen
Game Screen
Me Playing

💫 Inspiration

I've always wanted to recreate popular games but for real life situations. This summer I witnessed a lot of developers creating unique projects that were either utilizing OpenCV and Mediapipe to do something wacky, or create a different but fun version of an already existing game. It inspired me to create this passion project, that I hope people can have fun with.

🗡️ What it Does

Fruit Slayer is a web-accessible program that monitors a users index finger motion in real time to let them slice incoming fruits to get as much points as possible! Here's the steps to play Fruit Slayer:

Step One: Run '''python app.py''' in the server folder, and '''pnpm run dev''' in the client folder.

Step Two: Open the website and click play.

Step Three: When the game loads, just click the window and start slicing!

🔨 How I Built It

Backend: I utilized OpenCV for video processing and Google's Mediapipe for landmark pose detection that specifically targets the index finger of a user. Using that landmark if the user slices an incoming fruit at a certain speed, then it will cut the fruit and give the player a point. The fruits are spawned from the bottom and fly up on the screen randomly like the original game and there's a special fruit with unique ability that can be slashed... Bombs will also fly up potentially and will spawn more when the player's points get higher. Finally, Flask connects the backend to the frontend.

Frontend: I used Vite + React + TypeScript for the user interface. I wanted to use modern libraries for this and create a seamless experience for the player.

📊 Challenges I Ran Into

Connecting the frontend and backend was the biggest issue that caused a lot more development time than I anticipated. Instead of my first idea which was to have the game show up on the screen after the user clicks play, I decided to have the program itself run after the user clicks play and make it appear in a separate window. While this makes the experience less seamless, it was the next best option and this issue is something I'd love to fix later down the line. Trying to have the slice connect properly with the fruits also proved to be difficult since if the index finger moved to fast, the landmark would briefly disappear. This would make playing less fun since it would rely less on speed and precision like the actual Fruit Ninja but being slow and steady.

🥇 Accomplishments that I am Proud of

Making it.

🗣️ What I Learned

Reinforcing skills on OpenCV and Mediapipe, potential areas to look out for in the future when connecting frontend and backend, spawning stuff in a separate window for OpenCV and working with a larger tech stack.

🍉 What's Next for Fruit Slayer

More fruits, more modes, more everything. I'd love to make the experience more polished, and add new things for players (or me) to have fun with. (Shoutout to Formify)