Create Rock Paper Scissor Game using ReactJS (original) (raw)

Last Updated : 25 Jul, 2024

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:

**Technologies Used/Pre-requisites:

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

**Approach:

• Initialize your React project using Create React App.
• Create a **Game component to handle the game logic and UI.
• Use the component’s state to keep track of player and computer choices, scores, and game results.
• Define the possible choices (Rock, Paper, Scissors) and their winning conditions.
• Implement a function to **compare the player's choice with the computer’s choice and determine the winner.
• Update scores based on the game outcome. Create buttons for each choice (Rock, Paper, Scissors).
• Handle button clicks to set the player’s choice and initiate the game logic. Use React's state to manage player and computer choices, and scores.
• Update the state based on the results of the game.

**Project Structure:

**Steps to create Rock Paper Scissor Game using ReactJS

1. Set up React project using the command

npx create-react-app <>

2. Navigate to the project folder using

cd <>

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.

**Example: 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 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. HTML `

CSS

/* Apply base styles to html and body for full height and reset margin */ html, body { height: 100%; margin: 0; }

/* Main background styling for the body / body { background: linear-gradient(135deg, #3a3a3a, #1e1e1e); / Gradient background for the body / color: #fff; / White text color / font-family: Arial, sans-serif; / Font family */ display: flex; justify-content: center; align-items: center; }

/* Container to center the game content vertically and horizontally / .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; / Center text alignment / background-color: #444; / Darker background for the game container / border-radius: 10px; / Rounded corners for the container / padding: 20px; / Padding inside the container / box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); / Shadow for the container */ }

/* Header styling / h1 { font-size: 2rem; / Responsive font size / margin-bottom: 20px; / Margin below the header / color: #4caf50; / Green color / text-transform: uppercase; / Uppercase text */ }

/* Styling for buttons / button { margin: 0 10px; / Margin around the button / padding: 10px 20px; / Padding inside the button / font-size: 1rem; / Font size for the button text / background-color: #4caf50; / Green background / color: white; / White text color / border: none; / No border / border-radius: 4px; / Rounded corners / cursor: pointer; / Pointer cursor on hover / transition: background-color 0.3s ease; / Smooth background color transition */ }

button:hover { background-color: #45a049; /* Darker green on hover */ }

/* Styling for content area / .content { color: #fff; / White text color / font-size: 1.125rem; / Font size for content text / font-weight: bold; / Bold text / text-shadow: 1px 1px 2px #000; / Subtle text shadow for better readability / letter-spacing: 1px; / Letter spacing for text */ }

/* Additional styling for choice buttons if needed */ .choice-button { margin: 10px; padding: 12px 24px; font-size: 1.125rem; background-color: #4caf50; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease; }

.choice-button:hover { background-color: #45a049; }

/* Styling for the result section / .result { margin-top: 20px; font-size: 1.25rem; / Font size for result text / font-weight: bold; / Bold text / color: #ffeb3b; / Bright yellow color for result */ }

JavaScript

// App.js

import { Component } from 'react'; import './App.css'; import Game from './components/Game';

class App extends Component{
render(){ return ( ); } }

export default App;

` JavaScript ``

// Game.js

import React, {Component} from "react"; import './Game.css';

class Game extends Component{ constructor(props) { super(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) {
        console.log("Hello")
        this.setState({
            playerVal: playerChoice,
            computerVal : compChoice, 
            playerScore : this.state.playerScore +1
        })
    } else if(val == -1) {
        console.log("Hello")
        this.setState({
            playerVal: playerChoice,
            computerVal : compChoice,
            compScore : this.state.compScore +1
        })
    } else {
        console.log("Hello")
        this.setState({
            computerVal : compChoice,
            playerVal : playerChoice
        })
    }
}
render(){
    const {playerVal, computerVal, playerScore, compScore} = this.state;
    return(
        <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>
                <button onClick={()=>this.decision("PAPER")}>
                    <i className={`fas fa-hand-paper`} /> Paper
                </button>
                <button onClick={()=>this.decision("SCISSORS")}>
                    <i className={`fas fa-hand-scissors`} />  Scissors 
                </button>
            </div>
            <div className="content">
                <p>Your choice: {playerVal}</p>
                <p>Computer's choice: {computerVal}</p>
                <h2>Your Score:{playerScore}</h2>
                <h2>Computer Score: {compScore}</h2>
            </div>
        </div>
    )
}

}

export default Game;

``

**Steps to run the application:

1. Type the following command in terminal.

npm start

2. Open web-browser and type the following URL

http://localhost:3000/

**Output: