Rock Paper Scissors

Online Rock Paper Scissors is the perfect way to settle any decision. At the click of a button, you can play with anyone anywhere, using only your body.

Comment

Inspiration

Rock paper scissors—a classic game used to settle any decision. Now that online messaging and virtual meetings are a part of everyday life, face-to-face moments like these are slowly diminishing. We wanted to create an accessible, online version to bring back the fun with a twist—using your whole body as the rock, paper, or scissors.

What it does

Our online version of Rock Paper Scissors uses your camera to track your movements to determine whether you picked rock, paper, or scissors in a player vs player online game.

How we built it

Backend

We trained an image recognition model using Google Teachable Machine to recognize the three positions. We then imported the model into a TypeScript Node.js server and set up a game loop using Socket.IO to handle player events.

Frontend

We used React.js, Socket.IO, and various UI libraries to capture and display video and user selection of rock, paper, or scissors.

Challenges we ran into

  • Implementing the computer vision model with Teachable Machine and React, despite some incompatibilities between different JavaScript runtimes.
  • Handling synchronous connections between the clients and server. We used Socket.IO to maintain client connections and carefully handle connect/disconnect events.

Accomplishments that we're proud of

  • Learning and implementing a computer vision model with Google Teachable Machine.
  • Using Socket.IO to perform synchronous client/server communication
  • Using state and component lifecycle hooks to maintain data across the frontend

What we learned

  • How to train and use Google Teachable Machine.
  • How to use SocketIO to handle synchronous client/server connections

What's next for Rock Paper Scissors

We want to implement user vs AI battles with different modes including a normal mode and a rush mode. The normal mode would have the player versus an AI that would randomly select a move but would track player tendencies over time to counter them. The rush mode would give a series of images with different moves for the player to counter in progressively less time. And finally, we want a leaderboard for VS AI play and a scoreboard for battles against your online opponent.

Built With

Share this project:

Updates