Project - 10

Project 10: Rock Paper Scissors

Build the classic Rock Paper Scissors game against the computer and keep track of the score.

Your challenge: Let the player choose Rock, Paper, or Scissors, generate a random computer choice, decide the winner, and update the score.

✦ HTML + CSS + JS Editor

▶ Live Output

Choose for the computer

Use Math.floor(Math.random() * choices.length) to choose a random item from the choices array.

Decide the winner

If both choices are the same, the round is a draw.

The player wins when Rock beats Scissors, Paper beats Rock, or Scissors beats Paper. Otherwise, the computer wins.

Update the score

Increase either playerScore or computerScore, then update the matching <span> on the page.

Try it: Play several rounds and make sure wins, losses, and draws are detected correctly.

Good JavaScript habit: Store the possible choices in an array instead of repeating them throughout the code.

👀 Show Full Working Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rock Paper Scissors</title>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      text-align: center;
      padding: 40px;
      margin: 0;
    }

    .choices button {
      font-size: 1.2rem;
      margin: 6px;
      padding: 14px 18px;
      cursor: pointer;
    }

    button:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }

    #result {
      margin-top: 25px;
      font-size: 1.2rem;
      line-height: 1.8;
      color: #fff;
      min-height: 90px;
    }

    .score {
      margin-top: 20px;
    }
  </style>
</head>

<body>

  <h2>Rock Paper Scissors</h2>

  <div class="choices">
    <button type="button" data-choice="rock">🪨 Rock</button>
    <button type="button" data-choice="paper">📄 Paper</button>
    <button type="button" data-choice="scissors">✂️ Scissors</button>
  </div>

  <div id="result" aria-live="polite">
    Choose Rock, Paper, or Scissors.
  </div>

  <div class="score">
    <p>You: <span id="playerScore">0</span></p>
    <p>Computer: <span id="computerScore">0</span></p>
  </div>

  <script>
    let playerScore = 0;
    let computerScore = 0;

    const choices = [
      "rock",
      "paper",
      "scissors"
    ];

    const choiceButtons =
      document.querySelectorAll("[data-choice]");

    const resultDisplay =
      document.getElementById("result");

    const playerScoreDisplay =
      document.getElementById("playerScore");

    const computerScoreDisplay =
      document.getElementById("computerScore");

    function play(playerChoice) {
      const randomIndex =
        Math.floor(
          Math.random() * choices.length
        );

      const computerChoice =
        choices[randomIndex];

      let result;

      if (playerChoice === computerChoice) {
        result = "Draw!";
      } else if (
        (
          playerChoice === "rock" &&
          computerChoice === "scissors"
        ) ||
        (
          playerChoice === "paper" &&
          computerChoice === "rock"
        ) ||
        (
          playerChoice === "scissors" &&
          computerChoice === "paper"
        )
      ) {
        result = "You win!";
        playerScore++;
      } else {
        result = "Computer wins!";
        computerScore++;
      }

      resultDisplay.textContent =
        "You chose " +
        playerChoice +
        ". Computer chose " +
        computerChoice +
        ". " +
        result;

      playerScoreDisplay.textContent =
        playerScore;

      computerScoreDisplay.textContent =
        computerScore;
    }

    choiceButtons.forEach(function(button) {
      button.addEventListener("click", function() {
        play(button.dataset.choice);
      });
    });
  </script>

</body>
</html>