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. YouTube video Let's get started. First, we need to set up our project folder. Please create a folder for the game. Put an empty , , file in the folder. index.html index.css index.js Now you want to put some tags in . index.html <html> <title>GAME</title> <body> < < > head </ > head </ > 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. YOUR CHOICE ⛰️ ✂️ 🧻 🖖 🦎 < > span </ > 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 body tag. index.html We need to add computer output, game result, button to play the game. The computer output should look next: COMPUTER CHOICE 💭 < > span </ > span < = > div id "computer-choice" </ > div You want to add it at the end of your body tag. index.html 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 body tag. index.html Now you want to link your and files. index.css index.html 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 and it should look like this one: getComputerChoice { .floor(( .random() * ) + );
} ( ) function getComputerChoice return Math Math 5 1 Put it at the beginning of the file. index.js We want to add some consts that would help us later. Just put it at the end of your index.js ROCK = ; SCISSORS = ; PAPER = ; SPOCK = ; LIZARD = ; OPTIONS = { : ROCK, : SCISSORS, : PAPER, : SPOCK, : LIZARD
}; OPTIONS2EMOJI = { : , : , : , : , : }; const 'ROCK' const 'SCISSORS' const 'PAPER' const 'SPOCK' const 'LIZARD' const 1 2 3 4 5 const 1 '⛰️' 2 '✂️' 3 '🧻' 4 '🖖' 5 '🦎' Now we want to store user input somewhere. Let's add a variable for that. userChoiceID = ; let '' 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. .onload = { } window => () // your code here We want to put it at the end of . index.js We need an element to output results. output = .querySelector( ); const document '#output' Put it at the beginning of function. onload 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. userOptions = .querySelectorAll( );

userOptions.forEach( el.addEventListener( , event => {
    userChoiceID = event.target.id;
})); const document '.user-option' => el 'click' 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. playButton = .querySelector( ); const document '#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. computerChoiceID = getComputerChoice(); computerChoice = OPTIONS[computerChoiceID]; computerChoiceElement = .querySelector( ); output = .querySelector( ); userChoice = OPTIONS[userChoiceID]; result = ; const const const document '#computer-choice' const document '#output' const let '' 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. ( ) { : : : : :
        result = ; : : : : : : : : : :
        result = ; : : : : : : : : : :
        result = ; :
        result = } switch ` - ` ${computerChoice} ${userChoice} case ` - ` ${ROCK} ${ROCK} case ` - ` ${SCISSORS} ${SCISSORS} case ` - ` ${PAPER} ${PAPER} case ` - ` ${SPOCK} ${SPOCK} case ` - ` ${LIZARD} ${LIZARD} '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} '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} 'YOU WIN ☺️🥇 🤖💔' break default 'SOMETHING WRONG. TRY AGAIN. 🐛' Put it at the end of the play button click callback. Now we are ready to output the result. output.innerHTML = result; Put it at the end of the play button click callback. There you have it you can now play against the computer. There are plenty of cool ways to improve on this simple pure JavaScript rock-paper-scissors-Spock-lizard including a score count Once again I hope you enjoyed my tutorial if you have any questions regarding the code please leave a comment. I'll make sure to get back to you with help. Also published on GitHub .

Target

YouTube

Tweet a thanks

Read My Stories

Too Long; Didn't Read

 Add passwordless user experiences to your app

HackerNoon Mobile

How to Create Rock Paper Scissors Spock Lizard in JavaScript

Too Long; Didn't Read

Companies Mentioned

@matviihodovaniuk

RELATED STORIES