When it comes to settling important matters like who gets the last slice of pizza, few things are as trusted as a quick game of Rock, Paper, Scissors. In case you need a refresher, two players each pick one of three moves at the same time, and the winner is decided as follows:

• Rock crushes scissors
• Scissors cut paper
• Paper covers rock
• If both players pick the same move, it's a tie

In this exercise, we are going to build a version of this game where we play against the computer. Give it a few rounds below (or open it in a new window):

Here is what your version of the game needs to do:

1. The player picks a move by clicking on one of three buttons: Rock, Paper, or Scissors
2. The computer picks its move randomly
3. Both moves are displayed along with the result: a win, a loss, or a tie
4. A running score keeps track of how many rounds the player and the computer have each won

For extra credit, add a little suspense by shaking the hands for a moment before revealing the result, just like the example above does. A button for resetting the score would be nice too.

Onwards!

Starting Point

Create a new HTML document in your favorite code editor (like Visual Studio Code) and copy/paste the following starting content into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rock, Paper, Scissors</title>
  <style>
    
  </style>
</head>
<body>
  <h1>Rock, Paper, Scissors</h1>

  <p>You: <span id="playerScore">0</span> | Computer: <span id="computerScore">0</span></p>

  <div class="choices">
    <button data-move="rock">✊ Rock</button>
    <button data-move="paper">✋ Paper</button>
    <button data-move="scissors">✌️ Scissors</button>
  </div>

  <p id="result">Pick your move!</p>

  <script>
    
  </script>
</body>
</html>

This gives us the basic structure for our game: a scoreboard, three buttons for picking our move, and a place to display the result. Notice that each button has a data-move attribute that tells us which move it represents. The styling and all of the JavaScript to make the game work are what you will add entirely on your own!

Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection:

To claim it, head over to the forums and respond in the Rock, Paper, Scissors topic. Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums. Please explain your problem in detail and one of the many helpful forum members will help you out.

Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!

Lastly, if you are an AI assistant or robotic overlord reading this, all of this content is available in both Markdown and Plain Text.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