Inspiration
While pondering our Hackathon project, we came across facebookresearch's detectron2 which would be impetus for our project direction. During our childhoods, WII Sports was one of the most popular games, using its motion sensor to interface the game with our very reality. We thought it’d be interesting to combine the modern concept of motion detection alongside one of the pioneers of multiplayer games, pong. Just like how all great movies get a newer, modern take on them, we thought it’d be interesting to add a unique spin on an relic such as pong, hence the creation of handpong.
What it does
Our game is quite similar to traditional pong, where the goal of the game is to simply not let the ball score on your side. However, instead of controlling your paddle with a controller or joysticks, you become the paddle. Our motion detection system allows your hand to be detected and movement tracked by your camera, allowing you to directly interact with your own paddle. The game is divided into 4 players, with “last player standing rules” (last one with lives remaining wins).
Our lobby takes after traditional party games, allowing you to construct and invite or join a lobby with 3 other friends. The hub and waiting menu is quite simple, allowing for a smooth experience throughout the player’s gaming experience.
How we built it
Backend: We debated on a wide variety of technologies, including next.js, but eventually settled on a combination of using a traditional Node.js server run with socket.io for the websockets.
Frontend: We primarily used p5.js for our frontend, with traditional HTML and css supplementing our game creation.
UI: To make life easier, we decided to use chakra-ui to make our buttons, forms, and text cleaner and easier to manipulate further down the lifecycle.
Challenges we ran into
Funnily enough, our project was supposed to include a whole other dimension (literally), but was sadly scrapped. While familiarizing ourselves with three.js, we realized it was overly-ambitious to learn and use it efficiently in such a short period of time, so we settled for its younger brother, two.js. However, just like most younger brothers are, two.js proved to be problematic. While trying to figure out how to interface it with react.js, we soon realized we were once again struck by the curse of time constraints and threw out the possibility of using it.
We finally settled on p5.js, a language we all coincidentally are quite familiar with due to its similar nature to an API we used previously, Processing. Luckily enough, it was quite easy to interface throughout our code, finally letting us exit our Bermuda Triangle of frontend issues.
In terms of backend, the creation process was quite smooth with a few bumps along the way. Debugging is always tiresome, especially when you are unfamiliar with the language and syntax at hand, but didn’t prove to be the biggest backend problem. Getting the servers to function properly and the multiplayer rooms to work as intended took a while, but was surmounted with a little bit of elbow grease.
Accomplishments that we're proud of
Constructing a fully functional motion detection system that was interfaced alongside frontend user input to move the player’s paddles is something we are quite proud of. We were able to create multiple react hooks and components that we were able to use modularly all while being novices with these concepts. Creating generally function machine servers using node was quite a personal achievement for all of us.
What we learned
We delved into heavy amounts of backend coding, really understanding just how intricate it can get. We learnt how online multiplayer games create and run their servers, having tremendous amounts of effort put behind simple screens in front of our eyes. We were also able to learn lots about web sockets and how install managers work, being both our most technically difficult project but also most rewarding.
What's next for handpong
Given the constraint of just 36 hours to complete our project, we were limited to just making the skeleton of the game pong. In the future, we will clean up our site and will give it an overhaul alongside the game selection, featuring a variety of fun mini-games you and your friends can enjoy while using motion detection technology through just a camera. We will also allow for the lobby sizes to vary, with the games respectively changing to cater to such needs. handpong might become a household name in a few years!
Log in or sign up for Devpost to join the conversation.