Push Up Pong

• 

  Home screen

• 

  Game screen

Inspiration

We were bored with regular exercise, and wanted to change how people view getting active!

What it does

Push Up Pong is a web based game that allows you to create or join game rooms, where you can battle out a game of pong (with a twist) with the computer AI.

How we built it

• We used ReactJS to handle most of the Pong game logic
• the face-api.js library to handle the computer vision

Challenges we ran into

• Collision detection with the ball and the paddles
• Getting the server to communicate properly with the clients with flask-socketio.
• Syncing up the face detection code with the paddle control code, to seamlessly and accurately control the paddles.

Accomplishments that we're proud of

• This was our first web based game!
• The face detection works well, and we are happy that we were able to sync the paddle control with the face.
• The UI looks simple and clean, and the sounds make it a more complete game.

What we learned

• How to use contexts in React
• How to use a router in React
• More about the asynchronous nature of Javascript

What's next for Push Up Pong

• Calibrate the face detection, and try different Computer vision models to see what allows for the fastest detection with the smoothest gameplay.
• Use Flask-SocketIO to allow for a true multiplayer experience - this was our original goal, but we had to pivot due to technical difficulties.
• Use WebRTC to allow players to share themselves doing pushups in real time.

Built With

• css
• face-api.js
• flask
• flask-socketio
• git
• html
• javascript
• react