DEV Community

Puja Kundu
Puja Kundu

Posted on

Build a Rock-Paper-Scissors-Lizard-Spock game

If you are familiar with Big Bang Theory, you must have heard about the Rock-Paper-Scissors-Lizard-Spock game. As Sheldon explains, "Scissors cuts paper, paper covers rock, rock crushes lizard, lizard poisons Spock, Spock smashes scissors, scissors decapitates lizard, lizard eats paper, paper disproves Spock, Spock vaporizes rock, and as it always has, rock crushes scissors."

Big Bang Theory CLip
Let's build this game with some HTML, CSS, and JavaScript.

First, create an index.html file and write some code.

  • Create a container to hold the title and score.
<div class="scoreboard">
        <div class="title">
          <h2>ROCK</h2>
          <h2>PAPER</h2>
          <h2>SCISSORS</h2>
          <h2>LIZARD</h2>
          <h2>SPOCK</h2>
        </div>
        <div class="score">
          <p>SCORE</p>
          <h1>0</h1>
        </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Create another container to hold your rock, paper, scissors, lizard, and spock. Add click event pickUserOption() on each image and pass parameters.
<div class="options">
        <div class="option spock">
          <img src="/images/Spock.png" onclick="pickUserOption('spock')" />
        </div>
        <div class="option scissors">
          <img
            src="/images/Scissors.png"
            onclick="pickUserOption('scissors')"
          />
        </div>
        <div class="option paper">
          <img src="/images/Paper.png" onclick="pickUserOption('paper')" />
        </div>
        <div class="option lizard">
          <img src="/images/Lizard.jpg" onclick="pickUserOption('lizard')" />
        </div>
        <div class="option rock">
          <img src="/images/Rock.png" onclick="pickUserOption('rock')" />
        </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Finally, show the results and play again button.
 <div class="contest">
        <div class="useroption">
          <h1>YOU PICKED</h1>
          <div class="optionImageContainer">
            <img id="userPickImage" src="/images/Paper.png" />
          </div>
        </div>
        <div class="result">
          <div class="decision"><h1>YOU WIN!</h1></div>
          <div class="newGame" onclick="playAgainBtn()">PLAY AGAIN</div>
        </div>
        <div class="computeroption">
          <h1>THE HOUSE PICKED</h1>
          <div class="optionImageContainer">
            <img id="computerPickImage" src="/images/Paper.png" />
          </div>
        </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Now, create your main.js file.

  • First, let's add some fun sound effects and store image directories.
const clickSound = new Audio("/audio/mixkit-select-click-1109.wav");
const winSound = new Audio("/audio/mixkit-winning-notification-2018.wav");
const loseSound = new Audio("/audio/mixkit-losing-piano-2024.wav");

const userOptions = {
  rock: "/images/Rock.png",
  paper: "/images/Paper.png",
  scissors: "/images/Scissors.png",
  lizard: "/images/Lizard.jpg",
  spock: "/images/Spock.png",
};
Enter fullscreen mode Exit fullscreen mode
  • Write pickUserOption() function that is called when you choose your option.
const pickUserOption = (option) => {
  let options = document.querySelector(".options");
  options.style.display = "none";

  let contest = document.querySelector(".contest");
  contest.style.display = "flex";

  clickSound.play();
  document.getElementById("userPickImage").src = userOptions[option];

  pickComputeroption(option);
};
Enter fullscreen mode Exit fullscreen mode
  • It's time for the Computer to pick its option. We generate some random number for the Computer to pick.
const pickComputeroption = (option) => {
  let options = ["rock", "paper", "scissors", "lizard", "spock"];
  let computerOption = options[Math.floor(Math.random() * 5)];

  // set computer image
  document.getElementById("computerPickImage").src =
    userOptions[computerOption];

  result(option, computerOption);
};
Enter fullscreen mode Exit fullscreen mode
  • Add a play again button, setDecision() function to show results and setScore() function to update the score each time you win.
const playAgainBtn = () => {
  let contest = document.querySelector(".contest");
  contest.style.display = "none";

  let options = document.querySelector(".options");
  options.style.display = "flex";
};

const setDecision = (decision) => {
  document.querySelector(".decision h1").innerText = decision;
};

const setScore = (newScore) => {
  SCORE = newScore;
  document.querySelector(".score h1").innerText = newScore;
};
Enter fullscreen mode Exit fullscreen mode
  • Write another function that determines your fate, I mean the game results. It contains a bunch of if-else statements.🥱
const result = (userOption, computerOption) => {
  if (
    (userOption == "paper" && computerOption == "scissors") ||
    (userOption == "paper" && computerOption == "lizard")
  ) {
    setDecision("YOU LOSE!");
    playSound("lose");
  }
  if (
    (userOption == "paper" && computerOption == "rock") ||
    (userOption == "paper" && computerOption == "spock")
  ) {
    setDecision("YOU WIN!");
    setScore(SCORE + 1);
    playSound(win);
  }
  if (userOption == "paper" && computerOption == "paper") {
    setDecision("It's a tie!");
    playSound("tie");
  }
..............
..............
}
Enter fullscreen mode Exit fullscreen mode
  • Last add another function to add some sound effects.
const playSound = (result) => {
  if (result == "win") {
    winSound.play();
  } else {
    loseSound.play();
  }
Enter fullscreen mode Exit fullscreen mode

Finally, write some CSS and add styling as per your likings.😊

This is a FrontendMentor.io challenge. You can complete it here
See the full code here

Thank you!!

Top comments (0)