Build a Rock Paper Scissors Game from Scratch with React

Traditionally, Rock Paper Scissors is a hand game where each player simultaneously chooses one of three possible shapes for their hand: rock, paper or scissors. Rock beats scissors, paper beats rock, and scissors beats paper. Of course, in our game we’ll be playing against the computer, so we’ll use icons instead of our hand.

The user will be able to choose between three options by clicking on them. To improve the UX, we’ll use the icons that represent each choice.

The opponent to beat will be the computer, whose choice will be calculated randomly. We’ll create a function for that in the later phases of the tutorial.

The choices of each individual round will be compared. The first player to reach a specific number of wins (ten by default) will be victorious in the whole game, and the user will have an option to start another game.

Creating the Wireframe

To better understand the layout we’ll need to create, we’ll first make a wireframe with all the necessary components. Our main focus will be on the position of the elements in the game wrapper.

We’ll use the top section of the game to display the game name and show the number of rounds that have been played.

The main play area will be divided into two main blocks. The first one will be for the user, and the second one for the computer. In these blocks, we’ll include information such as the player name, choice options, and score.

Between the two main blocks, we’ll include the message component, which will display the result of each round and display the end result of the game.