Vegi Knights

Logo Art for Vegi Knights

Inspiration

Our team wanted to build a fun interactive game that is different from usual forms of input. That meant we needed to limit the usage of keyboard, touchscreen, and trackpad. Many of us had Fruit Ninja as our childhood game, so that was what inspired us to make this game. For a novel form of playing the game, we implemented an AI camera detection system to do so.

What it does

The game primarily uses camera detection for your hands in order to track the vegetables the player is slashing. The game offers a single player and multiplayer mode for the player.

In the single player mode, they have unlimited time to get as much points as possible by slashing the vegetables, but they are limited to 3 lives. Lives are deducted either by not slashing a vegetable with their fingers or slashing a "Poison Mushroom." Users can keep playing to get the highest score possible!

Multiplayer will allow you to connect to another player and play the game with them. In this mode, they share all the vegetables, and they have to fight to slash as many vegetables/points as possible over the other player by the time limit (30 seconds). Stay vigilant! Since each player still have 3 lives, slashing Poison Mushrooms can make you lose even if you have more points! :)

How we built it

Since this a simple web game, we decided to go with a simple TypeScript/HTML/CSS approach for creating the game logic, structure, and design. We delegated tasks to one team member for making the design, UI, and assets for the game. Two members worked on the AI camera detector using Google MediaPipe Vision Task, and one person on setting up the peer-to-peer WebRTC for the multiplayer system.

Challenges we ran into

Our main concern when creating this project was the network system. Initially, we were planning to set it up so that two devices could connect to each other given that they are in the same network address and port. With further testing, it was inconsistent, and also meant that players could not play together if they were not on the same network system. With the new network system set up, the game could still be laggy at times.

Accomplishments that we're proud of

We were proud of being able to set up the basic TypeScript/HTML/CSS system flawlessly. While adding in the network system and AI camera was a challenge, most of the necessary things like the app design, buttons, and score system were very well made.

What we learned

The most fun thing we learned was being able to implement audio into TypeScript using HTMLAudioElement. We all walked out of this project becoming more familiar with the TypeScript programming language.

We found that implementing an AI camera tracking system and network connection without a backend system is no easy task. We hope to research more on these technologies after this hackathon to become even more familiar with them, allowing us to apply it our personal projects in the future.

What's next for Vegi Knights

-We are interested in putting the network on a backend system to improve connectivity between the players. -Having a queue system to allow users to choose who they want to play with would also be a great improvement we want to add.

You can access our GitHub Repository Here!: link