How to Code a Rock Paper Scissors Game in JavaScript

Welcome to this tutorial on How to Code a Rock Paper Scissors Game in JavaScript. This is an automatically generated post based on popular examples to help you learn and implement this concept.

HTML Structure

Here is the basic HTML structure for this project:

<div class="rps-container">
  <h2>Rock, Paper, Scissors</h2>
  <div class="rps-scoreboard">
    <div class="badge" id="user-label">user</div>
    <div class="badge" id="comp-label">comp</div>
    <span id="user-score">0</span> : <span id="comp-score">0</span>
  </div>
  <div class="rps-result">
    <p>Paper covers rock. You win!</p>
  </div>
  <div class="rps-choices">
    <div class="choice" id="r">
      <img src="https://img.icons8.com/color/96/000000/hand-rock.png" alt="Rock"/>
    </div>
    <div class="choice" id="p">
      <img src="https://img.icons8.com/color/96/000000/hand.png" alt="Paper"/>
    </div>
    <div class="choice" id="s">
      <img src="https://img.icons8.com/color/96/000000/hand-scissors.png" alt="Scissors"/>
    </div>
  </div>
  <p id="action-message">Make your move.</p>
</div>

CSS Styling

Style your component using the following CSS:

.rps-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #24272e;
  font-family: 'Inter', sans-serif;
  color: white;
}
.rps-container h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #fff;
  text-transform: uppercase;
}
.rps-scoreboard {
  margin-bottom: 20px;
  border: 3px solid white;
  border-radius: 4px;
  text-align: center;
  width: 200px;
  color: white;
  font-size: 46px;
  padding: 15px 20px;
  position: relative;
}
.badge {
  background: #e25822;
  color: white;
  font-size: 14px;
  padding: 2px 10px;
  font-weight: bold;
  border-radius: 3px;
  position: absolute;
  top: 30px;
}
#user-label { left: -25px; }
#comp-label { right: -25px; }
.rps-result {
  font-size: 32px;
  color: white;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 500;
}
.rps-result p { margin: 0; }
.rps-choices {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}
.choice {
  border: 4px solid white;
  border-radius: 50%;
  padding: 15px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #3b3f46;
}
.choice:hover {
  background-color: #5c626d;
  transform: scale(1.1);
}
.choice img {
  width: 70px;
  height: 70px;
  filter: drop-shadow(2px 4px 6px black);
}
#action-message {
  font-size: 20px;
  font-weight: bold;
  color: #a3a3a3;
  margin-top: 20px;
}
.green-glow { border-color: #4dcc7d !important; box-shadow: 0 0 10px #4dcc7d; }
.red-glow { border-color: #fc121b !important; box-shadow: 0 0 10px #fc121b; }
.gray-glow { border-color: #464647 !important; box-shadow: 0 0 10px #464647; }

JavaScript Logic (if applicable)

For dynamic behavior, you can use the following JavaScript snippet:

document.addEventListener('DOMContentLoaded', () => {
    let userScore = 0;
    let computerScore = 0;
    const userScore_span = document.getElementById("user-score");
    const computerScore_span = document.getElementById("comp-score");
    const result_p = document.querySelector(".rps-result > p");
    const rock_div = document.getElementById("r");
    const paper_div = document.getElementById("p");
    const scissors_div = document.getElementById("s");
    
    if(!rock_div || !paper_div || !scissors_div) return;

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

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

    function win(userChoice, computerChoice) {
        userScore++;
        userScore_span.innerHTML = userScore;
        computerScore_span.innerHTML = computerScore;
        const smallUserWord = "user".fontsize(3).sub();
        const smallCompWord = "comp".fontsize(3).sub();
        const userChoice_div = document.getElementById(userChoice);
        result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWord}. You win! 🔥`;
        userChoice_div.classList.add('green-glow');
        setTimeout(() => userChoice_div.classList.remove('green-glow'), 300);
    }

    function lose(userChoice, computerChoice) {
        computerScore++;
        userScore_span.innerHTML = userScore;
        computerScore_span.innerHTML = computerScore;
        const smallUserWord = "user".fontsize(3).sub();
        const smallCompWord = "comp".fontsize(3).sub();
        const userChoice_div = document.getElementById(userChoice);
        result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} loses to ${convertToWord(computerChoice)}${smallCompWord}. You lost... 💩`;
        userChoice_div.classList.add('red-glow');
        setTimeout(() => userChoice_div.classList.remove('red-glow'), 300);
    }

    function draw(userChoice, computerChoice) {
        const smallUserWord = "user".fontsize(3).sub();
        const smallCompWord = "comp".fontsize(3).sub();
        const userChoice_div = document.getElementById(userChoice);
        result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} equals ${convertToWord(computerChoice)}${smallCompWord}. It's a draw. 😶`;
        userChoice_div.classList.add('gray-glow');
        setTimeout(() => userChoice_div.classList.remove('gray-glow'), 300);
    }

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

    rock_div.addEventListener('click', () => game("r"));
    paper_div.addEventListener('click', () => game("p"));
    scissors_div.addEventListener('click', () => game("s"));
    
    if(result_p) result_p.innerHTML = "Make your first move!";
});

Feel free to customize this code for your own projects!