JavaScript Tutorial for Kids: Rock, Paper, Scissors

Is rock, paper, scissors more about skill or luck? Everyone has their own theory, but it’s one of those games that we all love to play when we’re bored.

The logic is relatively simple, so it’s an easy game for beginners to turn into code too. You can replicate this game in any coding language, but JavaScript is a great way to play.

📌 [Download] JavaScript Projects Source Code Get the full source code for seven JavaScript project examples. Download Now

In this tutorial, we’ll automate a game of Rock, Paper, Scissors versus the computer. Use computational thinking to setup the game and handle the possible game outcomes. Follow this tutorial to build your own rock, paper, scissors game and try out your luck (or skills!).

Complete this JavaScript tutorial to make your own Rock, Paper, Scissors game.

Play the completed Rock, Paper, Scissors.

Recommended: JavaScript for Kids

Tutorial Steps

Step 1: Add some setup code to handle the player’s choice
Step 2: Add logic to handle the player’s choice
Step 3: Show an emoji on the page for the computer’s choice
Step 4: Shuffle the computer’s emoji choices
Step 5: Pick a random emoji for the computer
Step 6: Decide who won the game
Finished project!

What you need:

1. Text editor

We’ll be using the CodeWizardsHQ editor to write and run our JavaScript code.

You can also use an online text editor like replit that allows you to author and run JavaScript programs in a web browser. Make sure you have all of the project base files in order for your program to work correctly.

2. Base Files

Download the base files and open the app.js file. This folder contains all the images and files you will need to complete your game.

The HTML file holds the page title, emojis, and Player/Computer choice text.
The CSS file adds some styling to our page and helps lay out the HTML elements.
The error-handler.js file will display a big red error box on the page if you make an error while typing out your JavaScript code.
The app.js file is where we’ll write our application code.

If you’re a CodeWizardsHQ student, download the x_hour_of_code_2022 project for the completed code. The starter files are in the javascript-projects/rock-paper-scissors/starter-files directory.

Note: The index.html file (which executes the JavaScript) expects the filename app.js so you must use the same file name if you’re using your own text editor! You’ll edit the app.js file but you’ll always run the index.html file.

This tutorial is for beginner JavaScript programmers ages 8+. It assumes you understand basic HTML/CSS and JavaScript. Let’s get started!

Step 1: Add some setup code to handle the player’s choice.

We’ll begin by adding code to set up when the player clicks the emoji to make their choice.

Open the app.js file, all of the code in this tutorial will go into this file.
Create a playerChoice variable representing the player’s choice and set it to an empty string (the "" characters denote a string). We’ll declare this variable at the top of our file because we want to use it in a few places

Note: We’ll define all of our functions at the bottom of the file, and leave the variable declarations, event listener registration, and function calls at the top of our file.

var playerChoice = "";

Use document.querySelector() to select the #player-choice-container HTML element (the # means this is the ID of the element) and store it in a variable called playerChoiceContainer. This is the section that holds the player’s emojis.

var playerChoice = "";

var playerChoiceContainer = document.querySelector("#player-choice-container");

Attach an event listener to the playerChoiceContainer that will run the handlePlayerChoice() function (which we’ll create next) whenever this container with the player’s emojis is clicked.

var playerChoiceContainer = document.querySelector("#player-choice-container");

playerChoiceContainer.addEventListener("click", handlePlayerChoice);

Create a function called handlePlayerChoice() that records the players emoji selection. Since this is an event-handler function attached to a click event, use an event parameter representing the click event in the parenthesis. Note that there is no change in the output for this step!

playerChoiceContainer.addEventListener("click", handlePlayerChoice);

function handlePlayerChoice(event) {

}

Step 2: Add logic to handle the player’s choice

Once the player clicks on their emoji choice, we need to add logic that will save their choice and display it on the screen.

In the handlePlayerChoice() function, add an if statement. If the element that was clicked (the event.target) does not (!) contain the class emoji, we will exit the function. This means that if a player clicks next to an emoji, none of the other function code runs. If they click on an emoji, it will run. The return statement exits a function immediately and can optionally return a value to the function caller.

function handlePlayerChoice(event) {
    if (!event.target.classList.contains("emoji")) return;

}

Get the text content of the clicked element (the emoji) and save it in the playerChoice variable. We’ll then change the innerHTML of the playerChoiceContainer to only display the emoji that was clicked.

function handlePlayerChoice(event) {
    if (!event.target.classList.contains("emoji")) return;

    playerChoice = event.target.textContent;
    playerChoiceContainer.innerHTML = `<p class="emoji">${playerChoice}</p>`;

}

Step 2 Output

Step 3: Show an emoji on the page for the computer’s choice

