DEV Community

Cover image for Easy Rock Paper Scissorโ€™s game with JavaScript

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;
Enter fullscreen mode Exit fullscreen mode

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){
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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; 
};
Enter fullscreen mode Exit fullscreen mode

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 + ".");
 }
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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.`)
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
pandersail profile image
Angelo ๐Ÿ‘จ๐Ÿพโ€๐Ÿ’ป

Thank you for sharing, it looks beautiful! The only potential issue that I might find is that someone types something other than options. The for loops would probably count it as +1?

Collapse
 
obasi042 profile image
Obasi Nwosu • Edited

Could a game of rock, paper, scissors be used to explore topics such as negotiating process, strategy, and even artificial intelligence? How else could this simple game be used?