# Rock, Paper, Scissors

by [kirupa](https://www.kirupa.com/about/whatiskirupa.htm) | filed under [Coding Exercises](https://www.kirupa.com/codingexercises/index.htm)

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](https://www.kirupa.com/codingexercises/examples/rock_paper_scissors.htm)):

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:

```html
<!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!

#### Hint: Some Learning Resources

The following tutorials may provide some helpful tips and techniques to help you with this exercise: [Events in JavaScript](https://www.kirupa.com/html5/javascript_events.htm), [Handling Events for Many Elements](https://www.kirupa.com/html5/handling_events_for_many_elements.htm), [Custom Data (data-*) Attributes](https://www.kirupa.com/html5/custom_data_attributes.htm), [Random Numbers in JavaScript](https://www.kirupa.com/html5/random_numbers_js.htm), [Picking a Random Item from an Array](https://www.kirupa.com/html5/picking_random_item_from_array.htm), [If/Else Statements](https://www.kirupa.com/html5/conditional_statements_if_else_switch_javascript.htm)

## Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to [your collection](https://forum.kirupa.com/badges/):

![Rock, Paper, Scissors badge](https://www.kirupa.com/codingexercises/images/rock_paper_scissors_badge.png)

To claim it, head over to the forums and respond in the [Rock, Paper, Scissors topic](https://forum.kirupa.com/t/rock-paper-scissors-frontend-coding-exercise/683593). **Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:**

![](https://www.kirupa.com/codingexercises/images/create_forum_topic.webp)

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](https://forum.kirupa.com). 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!