Rock Paper Scissors Game Javascript Codepen

Rock Paper Scissors Game Javascript Codepen

5 min read Jun 20, 2024
Rock Paper Scissors Game Javascript Codepen

Rock Paper Scissors Game with JavaScript (Codepen)

This article will guide you through building a simple Rock Paper Scissors game using JavaScript and HTML, complete with a Codepen example for you to play with and learn from.

The HTML Structure

First, we need to set up the basic HTML for our game. This includes elements for:

  • Displaying the player's choice: We'll use a <div> with an id playerChoice.
  • Displaying the computer's choice: Another <div> with an id computerChoice.
  • Displaying the result: A <div> with an id result.
  • Buttons for the player's choices: We'll use three buttons, one for "rock", one for "paper", and one for "scissors".



  Rock Paper Scissors
  


  

Rock Paper Scissors

The CSS Styling (Optional)

You can add some basic CSS to style the game elements. For this example, we'll add a simple style to make the buttons look nicer.

.choices button {
  padding: 10px 20px;
  margin: 5px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

The JavaScript Logic

Now, let's write the JavaScript code (in script.js) that handles the game logic:

  1. Get References: Get references to the necessary HTML elements.
  2. Generate Computer Choice: Create a function getComputerChoice that randomly selects "Rock", "Paper", or "Scissors".
  3. Handle Player Choice: Add event listeners to the buttons. When a button is clicked, store the player's choice and call a function to determine the winner.
  4. Determine Winner: Create a function determineWinner that compares the player's choice and the computer's choice, using the standard Rock Paper Scissors rules.
  5. Display Results: Update the playerChoice, computerChoice, and result divs to show the choices and the winner.
const rockButton = document.getElementById('rock');
const paperButton = document.getElementById('paper');
const scissorsButton = document.getElementById('scissors');
const playerChoiceDisplay = document.getElementById('playerChoice');
const computerChoiceDisplay = document.getElementById('computerChoice');
const resultDisplay = document.getElementById('result');

// Function to get the computer's choice
function getComputerChoice() {
  const choices = ["Rock", "Paper", "Scissors"];
  const randomIndex = Math.floor(Math.random() * 3);
  return choices[randomIndex];
}

// Function to determine the winner
function determineWinner(playerChoice, computerChoice) {
  if (playerChoice === computerChoice) {
    return "It's a tie!";
  } else if (
    (playerChoice === "Rock" && computerChoice === "Scissors") ||
    (playerChoice === "Paper" && computerChoice === "Rock") ||
    (playerChoice === "Scissors" && computerChoice === "Paper")
  ) {
    return "You win!";
  } else {
    return "Computer wins!";
  }
}

// Event listeners for player choices
rockButton.addEventListener('click', () => {
  playRound("Rock");
});

paperButton.addEventListener('click', () => {
  playRound("Paper");
});

scissorsButton.addEventListener('click', () => {
  playRound("Scissors");
});

function playRound(playerChoice) {
  const computerChoice = getComputerChoice();
  playerChoiceDisplay.textContent = `You chose: ${playerChoice}`;
  computerChoiceDisplay.textContent = `Computer chose: ${computerChoice}`;
  resultDisplay.textContent = determineWinner(playerChoice, computerChoice);
}

Codepen Example

You can find a working example of this Rock Paper Scissors game on Codepen:

Feel free to play around with the code and customize it to your liking. You can add features like score keeping, multiple rounds, or even different game logic.

This example provides a solid starting point for building your own Rock Paper Scissors game using JavaScript.