We’ll create a function that will eventually shuffle the emojis on the page and display the computer’s choice. In this step, we’ll create the function and display a single emoji choice on the page.

Create a variable called computerChoice that will hold the computer’s choice. We want to be able to access the variable in a few places so we’ll create it at the top of our file to ensure that it is global.

var playerChoice = "";
var computerChoice = "";

Create an array, a type of data that holds several items in a single variable, called emojis that holds the Rock, Paper, and Scissors emoji characters. Note that the scissors emoji needs to have an additional space after the emoji, as the quote characters overlap the emoji if you don’t add a space on the right-hand side in most text editors.

You can find each emoji here:

https://emojipedia.org/rock/
- 🪨
https://emojipedia.org/page-facing-up/
- 📄
https://emojipedia.org/scissors/
- ✂️

var playerChoice = "";
var computerChoice = "";
/*
 * Note that the scissors emoji has to have an extra space!
 */
var emojis = ["✂️ ", "📄", "🪨"];

In a variable called emojiShuffleElement, use document.querySelector() to get a reference to the #emoji-shuffle element.

var emojis = ["✂️ ", "📄", "🪨"];

var playerChoiceContainer = document.querySelector("#player-choice-container");
var emojiShuffleElement = document.querySelector("#emoji-shuffle");

Next, create a function called shuffleEmojis(). This will eventually shuffle through the computer’s three emojis on a timer, but right now, it’ll simply pick whatever emoji we ask for from the emojis array and display it on the page. (Don’t type the ... characters. Those are an indicator that we’re leaving out code you don’t need to worry about right now.)

function handlePlayerChoice(event) {
    ...
}

function shuffleEmojis() {

}

Get an item from the emojis array and store it in the computerChoice variable. We use the [] brackets to access array items at an index number. Array indices start at 0, so the first element is at index 0, the second at index 1, etc. Here, we select the second item, the Paper emoji.

function shuffleEmojis() {
    computerChoice = emojis[1];
}

Get the text inside of your emojiShuffleElement variable by setting the textContent of the emojiShuffleElement to the computerChoice (which represents the emoji text). If you don’t need to change the HTML of an element, the textContent property is an easy way to display text on the screen.

function shuffleEmojis() {
    computerChoice = emojis[1];
    emojiShuffleElement.textContent = computerChoice;
}

Next, call the shuffleEmojis() function. You should now see your chosen emoji appear under the “Computer’s Choice” text. Try changing the index number to a different emoji’s index in shuffleEmojis() to see if the emoji on the page changes! Note that you’ll need to refresh the page after each change in order to see the changes take effect.

playerChoiceContainer.addEventListener("click", handlePlayerChoice);

shuffleEmojis();

function handlePlayerChoice(event) {
  ...
}

Step 3 Output

Step 4: Shuffle the computer’s emoji choices

We’ll create a shuffle animation that shuffles through the Rock, Paper, and Scissors emojis quickly. This makes it seem like the computer is thinking about what choice it will randomly select.

Create a variable called currentEmojiNumber that will hold the index number of the emoji we’re currently displaying on the page during the shuffling process. We’ll start with the first index in the emojis array, index 0.

var emojis = ["✂️ ", "📄", "🪨"];
var currentEmojiNumber = 0;

In the shuffleEmojis() function, use the currentEmojiNumber to pick an emoji out of the emojis array.

function shuffleEmojis() {
    computerChoice = emojis[currentEmojiNumber];
    emojiShuffleElement.textContent = computerChoice;
}

We need to increase the currentEmojiNumber if we’re not on the last index of the emojis array and set it to 0 otherwise. We’ll use an if...else conditional statement to do this. Note that the emojis array has a length property that we can use to find out how big it is and that the last index number is 1 less than the length of the array. Also, note that we can increase the value stored in a variable using the ++ operator, as we do on the currentEmojiNumber here.

function shuffleEmojis() {
    computerChoice = emojis[currentEmojiNumber];
    emojiShuffleElement.textContent = computerChoice;

    if (currentEmojiNumber < emojis.length - 1) {
        currentEmojiNumber++;
    } else {
        currentEmojiNumber = 0;
    }

}

Remove the call to shuffleEmojis(). We’ll have JavaScript call this function in an interval timer instead.

playerChoiceContainer.addEventListener("click", handlePlayerChoice);

shuffleEmojis();  // REMOVE THIS!

function handlePlayerChoice(event) {
  ...
}

Use the setInterval() function to call the shuffleEmojis() function every 150 milliseconds. The setInterval() function is provided to us from the browser. It returns a reference to the ID of the running interval timer which we’ll store in a variable called shuffleIntervalID. This ID can be used to stop the interval timer, which we’ll do in the next step.

var currentEmojiNumber = 0;

var shuffleIntervalID = setInterval(shuffleEmojis, 150);

