Building Your First JavaScript Program

10. Random Numbers

Games often need randomness.

JavaScript provides:

Math.random()

It returns a random number from 0 up to, but not including, 1.

For example:

Math.random();

might produce:

0.3847291

or:

0.9271832

If we want a random integer from 0 to 2, we can use:

Math.floor(Math.random() * 3);

Why?

Math.random() gives a value between 0 and 1.

Multiplying by 3 gives a value between:

0 and 2.999...

Math.floor() removes the decimal part:

0, 1, or 2

This is useful for selecting one of three choices.

11. Rock-Paper-Scissors

Now we can combine what we have learned.

The game has three possible choices:

rock
paper
scissors

The player chooses one.

The computer randomly chooses one.

Then the program compares the two choices.

The rules are:

Rock     beats Scissors
Scissors beats Paper
Paper    beats Rock

If both choices are the same, it is a draw.

11.1 Store the Possible Choices

An array is useful when we have a list of values.

const choices = ["rock", "paper", "scissors"];

We can access an item using its index:

choices[0]

returns:

rock

and:

choices[1]

returns:

paper

The indexes start from 0.

So:

Index 0 → rock
Index 1 → paper
Index 2 → scissors

11.2 Get the Player's Choice

const playerChoice = prompt(
    "Choose rock, paper, or scissors:"
);

Now playerChoice contains the user's choice.

11.3 Generate the Computer's Choice

We can generate a random index:

const randomIndex = Math.floor(Math.random() * choices.length);

Then use that index:

const computerChoice = choices[randomIndex];

Now the computer has randomly selected one of the three choices.

11.4 Compare the Choices

First, check for a draw:

if (playerChoice === computerChoice) {
    alert("Draw!");
}

Then check the winning conditions:

else if (
    (playerChoice === "rock" && computerChoice === "scissors") ||
    (playerChoice === "paper" && computerChoice === "rock") ||
    (playerChoice === "scissors" && computerChoice === "paper")
) {
    alert("You win!");
}

Otherwise:

else {
    alert("You lose!");
}

12. Complete Rock-Paper-Scissors Program

Putting everything together:

const choices = ["rock", "paper", "scissors"];

const playerChoice = prompt(
    "Choose rock, paper, or scissors:"
);

const randomIndex = Math.floor(
    Math.random() * choices.length
);

const computerChoice = choices[randomIndex];

if (playerChoice === computerChoice) {
    alert("Draw!");
} else if (
    (playerChoice === "rock" && computerChoice === "scissors") ||
    (playerChoice === "paper" && computerChoice === "rock") ||
    (playerChoice === "scissors" && computerChoice === "paper")
) {
    alert("You win!");
} else {
    alert("You lose!");
}

console.log("Your choice:", playerChoice);
console.log("Computer choice:", computerChoice);

Try pasting this directly into the browser console.

This small program already demonstrates several important programming concepts:

Variables
    ↓
User input
    ↓
Arrays
    ↓
Random numbers
    ↓
Conditions
    ↓
Boolean expressions
    ↓
Program output

This is the important part of the exercise: the game is simple, but it combines several fundamental programming concepts.