Rock Paper Scissors Game in JavaScript

This JavaScript code creates a simple and engaging Rock, Paper, Scissors game. It allows you to play against a computer. When you make a choice (Rock, Paper, or Scissors), the code determines the winner and updates the scores. It’s a fun way to test your luck and decision-making skills in a classic game!

You can use this code on your website or as a standalone web page for entertainment. It provides a fun, interactive game for users to enjoy, enhancing user engagement. Additionally, it’s a great way to learn JavaScript programming and can be customized to match your site’s style.

How to Create Rock Paper Scissors Game in JavaScript

1. First of all, load the Font Awesome CSS (for icons) by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-1/css/all.css">

2. Create an HTML file and set up the basic structure, including headers, game status, player boards, and result display elements.

<header>
    <h2>Rock Scissors Paper</h2>
  </header>
  <div id="game-status">
    <p><span class="user-status">Rock</span> beats <span class="computer-status"> Scissors</span></p>
  </div>
  <div id="game-frame">
    <div class="user-board board">
      <p>User</p>
    </div>
    <div class="computer-board board">
      <p>Computer</p>
    </div>
    <div id="result">
      <span class="user-score">0</span>:<span class="computer-score">0</span>
    </div>
  </div>
  <div id="signs">
    <div class="sign rock"><i class="fas fa-hand-rock"></i></div>
    <div class="sign scissors"><i class="fas fa-hand-scissors"></i></div>
    <div class="sign paper"><i class="fas fa-hand-paper"></i></div>
  </div>
  <div id="result-txt">
    <p class="result-para">Make your move!</p>
  </div>

3. Now, add the following CSS code to style the game interface. You can customize the colors and layout to match your website’s design.

@import url('https://fonts.googleapis.com/css?family=Lato|Montserrat&display=swap');
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: #111414;
}

header > h2 {
  text-align: center;
  padding: 20px;
  font-family: Lato, sans-serif;
  background-color: #fff;
}

#game-status {
  margin-top: 25px;
}

#game-status > p {
  color: #fff;
  font-family: Montserrat;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}

#game-frame {
  width: 300px;
  border: 3px solid #fff;
  border-radius: 3%;
  margin: 0 auto;
  margin-top: 40px;
  color: #fff;
  font-family: Arial, sans-serif;
  position: relative;
  height: 150px;
}

.board {
  background: #ee1100;
  width: 30%;
  text-align: center;
  font-weight: bold;
  border-radius: 10%;
  padding: 5px;
}

.user-board {
  position: absolute;
  top: 50px;
  left: -40px;
}

.computer-board {
  position: absolute;
  top: 50px;
  right: -40px;
}


#result {
  text-align: center;
  font-size: 50px;
  margin-top: 40px;
}

#signs {
  color: #fff;
  margin-top: 50px;
  text-align: center;
}

.sign {
  display: inline-block;
  font-size: 60px;
  padding: 20px;
  margin: 25px;
  border: 4px solid #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
}

.sign:hover {
  border-color: #ee0000;
}

#result-txt {
  color: #fff;
  font-family: Lato, sans-serif;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  margin-top: 30px;
}

4. The heart of the game lies in the JavaScript code. This code makes the game interactive and handles user choices and outcomes. To integrate this code, copy and paste it into a JavaScript file in your project.

let uScore = 0;
let cS = 0;
const rock = document.querySelector(".rock");
const scissors = document.querySelector(".scissors");
const paper = document.querySelector(".paper");
const userScore = document.querySelector(".user-score");
const computerScore = document.querySelector(".computer-score");
let statusLeft = document.querySelector(".user-status");
let statusRight = document.querySelector(".computer-status");
let result = document.querySelector(".result-para")


function win(userChoice, computerChoice) {
 uScore ++;
  statusLeft.innerHTML = convertToWord(userChoice);
 statusRight.innerHTML = convertToWord(computerChoice); 
 userScore.innerHTML = uScore;
 result.innerHTML = "You won!";
}

function loose(userChoice, computerChoice) {
  cS++;
 statusLeft.innerHTML = convertToWord(computerChoice);
 statusRight.innerHTML = convertToWord(userChoice); 
 computerScore.innerHTML = cS;
 result.innerHTML = "You lost  :-(";
}

function draw(userChoice, computerChoice) {
  result.innerHTML = "Draw!";
}


function getComputerChoice() {
  const choices = ['r','s','p'];
  const choicesRandom = Math.floor(Math.random() * 3);
  return choices[choicesRandom];
}

function game(userChoice) {
  const computerChoice = getComputerChoice();
  switch(userChoice + computerChoice) {
    case 'rs':
    case 'sp':
    case 'pr':
    win(userChoice, computerChoice);
    break;
    case 'ps':
    case 'sr':
    case 'rp':
    loose(userChoice, computerChoice);
    break;
    case 'pp':
    case 'ss':
    case 'rr':
    draw(userChoice, computerChoice);
  } 
}



function main() {
  rock.addEventListener("click", function(){
    game("r");
  })
  scissors.addEventListener("click", function(){
    game("s");
  })
  paper.addEventListener("click", function(){
    game("p");
  })
}

main();
function convertToWord(letter) {
if(letter === "r") return "Rock";
if(letter === "p") return "Paper";
return "Scissors";
}

The JavaScript code consists of functions that control the game logic. Here’s what each function does:

• win(userChoice, computerChoice): Updates scores and displays a win message.
• loose(userChoice, computerChoice): Updates scores and displays a loss message.
• draw(userChoice, computerChoice): Displays a draw message.
• getComputerChoice(): Generates a random computer choice.
• game(userChoice): Determines the game outcome and calls the appropriate function.

That’s all! hopefully, you have successfully created a Rock Paper Scissors Game In JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.