Rock Paper Scissors Game | HTML, CSS & JavaScript

Rock-Paper-Scissors Game with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #09

Project Overview

The Rock Paper Scissors Game is a simple beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to play the classic Rock Paper Scissors game against the computer. The user and the computer make a choice from the three possible options, and the winner is determined by comparing the choices using condition statements.

Additionally, this project is designed to help beginners practice important JavaScript concepts while creating an interactive game. By building this project, you can learn the basic concepts of JavaScript by adding interactivity to the projects. In addition, you can also see how JavaScript can control the logic and flow of a browser-based game.

Key Features

Rock, Paper, and Scissors Choices: Users can choose between Rock, Paper, or Scissors to make their move. Each choice represents one of the three possible moves in the game.
Computer Choice: After the player selects an option, the computer randomly chooses either Rock, Paper, or Scissors. JavaScript picks the option randomly to ensure every round is unique.
Winner Calculation: The application calculates the winner based on who picked Rock, Paper, or Scissors and cross-references it with the user’s option to determine the winner. It then displays the winner for each round.
Game Result: The game displays the results of each round. The results show the options picked by the computer and the user, as well as the winner. This makes it easy to see what leads to a win, loss, or draw.
Score Keeping: The game’s scorekeeping feature keeps track of the user’s wins, losses, and draws. It also displays the number of victories and defeats as the user plays the game.
Play Again: Users can continue playing additional rounds without refreshing the webpage. Each new selection starts another round against the computer.
Interactive Buttons: Rock Paper Scissors Game has interactive buttons for selecting options. Users simply need to click the buttons to select an option, and the application responds by displaying the result.
Simple and Clean UI: The game uses a simple interface with clearly visible choices, results, and score information. This keeps the gameplay easy to understand for beginners.
Responsive Design: Rock Paper Scissors Game can be played on different devices. The game is not limited to desktops but can also be played on mobile devices.
JavaScript Game Logic: The game uses JavaScript to generate random computer choices, calculate scores, and display the results. This shows how knowledge of JavaScript can be used to develop games that run directly in a browser.

What You’ll Learn

Understand how to handle button click events using JavaScript.
Learn how to generate random values using Math.random().
Practice storing and comparing user and computer choices.
Understand how conditional statements can determine a game result.
Learn how to update HTML elements dynamically using JavaScript.
Practice keeping track of scores using JavaScript variables.
Understand how to create different outcomes based on user input.
Learn how HTML, CSS, and JavaScript work together to create an interactive game.
Practice creating a clean and responsive game interface using CSS.

HTML Code

The HTML code creates the structure for the Rock Paper Scissors Game. First, the HTML file links the style.css file inside the <head> section so CSS can control the appearance of the game. The game container holds the main content, including the heading, choice buttons, result area, and score information.

The Rock button, Paper button and Scissors button give the three options that users can choose in each round of the Rock Paper Scissors Game. Separate elements display the user’s choice the computer’s choice and the result of the round, in the Rock Paper Scissors Game. The score section provides space to show the Rock Paper Scissors Game score. Finally the script.js file is linked at the bottom of the <body> so JavaScript can handle the Rock Paper Scissors Game logic and user interactions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rock-Paper-Scissors</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Rock-Paper-Scissors</h1>
    <p>Choose your move:</p>
    <div class="choices">
      <button class="choice" data-choice="rock">🪨 Rock</button>
      <button class="choice" data-choice="paper">📄 Paper</button>
      <button class="choice" data-choice="scissors">✂️ Scissors</button>
    </div>
    <div id="result"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

The CSS code controls the appearance and layout of the Rock Paper Scissors Game. The main game container is styled to create a neat interface with a proper layout, spacing, shadow, and rounded corners. Flexbox can be used to arrange the game elements and keep the content centered on the page.

The choice buttons are styled with appropriate sizes, spacing, colors, and hover effects so users can easily identify and select their moves. The result and score areas also have distinct styles that make it easy to read player statistics. Finally, the responsive table styles allow the game to look good on mobile devices.

body {
  font-family: Arial, sans-serif;
  background: #002252;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
  background: #fff;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  width: 400px;
}

h1 {
  color: #002252;
  margin-bottom: 20px;
}

.choices {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.choice {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #ccc;
  background: #eea731;
  color: #fff;
  flex: 1;
  margin: 0 5px;
  transition: transform 0.2s;
}

.choice:hover {
  transform: scale(1.1);
}

#result {
  font-weight: bold;
  font-size: 18px;
  color: #002252;
}

@media(max-width: 400px) {
  .choices {
    flex-direction: column;
  }
  .choice {
    margin: 5px 0;
  }
}

Javascript Code

The JavaScript code adds the main functionality to the Rock Paper Scissors Game. First, it selects all buttons with the .choice class and adds a click event to each button. When a user makes a choice, the code gets the selected value using data-choice, generates a random choice for the computer, and sends both choices to the determineWinner() function.

Next, the getComputerChoice() function randomly selects Rock, Paper, or Scissors. After that, the determineWinner() function compares both choices and returns the result as a win, loss, or tie. Finally, the result appears on the page using textContent.

const choices = document.querySelectorAll('.choice');
const result = document.getElementById('result');

choices.forEach(button => {
  button.addEventListener('click', () => {
    const userChoice = button.getAttribute('data-choice');
    const computerChoice = getComputerChoice();
    const winner = determineWinner(userChoice, computerChoice);

    result.textContent = `You chose ${userChoice}, computer chose ${computerChoice}. ${winner}`;
  });
});

function getComputerChoice() {
  const choices = ['rock', 'paper', 'scissors'];
  const randomIndex = Math.floor(Math.random() * 3);
  return choices[randomIndex];
}

function determineWinner(user, computer) {
  if(user === computer) return "It's a tie!";
  if(
    (user === 'rock' && computer === 'scissors') ||
    (user === 'paper' && computer === 'rock') ||
    (user === 'scissors' && computer === 'paper')
  ) return "You win!";
  return "Computer wins!";
}