rock-paper-scissor

How To Make Rock Paper Scissor in JavaScript

by

Rock Paper Scissor is a very popular and very easy game to make in JavaScript. I’ll show you how to build this game and here is my GitHub Repo in case you need it.

The logic of this game is that we choose one of the rock paper scissor and the opponent’s choice will be generated randomly and the result will be based on the choices. Here are the steps to do it :

  1. Make the HTML
  2. Set the Global Variables
  3. Add the Game Logic

1. Make the HTML

We’ll need 2 files, index.html and script.js. Let’s prepare our HTML first.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissor</title>
</head>
<body>
    
    <script src="./script.js"></script>
</body>
</html>

Then we display our game, just insert the code below inside the body tag. We’ll be using a bunch of spans to display our texts (including the placeholders which will be modified with JavaScript) and also radio buttons for the choice and button to play the game.

HTML
<main>
    <h1>Rock Paper Scissor</h1>
    <span>Pick one!</span>
    <div>
        <span>Your choice : </span>
        <input type="radio" name="choice" id="rock" value="rock">
        <label for="rock">Rock</label>
        <input type="radio" name="choice" id="paper" value="paper">
        <label for="paper">Paper</label>
        <input type="radio" name="choice" id="scissor" value="scissor">
        <label for="scissor">Scissor</label>
    </div>
    <button id="start">Start!</button>
    <div>
        <span>Opponent's Choice : </span>
        <span id="opponent">Waiting for your choice..</span>
    </div>
    <div>
        <span>Result : </span>
        <span id="result"></span>
        <br>
    </div>
</main>

2. Set the Global Variables

Inside the JavaScript, we’ll set up the variables we need. We only need to set the elements with the corresponding IDs that we need and also an array of rock paper scissors.

JavaScript
const start = document.querySelector('#start');
const opponent = document.querySelector('#opponent');
const result = document.querySelector('#result');
const restart = document.querySelector('#restart');
const choices = [
    'rock', 'paper', 'scissor'
];

3. Add the Game Logic

Now we get into the logic to determine the win or lose or draw.

  • First we add a listener to the start button to run the logic when it’s clicked.
  • Then we retrieve the choice of the player. We do this inside the function (instead of a global variable) because if we make it a global variable, it will remain null even if we click start.
  • Next, we determine the opponent’s choice. We generate a random number from 0 to 2 (method referenced from stackoverflow) and use it as the index to make the opponent’s choice.
  • After that, we check if the choice is null, if it is, we alert the user telling them to pick. If it is not null, we continue with the next step.
  • Finally, we compare the player and the opponent. We’ll use nested if with the basic rock paper scissor rule (rock beats scissor, etc) and display the messages to their corresponding IDs.
JavaScript
start.addEventListener('click', function() {
    const choice = document.querySelector('input[name="choice"]:checked')?.value;
    const randomNum = Math.floor(Math.random() * 3);
    const opponentChoice = choices[randomNum];
    if (!choice) {
        alert('Pick one!');
    } else {
        opponent.innerHTML = opponentChoice;
        if (choice === 'rock') {
            if (opponentChoice === 'rock') {                
                result.innerHTML = 'Draw';
            } else if (opponentChoice === 'paper') {
                result.innerHTML = 'Lose';
            } else {
                result.innerHTML = 'Win';
            }
        } else if (choice === 'paper') {
            if (opponentChoice === 'rock') {                
                result.innerHTML = 'Win';
            } else if (opponentChoice === 'paper') {
                result.innerHTML = 'Draw';
            } else {
                result.innerHTML = 'Lose';
            }
        } else if (choice === 'scissor') {
            if (opponentChoice === 'rock') {                
                result.innerHTML = 'Lose';
            } else if (opponentChoice === 'paper') {
                result.innerHTML = 'Win';
            } else {
                result.innerHTML = 'Draw';
            }
        }
    }
});

Conclusion

And that’s how you make a simple rock paper scissor game in JavaScript. It’s a pretty fun exercise to put your basic JavaScript skills into practice. You can improve it further by making it several rounds or improve the UI.

If you want to host your result, you can do it on GitHub Pages for free or if you want it to look more professional, you can host it on Cloudways. It is a compatible, fast and reliable managed cloud hosting. Go ahead and check it out!

For you who want to brush up your JavaScript skills, whether to deepen or learn form zero, I recommend you try Codecademy. There are tons of JavaScript lessons that you can learn in a structured and interactive way. You can learn from the most basic materials to advanced stuffs and even preparing for technical interviews. Go try it now!

If you are interested to practice JavaScript by building other games, you can try my other posts :

Now, go have fun! What should I build next?

Leave a Comment