Rock Paper Scissors Game in JavaScript

Rock Paper Scissors Game in JavaScript
Code Snippet:Rock Scissors Paper
Author: Jakub
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 668
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X