Open In App
Related Articles

Create Rock Paper Scissor Game using ReactJS

Improve Article
Save Article
Like Article

In this article, we will create Rock, Paper, Scissors game using ReactJS. This project basically implements class components and manages the state accordingly. The player uses a particular option from Rock, Paper, or Scissors and then Computer chooses an option randomly. The logic of scoring and winning is implemented using JSX.

Let’s have a look at what our final project will look like:

Create Rock Paper Scissor Game using ReactJS

Create Rock Paper Scissor Game using ReactJS

Technologies Used/Pre-requisites:

  1. ReactJS
  2. CSS
  3. JSX
  4. Class Components in React

Approach: Containers are Stateful​ React components ( Class Based ). Components are ​ Stateless​ React Components ( Function-Based ). In this project, I have one container that is Controller which is responsible for state management and the entire game logic.

Project Structure:


Steps :

1. Set up React project using the command

npx create-react-app <<name of project>>

2. Navigate to the project folder using

cd <<Name_of_project>>

3. Create a folder “components” and add two new files in it namely Game.js and Game.css.

4. Import the icon pack using the following command in the index.html file of the public folder.

<link rel="stylesheet" href="" />

Write the following code in different files(The name of the files is mentioned in the first line of each code block)


  • index.html: This is an automatically created file in the public folder we just have to import the icon pack in its <head> tag.
  • App.js: This file imports the game components and exports it.
  • Game.js: This file contains the logic for the game, scoring techniques, and random function with which the computer chooses a value
  • Game.css: This file contains the design of the game elements. 


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet"
    <meta charset="utf-8" />
    <link rel="icon"
          href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
      content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon"
          href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest"
          href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
      You need to enable JavaScript to run this app.
    <div id="root"></div>


// App.js
import { Component } from 'react';
import './App.css';
import Game from './components/Game';
class App extends Component{ 
      return (
export default App;


// Game.js
import React, {Component} from "react";
import './Game.css';
class Game extends Component{
    constructor(props) {
        this.state = {
            playerVal : null,
            computerVal : null,
            playerScore: 0,
            compScore: 0,
    logic = (playerVal, computerVal)=>{
        if(playerVal == computerVal){
            return 0;
        } else if ((playerVal == "ROCK" && computerVal == "SCISSORS") ||
            (playerVal == "SCISSORS" && computerVal == "PAPER") ||
            (playerVal == "PAPER" && computerVal == "ROCK")
        ) {
            return 1;
        } else {
            return -1;
    decision = (playerChoice)=> {
        const choices = ["ROCK", "PAPER", "SCISSORS"];
        const compChoice =  choices[Math.floor(Math.random() * choices.length)];
        const val = this.logic(playerChoice, compChoice)
        if(val == 1) {
                playerVal: playerChoice,
                computerVal : compChoice,
                playerScore : this.state.playerScore +1
        } else if(val == -1) {
                playerVal: playerChoice,
                computerVal : compChoice,
                compScore : this.state.compScore +1
        } else {
                computerVal : compChoice,
                playerVal : playerChoice
        const {playerVal, computerVal, playerScore, compScore} = this.state;
            <div className="container">
                <h1>Welcome to Rock, Paper, Scissors Game</h1>
                <div >
                    <button onClick={()=>this.decision("ROCK")}>
                        <i className={`fas fa-hand-rock`} /> Rock
                    <button onClick={()=>this.decision("PAPER")}>
                        <i className={`fas fa-hand-paper`} /> Paper
                    <button onClick={()=>this.decision("SCISSORS")}>
                        <i className={`fas fa-hand-scissors`} />  Scissors
                <div className="content">
                    <p>Your choice: {playerVal}</p>
                    <p>Computer's choice: {computerVal}</p>
                    <h2>Your Score:{playerScore}</h2>
                    <h2>Computer Score: {compScore}</h2>
export default Game;


/* Game.css */
body {
  height: 100%;
  margin: 0;
body {
  background-color: #333;
  color: #fff;
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #4caf50;
  text-transform: uppercase;
button {
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
button:hover {
    background-color: #45a049;
.content {
    color: #fff; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
    font-size: 18px; /* Font size */
    font-weight: bold; /* Font weight */
    text-align: center; /* Text alignment */
    text-shadow: 1px 1px 2px #000; /* Text shadow */
    letter-spacing: 1px; /* Letter spacing */

Steps to run the application:

1. Type the following command in terminal.

npm start

2. Open web-browser and type the following URL



Create Rock Paper Scissor Game using ReactJS

Create Rock Paper Scissor Game using ReactJS

Last Updated : 13 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials