Rock paper scissors

  • React
  • Exercises
  • Rock paper scissors

React exercise number 6

  • Components
  • JSX
  • useState

Rock paper scissors

Let's build a React rock paper scissors game!

Quick start

Start with this code as a boilerplate for the exercise.

Exercise

Step 1

Whenever the user clicks the "Rock", "Paper", or "Scissors" button, it shows the image rock.png, paper.png, or scissors.png respectively. The images are in the /public/images/ folder.

Step 2

Whenever the user clicks the "Random" button, it shows the rock, paper, or scissors image at random. Perhaps the following function will be useful:

function getRandomNumberBetween(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Step 3

Whenever someone clicks one of the blue "Rock", "Paper", or "Scissors" buttons, it shows a browser prompt for the user to confirm their action. If the user confirms, the button changes the icon in the game, if the user cancels, the button will have no effect. To open the browser confirmation prompt you can use the following method:

window.confirm('Do you really want to do that?');

Step 4

Duplicate the div with className="player" from "Player 1" and create one for "Player 2". The "Random" buttons must work independently for each player. The blue "Rock", "Paper", or "Scissors" buttons should change both Players to rock, paper, or scissors, respectively.

Step 5

Add a header under the blue buttons where we see which of the 2 players is currently winning the game Rock, Paper, Scissors, or if they are both tied.

Step 6

Whenever player number 1 is losing, it changes the app's background color to red.

Step 7

Whenever player number 1 is winning, change the app's background color to green.

Step 8

Whenever both players are tied, change the app's background color to yellow.

Extra

Step 1

Move the divs with className="player" into a single component and use it twice, once for each player. This new component should be called Player and located in the following path /src/components/Player.jsx.