Build Responsive Rock Paper Scissors game with HTML CSS JS

The Rock Paper Scissors game is one of the most popular beginner-friendly projects for practicing JavaScript logic and DOM manipulation. It’s simple, interactive and fun to build while strengthening your understanding of event handling, condition checks, animations and dynamic updates in the browser.

In this project, we’ll create a responsive Rock Paper Scissors game where the player competes against the computer. The game will display gestures with animations, keep track of scores (won, lost, draw) and allow users to restart with a “Play Again” button.

HTML Structure

The HTML lays the foundation of the game by creating different sections:

<div class="game-container">
    <h2>Rock Paper Scissors</h2>
    <div class="game">
        <div class="selection-panel">
            <p>Select your Weapon</p>
            <div class="choices-container">
                <div id="rock" class="choice">
                    <img src="/public/assets/rock.png" alt="Rock">
                </div>
                <div id="paper" class="choice">

• A selection panel where the player can choose between Rock, Paper or Scissors.
• A result display that shows the player’s move versus the computer’s move.
• An action panel that shows the result message and a “Play Again” button.
• A scoreboard that tracks the number of Wins, Losses and Draws.

This structure ensures that the interface is clean and user-friendly while separating game elements clearly.

CSS Styling

The CSS adds visual appeal to the Rock Paper Scissors game. Some of the key styling elements include:

@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);
@import url(https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);

body {
  background: #000;
  display: flex;
  justify-content: center;
  background: #151f29;
  align-items: center;

• A dark-themed background with soft shadows to make the game interface stand out.
• Choice buttons styled as boxes containing Rock, Paper and Scissors icons.
• Hover effects that highlight selectable options, making it more interactive.
• Smooth animations and transitions for gestures when a move is selected.
• A responsive layout that adjusts for mobile screens while maintaining usability.

With these styles, the game feels modern, playful and engaging.

JavaScript Functionality

The JavaScript controls the interaction between player and computer:

const choices = document.querySelectorAll('.choice');
const playerGesture = document.querySelector('.p-gesture img')
const compGesture = document.querySelector('.c-gesture img');
const finalMove = document.querySelector(".final-move");
const selectionPanel = document.querySelector('.selection-panel');
const msg = document.querySelector(".msg");
const actionPanel = document.querySelector(".action-panel");
const body = document.body;
const wonElem = document.querySelector("#won");
const lostElem = document.querySelector("#lost");

• Event listeners detect when a user selects a move.
• A random generator decides the computer’s move.
• The checkResult function determines the outcome and updates scores accordingly.
• DOM manipulation dynamically changes images and text to reflect the current round.
• A reset function clears the board when the user clicks “Play Again”.

With this logic, the game runs smoothly and feels like a real competition.

Final Thoughts

This Rock Paper Scissors project is a perfect example of combining HTML for structure, CSS for styling and JavaScript for interactivity. It’s an excellent beginner-friendly project that strengthens your skills in event handling, animations and DOM manipulation.

You can further enhance the game by adding:

• A timer for each round
• Sound effects for moves and results
• A leaderboard system