Create a Rock Paper Scissors Game with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a rock paper scissors game with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app rock-paper-scissors

with NPM to create our React project.

Create the Rock Paper Scissors Game

To create the rock paper scissors game, we write:

import React, { useMemo, useState } from "react";
const choices = ["rock", "paper", "scissors"];

export default function App() {
  const [selected, setSelected] = useState("");
  const [computedSelected, setComputedSelected] = useState("");

  const play = () => {
    if (!selected) {
      return;
    }
    const computerChoiceIndex = Math.floor(Math.random() * choices.length);
    setComputedSelected(choices[computerChoiceIndex]);
  };

  const result = useMemo(() => {
    if (computedSelected === selected) {
      return `it's a tie`;
    } else {
      if (
        (computedSelected === "rock" && selected === "scissors") ||
        (computedSelected === "paper" && selected === "rock") ||
        (computedSelected === "scissors" && selected === "paper")
      ) {
        return "computer won";
      }
      return "player won";
    }
  }, [computedSelected, selected]);

  return (
    <div>
      <div>
        <button onClick={() => setSelected("rock")}>rock</button>
        <button onClick={() => setSelected("paper")}>paper</button>
        <button onClick={() => setSelected("scissors")}>scissors</button>
      </div>
      <button onClick={play}>play</button>
      <p>your choice: {selected}</p>
      <p>computer's choice: {computedSelected}</p>
      <div>{result}</div>
    </div>
  );
}

We define the choices array with the choices to select from.

Then we define the selected state to hold the player’s choice.

And we define the computedSelected state to hold the computer’s choice.

Next, we define the play function to let the computer choose the choice.

We call setComputedSelected with a random choice to set the computer’s choice.

Then we define the result variable with the useMemo hook to get the compyterSelected and selected values to check who won.

If the values are the same, then it’s a tie.

Otherwise, rock beats scissors, paper beats rock, and scissors beats paper.

We pass in all the values we’re watching to compute the result in the 2nd argument.

After that. we add the buttons to let the player set the selected value.

Below that, we show the play button to run play when we click it.

Then we display the player’s and computer’s choice.

And finally, we display the result .

Conclusion

We can create a rock, paper, scissors game with React and JavaScript.