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:
- HTML Setup: The game is enclosed in a
div
tag with the idrock-paper-scissors
. Thisdiv
contains three buttons for the user to choose Rock, Paper, or Scissors, each button calling theplayGame
function with the respective choice when clicked. There is also a button to reset the game, which calls theresetGame
function. Additionally, there is ap
element with the idmessage
to display the result of each round, and anh2
element with the idscore
to display the current score. - Game State: In the
script
tag, two variables are declared,playerScore
andcomputerScore
, to keep track of the player’s and the computer’s scores. These are both initially set to 0. - 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. - 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 callingcomputerPlay
. 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. - 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:


While working as a researcher in distributed systems, Dr. Christian Mayer found his love for teaching computer science students.
To help students reach higher levels of Python success, he founded the programming education website Finxter.com that has taught exponential skills to millions of coders worldwide. He’s the author of the best-selling programming books Python One-Liners (NoStarch 2020), The Art of Clean Code (NoStarch 2022), and The Book of Dash (NoStarch 2022). Chris also coauthored the Coffee Break Python series of self-published books. He’s a computer science enthusiast, freelancer, and owner of one of the top 10 largest Python blogs worldwide.
His passions are writing, reading, and coding. But his greatest passion is to serve aspiring coders through Finxter and help them to boost their skills. You can join his free email academy here.