Build a Rock-Paper-Scissors-Lizard-Spock game
Tags: beginners, html, javascript
Published: 2022-02-08 12:47:32

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7vnwubwbho60huw482o.gif)
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](https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH) 
See the full code [here](https://github.com/pujaKundu/rock-paper-scissor-lizard-spock)

Thank you!!