Free Rock Paper Scissors Game Source Code in HTML, CSS & JavaScript

Get free Rock Paper Scissors game source code built with HTML, CSS and JavaScript. Learn how to create and customize a simple browser game.

Looking for a simple Rock Paper Scissors Game source code for your website? In this tutorial, you will get a complete Rock Paper Scissors game built with HTML, CSS and JavaScript.

This beginner-friendly project works directly in a web browser and does not require any external library. You can copy the code, save it as an HTML file, and start playing immediately.

WHAT IS ROCK PAPER SCISSORS?

Rock Paper Scissors is a simple game played between two players. Each player chooses one of three options:

🪨 Rock
📄 Paper
✂️ Scissors

The rules are simple:

  • Rock beats Scissors
  • Scissors beats Paper
  • Paper beats Rock
  • The same choice results in a draw

In this version, you play against the computer. JavaScript randomly selects the computer’s choice and automatically determines the result.

FEATURES OF THIS GAME

  • Simple Rock Paper Scissors gameplay
  • Player vs computer
  • Random computer choice
  • Score counter
  • Win, lose and draw results
  • Restart game button
  • Responsive design
  • Mobile-friendly layout
  • No external libraries
  • Easy to customize
  • Beginner-friendly source code

FREE ROCK PAPER SCISSORS GAME SOURCE CODE

Below is the complete source code. You can copy it and save it as index.html. Rock Paper Scissors Game

Rock Paper Scissors

Choose your move and play against the computer.

<button class="choice" onclick="playGame('Rock')">
  🪨 Rock
</button>
<button class="choice" onclick="playGame('Paper')">
  📄 Paper
</button>
<button class="choice" onclick="playGame('Scissors')">
  ✂️ Scissors
</button>
<p>
  Your Choice:
  <strong id="playerChoice">-</strong>
</p>
<p>
  Computer Choice:
  <strong id="computerChoice">-</strong>
</p>
<p id="winner">Make your choice!</p>
<div class="score">
  <span>
    You:
    <strong id="playerScore">0</strong>
  </span>
  <span>
    Computer:
    <strong id="computerScore">0</strong>
  </span>
</div>

Restart Game

HOW TO USE THE ROCK PAPER SCISSORS GAME

  1. Copy the complete code above.
  2. Open Notepad or VS Code.
  3. Create a new file.
  4. Paste the code.
  5. Save the file as index.html.
  6. Open the file in your browser.
  7. Select Rock, Paper or Scissors to play.

The game will work directly in the browser without installing any additional software or library.

HOW THE GAME WORKS

When the player selects an option, JavaScript stores the player’s choice.

The computer then randomly selects one option from the three available choices.

JavaScript compares both choices and checks the game rules. The result is then displayed on the screen and the appropriate score is updated.

For example, if the player selects Rock and the computer selects Scissors, the player wins the round.

HOW TO CUSTOMIZE THE GAME

Change Game Colors

You can change the CSS colors to match the design of your website. Modify the background, buttons and result area to create your own style.

Change the Game Title

You can replace the game title with your own title.

Change the Buttons

You can change the emojis and text used for Rock, Paper and Scissors to create your own design.

Add Sound Effects

You can add JavaScript audio effects for winning, losing and drawing to make the game more interactive.

MOBILE FRIENDLY DESIGN

The game includes responsive CSS, so the layout automatically adjusts for smaller screens.

Users can play the game on:

  • Mobile phones
  • Tablets
  • Laptops
  • Desktop computers

IDEAS FOR FUTURE IMPROVEMENTS

You can make this basic game more advanced by adding:

  • Countdown timer
  • Sound effects
  • Game animations
  • Difficulty levels
  • Winning score
  • Player names
  • Dark and light themes
  • High-score system
  • Local storage
  • More game modes

WHY THIS IS A GOOD JAVASCRIPT PROJECT

Rock Paper Scissors is a useful beginner project because it demonstrates several important JavaScript concepts, including:

  • Variables
  • Arrays
  • Functions
  • Random numbers
  • Conditional statements
  • DOM manipulation
  • Button click events

By modifying this project, beginners can learn how HTML, CSS and JavaScript work together to create an interactive browser game.

Summery

This Free Rock Paper Scissors Game Source Code is a simple project for anyone learning HTML, CSS and JavaScript game development.

You can use the source code for learning, practice and personal web projects. You can also customize the design and add new features to create your own version of the game.