Rock Paper Scissors Game

This tutorial will guide you through building a basic Rock Paper Scissors game using HTML and JavaScript.

Step 1: Setting up the HTML Structure

Create a new HTML file named index.html.
Inside the <body> tags, add three buttons for Rock, Paper, and Scissors. Assign a unique id to each button for easy reference in JavaScript.

<button id='rock'>Rock</button>
<button id='paper'>Paper</button>
<button id='scissors'>Scissors</button>

Create a <div> with the id 'result' to display the outcome of each round.

<div id='result'></div>

Step 2: Adding JavaScript Functionality

Create a new JavaScript file named script.js and link it to your HTML file using the <script> tag.

<script src='script.js'></script>

In your script.js file, grab references to the buttons and the result div using document.getElementById().

const rockButton = document.getElementById('rock');
const paperButton = document.getElementById('paper');
const scissorsButton = document.getElementById('scissors');
const resultDiv = document.getElementById('result');

Attach event listeners to each button to trigger a function when they are clicked. Inside each event listener, generate a random number between 1 and 3 to represent the computer's choice (1 for Rock, 2 for Paper, 3 for Scissors). Use conditional statements to determine the winner based on the player's choice and the computer's choice, then update the resultDiv with the outcome.

rockButton.addEventListener('click', () => {
  const computerChoice = Math.floor(Math.random() * 3) + 1;

  if (computerChoice === 1) {
    resultDiv.innerHTML = 'Tie!';
  } else if (computerChoice === 2) {
    resultDiv.innerHTML = 'Computer wins!';
  } else {
    resultDiv.innerHTML = 'You win!';
  }
});

paperButton.addEventListener('click', () => {
  const computerChoice = Math.floor(Math.random() * 3) + 1;

  if (computerChoice === 1) {
    resultDiv.innerHTML = 'You win!';
  } else if (computerChoice === 2) {
    resultDiv.innerHTML = 'Tie!';
  } else {
    resultDiv.innerHTML = 'Computer wins!';
  }
});

scissorsButton.addEventListener('click', () => {
  const computerChoice = Math.floor(Math.random() * 3) + 1;

  if (computerChoice === 1) {
    resultDiv.innerHTML = 'Computer wins!';
  } else if (computerChoice === 2) {
    resultDiv.innerHTML = 'You win!';
  } else {
    resultDiv.innerHTML = 'Tie!';
  }
});

Step 3: Play the Game!

Save your HTML and JavaScript files. Open index.html in your web browser, and you can now play Rock Paper Scissors against the computer!

This basic tutorial gives you a starting point. You can expand this game further by adding features like:

Scorekeeping: Track the player's score and the computer's score.
Multiple Rounds: Allow the player to play multiple rounds of the game.
Visual Feedback: Use images or animations to visually represent the choices made by the player and the computer.
User Interface Improvements: Improve the game's appearance with CSS styling.

How to Build a Rock Paper Scissors Game with HTML and JavaScript

How to Build a Rock Paper Scissors Game with HTML and JavaScript

Rock Paper Scissors Game

Step 1: Setting up the HTML Structure

Step 2: Adding JavaScript Functionality

Step 3: Play the Game!