Play the demo on Chrome browser!

Inspiration

Inspired by games like Just Volleyball and more famously Wii Tennis, we created a game that have similar mechanics but with inputs using hand gestures. Thinking about beaches and oceans, many people love to hang out with friends and play volleyball.

What it does

The game uses the users camera to control how the game is played. The user faces a CPU bot with varying difficulty and it is up to the users skill to come out on top.

How we built it

We used Three.js to help with the world building, things like the court, players, the lighting, and the ball is made with Three.js. We used TypeScript to handle the application code as well as the game logic. HTML/CSS is used to create the scoreboard and title menus. Vite is then used to run the game on a local server. MediaPipe was used to track hand gestures and movements for player inputs.

Challenges we ran into

We ran into challenges of getting the logic of the game just right. In the beginning the three actions did the same thing and we had to handle the logic and behavior of the ball based on the type of hit committed by the player. We also tried to do 2v2 and multiplayer mode but we ran into issues and out of time.

Accomplishments that we're proud of

We're proud of combining camera gestures with specific types of actions for the game. We also are proud of making a system where your distance to the camera affected the power of the shot and trajectory.

What we learned

We learned how to take an existing framework made from machine learning and turn it into something interactive such as playing sand volleyball. We also learned to use unfamiliar libraries like three.js to make our game come to life.

What's next for Court Gesture

We would like to add in a multiplayer option connecting two laptops as that was our original plan. We wanted to make the game for friends to compete against each other or with each other.

Built With

Share this project:

Updates

Submission history