01
/05
Rock Paper Scissors
The Background
A two player online rock paper scissors game built for realtime connectivity. This game can be played against the computer or an invitation to another player.
The goal for this project is to practice the usage of a bidirectional data flow utilizing Web Sockets. By implementing a two player feature, a connection handling is crucial for each session for seamless game experience.
The Palette
The game emphasizes the character pick buttons, with this emphasis the palette uses a lot of blues to avoid players from distraction. The game also uses accent colors for different pick to have different identity with each other and to help create familiarization with game players.
Space Cadet
06096A
Violet Blue
002FFF
Prussian Blue
006FFF
The Process
1
Game against computer
First step of the development process of this project was to first create it vs. computer where the computation would also be the same when there will be other player connected.
2
Server Setup
After creating the frontend with the computer as the only opponent, the backend server is created using Express JS with Socket IO to implement WebSockets connection.
3
Implementing opponent connection
Once the WebSocket connection has been running, the connectivity between two players is now being tested on what are bugs that hey can arise once they start interacting with each other.
4
Deploying to Render
One of the most crucial part of this project is deploying the backend on a web service. Unlike Vercel, Render supports WebSocket connection so this application was deployed to Render. On deploying, I had to figure out the change of URL between production and development.
5
Playing out with friends
No project is ever done, this project will always be used and there will be some issues always encountered, some enhancement to be made. With this application I always share it to friends just for fun and ask if they did encounter some issues, you something light and cool to talk about.
The Gallery





