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.

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

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", }; 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); }; 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); }; 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; }; 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"); } .............. .............. } 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 See the full code

Thank you!!