JavaScript

Rock, Paper and Scissor Game Using JavaScript

Rock, Paper, and Scissor is a well-known game around the globe that almost everyone has played in their childhood. To normal people, it’s a good childhood memory, but for programmers, it is a good coding practice. Beginner programmers should always look for interesting and easy-to-implement problems. And this is one of them. This article will demonstrate the implementation of the RPS game with JavaScript.

Step 1: Set up HTML Webpage

Start by creating a new HTML webpage, and in that webpage, Do the following things:

  • Greet the user or Challenge them
  • Include a start button that starts the game

To do these, use the following lines inside the HTML document:

<center>

<h3>Let's play A Game of Rock Paper Scissors</h3>

<br />

<b>Type 0 for Rock , 1 For Paper, 2 for Scissors</b>

<br />

<br />

<button onclick="startGame()">Start</button>

</center>

In the above lines, the user is also being notified that the 0 means Rock, 1 means Paper and 2 means Scissors. These are also the rules which will be implemented to determine the winner. Also, the button has an onclick property set to the startGame() method, which will start the game once the user clicks it.

Load the HTML in the browsers, and it will display the following webpage:

Everything is placed o=in the center of the webpage thanks to the <center> tag

Step 2: JavaScript Code for the Functionality of the Game

Start by creating the function startGame() which will be called on every button press:

function startGame() {

//The upcoming code goes inside here

}

After that generate the computer’s move, Remember there are only 3 different options, 0,1 and 2. 0 stands for Rock, 1 stand for Paper and 2 stands for Scissors:

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

This provides a random value from 0 to 2 and stores it inside the variable cm standing for the computer’s move.

After that, use a prompt to tell the user to enter his choice, store that choice in a variable and then convert it into int by using the parseInt() method and store the final value in the variable “pm”:

input = prompt("Enter your Choice!");

pm = parseInt(input);

After that, write the rules for deciding the winner of the game by using the following rules:

  • Rock beats Scissor
  • Scissor beats Paper
  • Paper beats Rock
  • Same sign => Tie

These rules are implemented with simple if-else if statements with the following lines:

if (cm == 0&& pm == 1) {
    alert("You beat Computer with Paper against Rock");
  } elseif ((cm = 0&& pm == 2)) {
    alert("Computer Beat you with Rock");
  } elseif ((cm = 1&& pm == 0)) {
    alert("Computer Beat you With Paper");
  } elseif ((cm = 1&& pm == 2)) {
    alert("You beat Computer with Scissor against Paper");
  } elseif ((cm = 2&& pm == 0)) {
    alert("You beat Computer with Rock against Scissor");
  } elseif ((cm = 2&& pm == 1)) {
    alert("Computer Beat you With Scissor");
  } else {
    alert("It's a tie");
  }

After that simply close down the ending bracket of the startGame() and the JavaScript part is done.

The complete JavaScript Snippet is as follows:

function startGame() {
  cm = Math.floor(Math.random() * 3);

  input = prompt("Enter your Choice!");

  pm = parseInt(input);

if (cm == 0&& pm == 1) {
    alert("You beat Computer with Paper against Rock");
  } elseif ((cm = 0&& pm == 2)) {
    alert("Computer Beat you with Rock");
  } elseif ((cm = 1&& pm == 0)) {
    alert("Computer Beat you With Paper");
  } elseif ((cm = 1&& pm == 2)) {
    alert("You beat computer with Scissor against Paper");
  } elseif ((cm = 2&& pm == 0)) {
    alert("You beat computer with Rock against Scissor");
  } elseif ((cm = 2&& pm == 1)) {
    alert("Computer Beat you With Scissor");
  } else {
    alert("It's a tie");
  }
}

Step 3: Playing the Game

Launch the HTML document and click on the start button and start playing the game like:

With that, the Rock, Paper, and Scissor is fully functioning, ENJOY!

Wrap-up

Rock, Paper, and Scissor is not only a childhood game for many but also a great programming exercise for new programmers. Such exercises are not only fun to implement, but they also sharpen the skill of a newbie programmer. In this article, a full working Rock, Paper, and Scissor game was implemented, and every step was explained one by one.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.