Skip to main content
← JavaScript

Lesson 8 of 11

Rock Paper Scissors

Play against the computer. The page keeps the score across rounds.

What you will learn

  • Arrays
  • Math.random()
  • && and ||
  • if / else if / else
  • Keeping state in a variable

Before you start

Calculator. This page adds more branching logic. It also keeps a score that the program remembers between clicks.

What this page does

  1. Click Rock, Paper, or Scissors.
  2. The computer picks one at random.
  3. The result line says who won the round.
  4. The scoreboard keeps the totals over many rounds.

How it works

  • playerScore and computerScore use let because their values change. They are declared outside the function. That is why the values stay between clicks. This is called keeping state.
  • The moves array holds the three moves.
  • The computer picks moves[Math.floor(Math.random() * moves.length)]. You used this same way of picking a random item in Zoo Webpage.
  • decideWinner() returns one of three words: "tie", "player", or "computer".
game.js
function decideWinner(player, computer) {
    if (player === computer) return "tie";

    if ((player === "rock"     && computer === "scissors") ||
        (player === "paper"    && computer === "rock")     ||
        (player === "scissors" && computer === "paper")) {
        return "player";
    }

    return "computer";
}
  • && means and. Both sides must be true.
  • || means or. Only one side needs to be true.
  • The three lines list every way the player can win. If none of them is true, the computer wins.

Build it step by step

  1. Make the page

    Make index.html with three buttons, a <p id="result">, and a <p id="scoreboard">. Put the <script> tag at the end. The buttons appear, but they do nothing yet.

  2. Make the computer choose

    Make the moves array. Write playRound(playerMove). It picks a random computer move. It shows both moves in #result. Connect the three buttons. Click one. You see your move and a random move.

  3. Decide the winner

    Write decideWinner(player, computer). Check for a tie first. Then list the three ways the player wins. Use the result in playRound to say who won.

  4. Keep the score

    Add playerScore and computerScore at the top of the file with let. Add 1 to the winner's score each round. Update #scoreboard. The game now remembers the score.

Try these changes

Make these changes in the files beside this guide. Each one only uses what this lesson has already covered. Tick each one when it works.

Check yourself

Three quick questions on this lesson. Get them all right to finish the lesson and earn a pack.

Loading your answers

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Move the score variables inside the function on purpose. Then play two rounds. The score resets to 1 every time. Move them back out. This is the clearest way to teach why the position of a declaration matters.
  • Write the win table on the board before you write decideWinner. It has three rows. Each row shows one player move against one computer move. The code is then a direct translation of that table.
  • Check the tie first. If a student writes the win cases first, every tie counts as "computer wins". That bug is hard to see.
  • Ask why the scores use let and not const. The answer names the difference between them.