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."

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>

• 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>

• 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>

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",
};

• 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);
};

• 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);
};

• 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;
};

• 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");
  }
..............
..............
}

• Last add another function to add some sound effects.

const playSound = (result) => {
  if (result == "win") {
    winSound.play();
  } else {
    loseSound.play();
  }

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!!