Easy Rock Paper Scissor’s game with JavaScript

Welcome to this tutorial on how to create a simple rock, paper, scissors game using JavaScript!

(Link for you to try at the bottom.)

Are you ready to test your luck against the computer in a game of rock, paper, scissors? In this article, we’ll be discussing a code that allows you to play five rounds of this classic game, and see who comes out on top.

But this isn’t just any ordinary game of rock, paper, scissors. This code has been designed to add a little bit of excitement and competition to the mix. Are you ready to see if you have what it takes to beat the computer? Let’s find out!

How the code works:

The code starts off by defining an array called “play”, which contains the three options that you can choose from: “rock”, “paper”, and “scissors”. It also defines three variables: “wins”, “losses”, and “draws”, which will be used to keep track of the outcome of each round.

let play = [“rock”, “paper”, “scissors”];

let wins = 0;
let losses = 0;
let draws = 0;

Next, the code displays an alert message introducing the game and explaining the rules. It then enters a loop that will run for a total of five rounds.

let introduction = ("Get ready – five rounds of rock, paper, and scissors are about to start! (User's consent not required.)");
alert(introduction)

let i = 0;
while (i < 5){

During each round, the code will prompt you to enter your choice. It will then convert your answer to lowercase, so that it doesn’t matter whether you type in “rock”, “ROCK”, or “RoCk”.

let hAnswer = prompt("How will it be, eh? You ought to choose!");
hAnswer = hAnswer.toLowerCase();

Don’t try to slip-in a different word, the game will reset if you do!

if (
    (hAnswer !== "rock" && hAnswer !== "paper" && hAnswer !== "scissors")
) {
    alert("Dude play either rock, paper, or scissors. Reload the page to start again.");
    break; 
};

But here’s where things get interesting. The code will then generate a random answer for the computer, using the “play” array and the “Math.random()” function. It will display an alert message showing the computer’s choice, and it will also keep you on the edge of your seat by adding a little bit of suspense with some dramatic music.

let cAnswer = play[Math.floor(Math.random() * play.length)];

if (hAnswer == "rock" || hAnswer == "paper" || hAnswer == "scissors") {
    alert("Computer has played " + cAnswer + ".");
 }

Finally, the code will determine the outcome of the round based on the rules of rock, paper, scissors. If it’s a draw, the “draws” counter will be incremented. If you win, the “wins” counter will be incremented. And if you lose, the “losses” counter will be incremented.

 //Response for draw & counter
if (hAnswer === cAnswer) {
    draws++
    alert(`It's a draw. We're keeping tabs... (${draws})`)
} 

//Response for win & counter
else if (
    (hAnswer == "rock" && cAnswer == "scissors") ||
    (hAnswer == "paper" && cAnswer == "rock") ||
    (hAnswer == "scissors" && cAnswer == "paper")
) { wins++
    alert(`You have won ${wins} times, luck lol.`)
}

//Response for loss & counter
else {
    losses++
    alert(`You have lost ${losses} times ahaha!`)
} i++ //counter for <5 loop
}

At the end of the loop, the code will display an alert message showing the final results, including the number of wins, losses, and draws. It will also add a little bit of flair by adding some celebratory music if you win, or some commiserating music if you lose.

alert(`You have won ${wins} times, draw ${draws} times and lost ${losses} times.`)

Conclusion:

So there you have it — a code that allows you to play rock, paper, scissors against your computer in a fun and exciting way. Whether you’re a seasoned pro or a beginner, this code is a great way to test your luck and see if you have what it takes to beat the computer. So why wait? Give it a try and see if you have what it takes to come out on top!

Try it here