← Basic Web Development

Lesson 8 of 10

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. More branching logic, plus a score the program has to remember 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 adds up over many rounds.

How it works

  • playerScore and computerScore use let because their values change. They are declared outside the function, so the values stay between clicks. This is called keeping state.
  • The three moves are stored in a moves array.
  • The computer picks moves[Math.floor(Math.random() * moves.length)]. That is the same random-item recipe you used 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. One side is enough.
  • The three lines list every way the player can win. If none of them is true, the computer won.

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 show but do nothing.

  2. Make the computer choose

    Make the moves array. Write playRound(playerMove) so it picks a random computer move and 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 each round and update #scoreboard. The game now has memory.

Try these changes

Make these in the files beside this guide. None of them need anything the lesson has not covered.

  • Show the computer's move as an emoji: 🪨 📄 ✂️.
  • Add a Reset score button.
  • Announce a winner at 5 points.
  • Add a fourth move and update `decideWinner`.
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. That is the clearest way to teach why the position of a declaration matters.
  • Write the win table on the board before writing decideWinner. Three rows, player move against computer move. The code is then a direct translation.
  • Check the tie first. If a student writes the win cases first, ties fall through to "computer wins" and the bug is hard to see.
  • Ask why let and not const for the scores. The answer names the difference.