Rock Paper Scissor Game

This guide walks you through building a Rock Paper Scissors Game in JavaScript from the ground up, a classic browser game you play against the computer, complete with source code using HTML, CSS, and JavaScript. Instead of only downloading it, you will understand how every part works: getting the computer’s random choice, deciding who wins, updating the score, and showing the result on the page. That understanding is what turns a downloaded game into something you can explain in a viva, extend with your own ideas, or showcase in your portfolio.

1. What the Rock Paper Scissors game is

Rock Paper Scissors is the classic hand game, turned into a browser game you play against the computer. You pick rock, paper, or scissors, the computer picks one at random, and the game decides who won by the familiar rules: rock beats scissors, scissors beats paper, and paper beats rock. The score updates after each round. It is one of the best first JavaScript projects because it teaches the core building blocks of interactive programming, handling clicks, generating randomness, writing decision logic, and updating the page, in a game everyone already knows the rules to, so you can focus entirely on the code.

Like any browser game, it needs no server and no database. It runs entirely in the browser using HTML for the buttons and display, CSS for the look, and JavaScript for all the logic.

2. How the project is structured

The project is three files. The HTML provides the three choice buttons (rock, paper, scissors) and places to show the choices, the result, and the score. The CSS styles them. The JavaScript holds all the logic: it listens for which button you click, makes the computer’s choice, works out the winner, updates the score, and writes the outcome back to the page. The whole game is event-driven, meaning nothing happens until you click, and each click runs one complete round.

3. Getting the computer’s random choice

The computer needs to pick rock, paper, or scissors at random each round. This is done by putting the three options in an array and choosing a random index with Math.random:

// the computer picks one at random
const options = ['rock', 'paper', 'scissors'];
function computerChoice() {
  const index = Math.floor(Math.random() * options.length);
  return options[index];
}

Math.random() gives a decimal between 0 and 1, multiplying by the array length and flooring it turns that into a valid index of 0, 1, or 2. This little pattern, random index into an array, is one of the most useful things to learn in JavaScript, and it appears in countless programs beyond this game. Being able to explain how it produces a fair random choice is a small but real demonstration of understanding.

4. The win logic: deciding the result

This is the heart of the game: comparing the player’s choice to the computer’s and deciding the outcome. First, if both chose the same, it is a tie. Otherwise, the player wins only in the three winning combinations, and loses in every other case.

// decide the result of one round
function getResult(player, computer) {
  if (player === computer) return 'tie';
  const playerWins =
    (player === 'rock'     && computer === 'scissors') ||
    (player === 'scissors' && computer === 'paper') ||
    (player === 'paper'    && computer === 'rock');
  return playerWins ? 'win' : 'lose';
}

This function captures the entire rulebook of the game in a few lines. The three winning combinations are listed explicitly, and anything that is not a tie and not a win must be a loss. Being able to walk an examiner through this logic, why these three combinations and only these three mean a win, shows you understand the decision-making at the core of the project rather than having only run it.

5. Keeping score

Score keeping is simple bookkeeping. Two variables track wins and losses (and optionally ties), and each round updates the right one based on the result:

// track and update the score
let wins = 0, losses = 0;
function updateScore(result) {
  if (result === 'win')  wins++;
  if (result === 'lose') losses++;
}

The score lives in variables that persist between rounds because they sit outside the round function, so they remember their values as you keep playing. This is a gentle but important lesson in variable scope, where a variable is declared decides how long it lives, which matters in every program you will write.

6. Showing the result on the page

The final step of each round is updating what the player sees. JavaScript reaches into the page and changes the text of elements to show the player’s choice, the computer’s choice, the round result, and the running score:

// write the outcome back to the page
function showResult(player, computer, result) {
  document.getElementById('player').textContent   = player;
  document.getElementById('computer').textContent = computer;
  document.getElementById('result').textContent   = result;
  document.getElementById('score').textContent =
    'Wins: ' + wins + ' Losses: ' + losses;
}

This is the bridge between your logic and what the user actually sees. Updating textContent to reflect the current state is how almost every interactive web page works, so understanding it here carries over to far bigger projects. Tied together, a single click handler calls each of these steps in order, which is the whole game.

7. Setup and how to run it

Running the game needs nothing but a browser. The steps are simply:

1. Download and unzip the project folder.
2. Open the index.html file in any modern web browser.
3. Click rock, paper, or scissors to play against the computer.

There is no server, database, or installation, which is part of what makes a JavaScript game such an approachable project.

8. How to extend it for your own project

Assignments and portfolios reward what you add, not what you copied. Because you now understand the round logic and its pieces, here are natural extensions you can build and explain:

• Best of five: end the game and declare an overall winner once someone reaches three wins.
• Animations and images: show hand images and animate the reveal of each choice.
• Track ties: add a tie counter alongside wins and losses.
• Rock Paper Scissors Lizard Spock: extend the rules to the five-choice version, a great logic exercise.
• Reset button: let the player clear the score and start over.

Each is a small, well-scoped addition that demonstrates real understanding, exactly what turns a standard download into a project you can be proud of.

Frequently asked questions