Rock Paper Scissors Game: Code Tutorial for Beginners

Simple Rock Paper Scissors Game: A Beginner's Guide

This tutorial guides you through creating a simple Rock Paper Scissors game using HTML, CSS, and JavaScript. It's a great project for beginners to practice their web development skills.

1. HTML Structure

Start by setting up the basic HTML structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Rock Paper Scissors</title>
  </head>
  <body>
    <h1>Rock Paper Scissors</h1>
    <div class='choices'>
      <button id='rock'>Rock</button>
      <button id='paper'>Paper</button>
      <button id='scissors'>Scissors</button>
    </div>
    <div id='result'></div>
    <script src='app.js'></script>
  </body>
</html>

This code creates:

A heading (h1) for the game title.
A div with the class 'choices' to hold the player's choice buttons.
Three buttons for 'rock', 'paper', and 'scissors'.
A div with the id 'result' to display the game outcome.
A script tag to link to your JavaScript file (app.js).

2. CSS Styling

Let's add some basic CSS to style the game interface:

body {
  text-align: center;
}

h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.choices {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

button {
  font-size: 1.5rem;
  margin: 0 1rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 5px;
  background-color: #eee;
  cursor: pointer;
}

button:hover {
  background-color: #ddd;
}

This CSS:

Centers the content horizontally.
Styles the heading with a larger font size.
Arranges the buttons horizontally using flexbox.
Applies basic styling to the buttons, making them visually appealing.

3. JavaScript Logic

Now comes the fun part - the JavaScript code that makes the game work:

const choices = ['rock', 'paper', 'scissors'];

function computerPlay() {
  return choices[Math.floor(Math.random() * choices.length)];
}

function playRound(playerSelection, computerSelection) {
  if (playerSelection === computerSelection) {
    return 'It's a tie!';
  } else if (
    (playerSelection === 'rock' && computerSelection === 'scissors') ||
    (playerSelection === 'paper' && computerSelection === 'rock') ||
    (playerSelection === 'scissors' && computerSelection === 'paper')
  ) {
    return 'You win!';
  } else {
    return 'You lose!';
  }
}

const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
  button.addEventListener('click', function () {
    const playerSelection = button.id;
    const computerSelection = computerPlay();
    const result = playRound(playerSelection, computerSelection);
    document.getElementById('result').textContent = result;
  });
});

Here's how this JavaScript works:

choices: An array containing the possible choices (rock, paper, scissors).
computerPlay(): A function that randomly selects a choice for the computer.
playRound(): A function that determines the winner based on player and computer choices.
Event Listener: An event listener on each button that calls playRound() when a button is clicked, then displays the result in the 'result' div.

Conclusion

Now you have a fully functional Rock Paper Scissors game! You can further enhance it by adding features like score keeping, multiple rounds, or a more visually appealing interface. This simple example provides a solid foundation for you to explore more advanced game development techniques.

Rock Paper Scissors Game: Code Tutorial for Beginners