var playerChoiceContainer = document.querySelector("#player-choice-container");

Step 4 Output

Step 5: Pick a random emoji for the computer

Now that the computer’s possible choices are shuffling between Rock, Paper, and Scissors, we need to actually pick a random choice for the computer after the player makes their choice.

We’ll use the clearInterval() function to stop shuffleEmojis() inside our handlePlayerChoice() function. Since the shuffleIntervalID points to the interval timer that is running shuffleEmojis(), clearInterval() will stop that timer.

function handlePlayerChoice(event) {
    if (!event.target.classList.contains("emoji")) return;
    playerChoice = event.target.textContent;
    playerChoiceContainer.innerHTML = `<p class="emoji">${playerChoice}</p>`;
    clearInterval(shuffleIntervalID);
}

Step 5 Output

Step 6: Decide who won the game

For our last step, we’ll create a function to see who won the game.

Create a function called determineGameWinner(). This function will hold all the logic to determine who won the game.

function determineGameWinner() {

}

Create two variables: gameResultMessageElement and gameResultMessage. We can use document.querySelector() to get the HTML element with the ID of game-result-message and then the gameResultMessageElement. We’ll make the gameResultMessage an empty string for now because we won’t know the value of this variable until we determine who won.

playerChoiceContainer.addEventListener("click", handlePlayerChoice);

function determineGameWinner() {

    var gameResultMessageElement = document.querySelector("#game-result-message");
    var gameResultMessage = "";

}

function handlePlayerChoice(event) {
  ...
}

We can use a chain of conditional statements to determine if there is a tie, if the player won, or if the computer won. Set the gameResultMessage in the body of each conditional statement. Note that we only need to check for a tie and if the player won. If neither of those results occurs, then we can use the else clause to state that the computer won. Also, please make sure to add an extra space to the right of the scissors emoji to ensure your program works correctly (there’s an extra space in the HTML and in our emojis array).

function determineGameWinner() {
    var gameResultMessageElement = document.querySelector("#game-result-message");
    var gameResultMessage = "";

    if (playerChoice === computerChoice) {
        gameResultMessage = "It's a tie!";
        // Note the extra space in the scissors emoji!
    } else if (playerChoice === "🪨" && computerChoice === "✂️ ") {
        gameResultMessage = "Player wins!";
    } else if (playerChoice === "📄" && computerChoice === "🪨") {
        gameResultMessage = "Player wins!";
    } else if (playerChoice === "✂️ " && computerChoice === "📄") {
        gameResultMessage = "Player wins!";
    } else {
        gameResultMessage = "Computer wins!";
    }

}

The final thing our function needs to do is add our gameResultMessage to the page. We do this by making it the textContent of the gameResultMessageElement. We can also stick the string “Refresh to play again!” on the end of our gameResultMessage so users of our app know how to play another game.

function determineGameWinner() {
    ...

    if (playerChoice === computerChoice) {
        gameResultMessage = "It's a tie!";
        // Note the extra space in the scissors emoji!
    } else if (playerChoice === "🪨" && computerChoice === "✂️ ") {
        gameResultMessage = "Player wins!";
    } else if (playerChoice === "📄" && computerChoice === "🪨") {
        gameResultMessage = "Player wins!";
    } else if (playerChoice === "✂️ " && computerChoice === "📄") {
        gameResultMessage = "Player wins!";
    } else {
        gameResultMessage = "Computer wins!";
    }

    gameResultMessageElement.textContent = gameResultMessage + " Refresh to play again!";
}

As the final step, we’ll call our determineGameWinner() function in handlePlayerChoice() after all of the other function code has run:

function handlePlayerChoice(event) {
    if (!event.target.classList.contains("emoji")) return;
    playerChoice = event.target.textContent;
    playerChoiceContainer.innerHTML = `<p class="emoji">${playerChoice}</p>`;
    clearInterval(shuffleIntervalID);
    determineGameWinner();
}

Step 6 Output

Your game is complete!

Check out the finished project.

Download the project files and open app.js to view the completed project code.

Add this fun game to your portfolio and show it off to family and friends. You can even customize the code to be your own version of Rock, Paper, Scissors with new rules and design.

Download JavaScript Projects Source Code

If you want to get the code behind 7 different JavaScript projects, download the full source code for free. You can use this code as an example to add to or inspire new projects. Enter your email below:

If you want to code more websites and games in JavaScript, join CodeWizardsHQ’s live coding classes for kids. It’s the most fun and effective way for kids to learn JavaScript and other real-world languages.

Students in all of our core programming tracks study JavaScript because of its importance in web development and beyond. They work with a live, expert instructor who supports them every step of the way. Classes are engaging and you’ll build a portfolio of websites, games, and apps as you learn.