Rock Paper Scissors vs Computer — Free JS Snippet

Rock Paper Scissors is one of the simplest possible games to reason about — three choices, a fixed set of rules, a random opponent — which makes it an excellent small project for practicing state management, timed animation sequencing, and readable game-logic code, all in vanilla JavaScript with no framework or library involved.

The classic three-way rule and how it's encoded

The entire ruleset boils down to a single lookup object: BEATS = { rock: 'scissors', paper: 'rock', scissors: 'paper' }. Given the player's choice and the computer's random choice, the outcome check is just three cases — equal means a tie, BEATS[playerChoice] === computerChoice means the player wins, and anything else means the computer wins. This is the cleanest possible way to encode the rule "rock crushes scissors, scissors cuts paper, paper covers rock" without a sprawling if/else chain or a full 3x3 outcome matrix, and it scales naturally if you ever wanted to extend the game to Rock-Paper-Scissors-Lizard-Spock by simply adding more keys to the BEATS map.

Building the "shoot" countdown animation

The classic real-world game is played with a "rock, paper, scissors, shoot" rhythm where both players' hands pump before revealing a choice. This snippet recreates that beat entirely with setInterval and setTimeout: when a choice button is clicked, play() immediately locks input (setButtonsDisabled(true)) so no double-clicks can happen mid-round, adds a .shaking class that applies a fast @keyframes shakeIcon rotation-and-scale wobble to both icon circles, and starts a 90-millisecond interval that randomly swaps each icon's emoji between rock, paper, and scissors — visually simulating an undecided, rapidly cycling hand. After 800 milliseconds, a matching setTimeout clears the interval, removes the shaking animation, locks in the computer's actual randomly generated choice, and calls resolveRound() to compute and display the real result. The 800ms duration is deliberately short enough to feel snappy but long enough to register as a genuine "countdown" beat rather than an instant jump-cut to the answer.

Displaying the correct rule explanation

Rather than a generic "You win" or "You lose" message, resolveRound() builds a message that explains the actual rule that applied — for example "Paper covers Rock — You win!" or "Scissors cuts Paper — Computer wins!". This uses a small VERBS lookup ({ rock: 'crushes', paper: 'covers', scissors: 'cuts' }) keyed by whichever choice won the round, so the sentence is always grammatically and logically correct regardless of which of the six possible win/lose combinations occurred. This is a small but important detail: it turns the result screen into a tiny teaching moment about the rules rather than just a verdict, which matters most for players who are still new to the game.

Score persistence and visual feedback

A simple in-memory score = { win: 0, lose: 0, tie: 0 } object accumulates across rounds for as long as the page stays open, rendered into three colour-coded counters (green for wins, red for losses, indigo for ties). Each icon circle also receives a win/lose/tie class after every round that draws a coloured ring around it (green, red, or indigo respectively) — applied to the *opposite* class on the computer's icon from the player's, since a player win is a computer loss and vice versa — giving instant, unambiguous visual confirmation of the outcome beyond just reading the text message. A "Reset score" link-style button zeroes the tally and restores both icons to a neutral question-mark placeholder, ready for a fresh session.