1,344 reads

How to Create Rock Paper Scissors Spock Lizard in JavaScript

by Matvii HodovaniukMay 9th, 2021

Too Long; Didn't Read

In this tutorial, we're gonna build a really simple game of Rock Paper Scissors Spock Lizard. We are gonna use vanilla JavaScript, HTML, CSS for this game. We need a computer and user choice and a button to play the game. The game result should look next: You want to add it at the end of your index.html body tag. We need an element to output results. We want to store user input somewhere. We would select elements by class. Then we would add an event listener to each element. We would use a switch for that.

Companies Mentioned

featured image - How to Create Rock Paper Scissors Spock Lizard in JavaScript

Welcome to my tutorial!

In this tutorial, we're gonna build a really simple game of Rock Paper Scissors Spock Lizard.

Please check my GitHub account for the complete source code.

We are gonna use vanilla JavaScript, HTML, CSS for this game.

Let's get started.

First, we need to set up our project folder.

Please create a folder for the game.

Put an empty

index.html

index.css

index.js

file in the folder.

Now you want to put some tags in

index.html

<html>
  <head>
    <title>GAME</title>
  </head>
  <body>
  </body>
</html>

Don't forget to save the file periodically.

We can check that we doing fine by running this file in a browser.

Okay, We can move forward.

Now you want to add input elements for a user.

<span>YOUR CHOICE</span>
    <div id="user-options">
        <div>
            <input type="radio" id="1" name="option" class="user-option">
            <label for="1">⛰️</label>
        </div>
        <div>
            <input type="radio" id="2" name="option" class="user-option">
            <label for="2">✂️</label>
        </div>
        <div>
            <input type="radio" id="3" name="option" class="user-option">
            <label for="3">🧻</label>
        </div>
        <div>
            <input type="radio" id="4" name="option" class="user-option">
            <label for="4">🖖</label>
        </div>
        <div>
            <input type="radio" id="5" name="option" class="user-option">
            <label for="5">🦎</label>
        </div>
    </div>

We want to add it at the end of

index.html

body tag.

We need to add computer output, game result, button to play the game.

The computer output should look next:

<span>COMPUTER CHOICE</span>
<div id="computer-choice">💭</div>

You want to add it at the end of your

index.html

body tag.

The play button is pretty simple:

<button id="play">▶️</button>

You want to add it at the end of your `index.html` body tag.

The game result should look next:

<div id="output"></div>

You want to add it at the end of your

index.html

body tag.

Now you want to link your

index.css

and

index.html

files.

Please add

<script type="text/javascript" src="./index.js"></script>

at the bottom of the body.

That's it. We finished our work with

index.html

We just want to increase the font size to make emojis look better.

You want to add this to your index.css:

html {
    font-size: 42px
}

Let's flip over to our JavaScript file.

We need a function to return a random number in range 1 to 5 for a computer choice.

We would name it

getComputerChoice

and it should look like this one:

function getComputerChoice() {
    return Math.floor((Math.random() * 5) + 1);
}

Put it at the beginning of the

index.js

file.

We want to add some consts that would help us later. Just put it at the end of your

index.js

const ROCK = 'ROCK';
const SCISSORS = 'SCISSORS';
const PAPER = 'PAPER';
const SPOCK = 'SPOCK';
const LIZARD = 'LIZARD';
const OPTIONS = {
    1: ROCK,
    2: SCISSORS,
    3: PAPER,
    4: SPOCK,
    5: LIZARD
};
const OPTIONS2EMOJI = {
    1: '⛰️',
    2: '✂️',
    3: '🧻',
    4: '🖖',
    5: '🦎'
};

Now we want to store user input somewhere. Let's add a variable for that.

let userChoiceID = '';

We want to add event listeners for user input when a page is loaded.

To do that we should write our code inside the callback function.

window.onload = () => {
  // your code here
}

We want to put it at the end of

index.js

We need an element to output results.

const output = document.querySelector('#output');

Put it at the beginning of

onload

function.

We want to add event listeners to handle user input. First, we would select elements by class. Then we would add an event listener to each element.

const userOptions = document.querySelectorAll('.user-option');

userOptions.forEach(el => el.addEventListener('click', event => {
    userChoiceID = event.target.id;
}));

Put it at the end of `onload` function.

Now we want to add an event listener to the play button. Let's create a variable for it first.

const playButton = document.querySelector('#play');

We can now add an event listener.

playButton.addEventListener('click', () => {
})

Let's collect all the information that we need to determine the winner. We need a computer and user choice.

const computerChoiceID = getComputerChoice();
const computerChoice = OPTIONS[computerChoiceID];
const computerChoiceElement = document.querySelector('#computer-choice');
const output = document.querySelector('#output');
const userChoice = OPTIONS[userChoiceID];

let result = '';

Now we can output computer choice.

computerChoiceElement.innerHTML = OPTIONS2EMOJI[computerChoiceID];

Put it at the end of the play button click callback.

Let's write logic to determine a winner. We would use a switch for that. Don't forget to add a default case.

switch (`${computerChoice}-${userChoice}`) {
    case `${ROCK}-${ROCK}`:
    case `${SCISSORS}-${SCISSORS}`:
    case `${PAPER}-${PAPER}`:
    case `${SPOCK}-${SPOCK}`:
    case `${LIZARD}-${LIZARD}`:
        result = 'TIE 👔'
        break;
    case `${ROCK}-${SCISSORS}`:
    case `${ROCK}-${LIZARD}`:
    case `${SCISSORS}-${PAPER}`:
    case `${SCISSORS}-${LIZARD}`:
    case `${PAPER}-${ROCK}`:
    case `${PAPER}-${SPOCK}`:
    case `${SPOCK}-${ROCK}`:
    case `${SPOCK}-${SCISSORS}`:
    case `${LIZARD}-${PAPER}`:
    case `${LIZARD}-${SPOCK}`:
        result = 'COMPUTER WIN 😔💔 🤖🥇'
        break;
    case `${ROCK}-${PAPER}`:
    case `${ROCK}-${SPOCK}`:
    case `${SCISSORS}-${ROCK}`:
    case `${SCISSORS}-${SPOCK}`:
    case `${PAPER}-${SCISSORS}`:
    case `${PAPER}-${LIZARD}`:
    case `${SPOCK}-${PAPER}`:
    case `${SPOCK}-${LIZARD}`:
    case `${LIZARD}-${ROCK}`:
    case `${LIZARD}-${SCISSORS}`:
        result = 'YOU WIN ☺️🥇 🤖💔'
        break;
    default:
        result = 'SOMETHING WRONG. TRY AGAIN. 🐛'
}