Play Rock Paper Scissors in Your Browser

by
5/5 - (6 votes)

I just created this fun little browser game that you can play right here in your browser. It’s based on HTML and JavaScript so you should be able to play it offline too. 👇✂️📃🪨👇

👩‍💻 Player: 0, 🤖 Computer: 0

In case you’re interested in the JavaScript and HTML code, here it is:

<div id="rock-paper-scissors">

    <button onclick="playGame('🪨 Rock')">🪨 Rock</button>
    <button onclick="playGame('📃 Paper')">📃 Paper</button>
    <button onclick="playGame('✂️ Scissors')">✂️ Scissors</button>
    
    <button onclick="resetGame()">Reset Game</button>

    <p id="message"></p>
    <h2 id="score">👩‍💻 Player: 0, 🤖 Computer: 0</h2>

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

        function computerPlay() {
            const choices = ['🪨 Rock', '📃 Paper', '✂️ Scissors'];
            const randomIndex = Math.floor(Math.random() * choices.length);
            return choices[randomIndex];
        }

        function playGame(playerSelection) {
            const computerSelection = computerPlay();
            let message = '';

            if (playerSelection === computerSelection) {
                message = `You chose ${playerSelection}. I chose ${computerSelection}.\n\nTie!`;
            } else if (
                (playerSelection === '🪨 Rock' && computerSelection === '✂️ Scissors') ||
                (playerSelection === '📃 Paper' && computerSelection === '🪨 Rock') ||
                (playerSelection === '✂️ Scissors' && computerSelection === '📃 Paper')
            ) {
                playerScore += 1;
                message = `You chose ${playerSelection}. I chose ${computerSelection}.\nYou win!\n${playerSelection} beats ${computerSelection}.`;
            } else {
                computerScore += 1;
                message = `You chose ${playerSelection}. I chose ${computerSelection}.\nYou lose!\n${computerSelection} beats ${playerSelection}.`;
            }

            document.getElementById('message').textContent = message;
            document.getElementById('score').textContent = `👩‍💻 Player: ${playerScore}, 🤖 Computer: ${computerScore}`;
        }

        function resetGame() {
            playerScore = 0;
            computerScore = 0;
            document.getElementById('message').textContent = '';
            document.getElementById('score').textContent = `👩‍💻 Player: ${playerScore}, 🤖 Computer: ${computerScore}`;
        }
    </script>
</div>

This code is a simple Rock, Paper, Scissors game. Here is a breakdown of how it works:

  1. HTML Setup: The game is enclosed in a div tag with the id rock-paper-scissors. This div contains three buttons for the user to choose Rock, Paper, or Scissors, each button calling the playGame function with the respective choice when clicked. There is also a button to reset the game, which calls the resetGame function. Additionally, there is a p element with the id message to display the result of each round, and an h2 element with the id score to display the current score.
  2. Game State: In the script tag, two variables are declared, playerScore and computerScore, to keep track of the player’s and the computer’s scores. These are both initially set to 0.
  3. computerPlay Function: The computerPlay function chooses the computer’s move. It does this by creating an array of choices and picking a random index, effectively making a random choice between Rock, Paper, and Scissors.
  4. playGame Function: The playGame function is the main game logic. It takes the player’s choice as an argument (which is passed when the player clicks one of the buttons). The function gets the computer’s choice by calling computerPlay. It then compares the player’s choice with the computer’s choice to determine the winner according to the rules of Rock, Paper, Scissors. If the player wins, their score is incremented; if the computer wins, the computer’s score is incremented. The message of who won and the current score are then displayed in the HTML.
  5. resetGame Function: The resetGame function sets both scores back to 0 and clears the message, effectively restarting the game.

In addition, the game uses emojis to make it more visually appealing, and the message string that is built in the playGame function includes the choices made in each round to make the game easier to follow.

Here’s an example run I did: