Building a Rock Paper Scissors Game from Scratch | HTML, CSS, & JavaScript Tutorial

Published on May 15, 2024

Hello everyone! In today’s tutorial, we are going to create a simple Rock Paper Scissors game using HTML, CSS, and JavaScript. Let’s dive right into the code

We’ll start with the HTML. In the <head> section, we first set the character encoding to UTF-8 with <meta charset=”UTF-8″ />. This ensures our page handles different characters properly.

Next, we define the viewport with <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />. This helps make our page responsive across different devices.

Now, let’s take a look at the <title>Rock Paper Scissors</title>. This sets the title of our webpage, which will be displayed in the browser tab.

We’re also linking a CSS file for styling and a FontAwesome icon pack for the rock, paper, and scissors icons. This is done using the <link> tags in the <head> section.

Now, let’s move on to the body section. We begin with a container div that holds our game.

First, we have a header <h1>Rock Paper Scissors</h1>, which introduces the game to the player.

Below the header, we have a <div class=”score”> that keeps track of the scores for the player, computer, and tie. We use spans to display the scores and initially set them to 0.

The next part is the most important: the icons for rock, paper, and scissors. These are created using <i> elements with FontAwesome classes. The data-choice attributes specify the choice each icon represents.

Below the icons, we have a <div class=”result”> that will display the outcome of each round.

To bring the game to life, we’re linking jQuery and a script file at the bottom of the body section.

CSS

Let’s move on to the CSS part to design our Rock Paper Scissors game.

We’ll start with the body styles. We set the font family to Arial and add a backup option of sans-serif in case Arial is not available. We centre-align the text and set a soft, light grey background colour for the entire page.

Next, we style our main container, which holds the game elements. We set its width to 400 pixels and add padding around the content. The background colour is set to a warm, yellow shade for a vibrant look. We centre the container on the page using margins, and add rounded corners and a subtle shadow for a more polished appearance.

For the game title (h1), we increase the font size to 1.6 rems, use a darker colour, and make the text uppercase for a bolder, more prominent look.

In the score section, we use Flexbox to align the player, tie, and computer scores evenly. The scores have a red font colour and a bold weight for emphasis.

The specific score classes (player-score, tie-score, and computer-score) are styled differently, with a light colour to make them stand out.

For the icons section, we use Flexbox again to evenly space out the rock, paper, and scissors icons. We set a large font size of 50 pixels, add padding for better touch targets, and use a light background with dark text for contrast. We also make the icons interactive by setting the cursor to a pointer.

In the result section, we centre the text and set the size and weight for clear visibility. The background colour is a light shade, and the text colour is dark for readability.

We have three different result styles for different outcomes (result1, result2, and result3). Each uses padding, different background colours, and absolute positioning to display results at the top of the game container.

JAVASCRIPT

Let’s move on to the JavaScript part to give functionality to our Rock Paper Scissors game.

We’ll begin with a document ready function, which ensures the code runs after the DOM is fully loaded.

We initialise three variables: playerScore, computerScore, and tieScore, all set to 0 at the start.

Next, we add a click event listener to the icons ($(“.icons i”)). When an icon is clicked, the function is triggered.

First, we get the user’s choice from the data-choice attribute of the clicked icon and store it in userChoice.

We create an array of choices: [“rock”, “paper”, “scissors”], representing the possible options in the game.

Then, we randomly select a ch oice for the computer using Math.floor(Math.random() * choices.length), which chooses a random index from the choices array. The chosen value is stored in computerChoice.

Now, we display the choices made by the user and computer using the .html() function on the .result div.

Next, we check the outcome of the game using conditional statements:

If the user’s choice and the computer’s choice are the same, it’s a tie. We display “It’s a tie!” in the .result div and increase the tieScore by one.
If the user’s choice beats the computer’s choice according to the rules of the game, the user wins. We display “You win!” in the .result div and increase the playerScore by one.
Otherwise, the computer wins. We display “Computer wins!” in the .result div and increase the computerScore by one.

Finally, we update the scores on the webpage by setting the text content of .player-score, .computer-score, and .tie-score spans to the updated values of playerScore, computerScore, and tieScore.

That’s it for the JavaScript code! It adds interactivity and functionality to our game.

I hope you found this explanation helpful. Thanks for watching, and I’ll see you in the next video!

Our Latest Blog

Become a Selenium Automation Expert Ace the LSET Tester Exam & Unlock New Opportunities

March 16, 2025ByFlorence

Our Latest Blog

Become a Selenium Automation Expert: Ace the LSET Tester Exam & Unlock New Opportunities!

Boost Your Career with the LSET Selenium Tester Exam

Key Takeaways from the International AI and Machine Learning Workshop with Dr. Eric Hossein Fontes

Popular Courses

Follow Us