Rock Paper Scissors Game | HTML, CSS & JavaScript

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

10 DAYS 10 PROJECT CHALLENGE

Day #09

Project Overview

This project is a Rock-Paper-Scissors Game built using HTML, CSS, and JavaScript. It allows the user to play Rock-Paper-Scissors against the computer. The game randomly selects the computer’s choice and determines the winner. It’s a beginner-friendly project to learn conditionals, random logic, and DOM manipulation.

Key Features

User vs Computer – Play against a randomly choosing computer.
Score Tracking – Shows the winner of each round.
Interactive Buttons – Choose rock, paper, or scissors with buttons.
Responsive Design – Works on desktop, tablet, and mobile.

HTML Code

<!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

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

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!";
}