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
Technologies Used/Pre-requisites:
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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
Write the following code in different files(The name of the files is mentioned in the first line of each code block)
Example:
- 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.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <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" /> <meta name="description" 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> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body></html> |
Javascript
// App.jsimport { Component } from 'react';import './App.css';import Game from './components/Game';class App extends Component{ render(){ return ( <Game/> ); }}export default App; |
Javascript
// Game.jsimport 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; |
CSS
/* Game.css */html,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
http://localhost:3000/
Output:
Create Rock Paper Scissor Game using ReactJS
