🪨📄✂️ Rock Paper Scissors Classic

The Timeless Battle of Strategy and Luck

🎮 User vs Computer • Real-Time Scores • Instant Results

---

🎯 Overview

Rock Paper Scissors Classic is an interactive browser-based game built using HTML, CSS, and JavaScript.

Players compete against a computer opponent by selecting Rock, Paper, or Scissors. The application instantly evaluates the outcome, updates the score, and displays the winner of each round.

This project demonstrates core JavaScript concepts including event handling, conditional logic, random number generation, and DOM manipulation.

---

🌐 Live Demo

🚀 Play Online

https://joshb-hub.github.io/RockPaperScissors/

Challenge the computer and see who reaches the highest score.

---

✨ Features

🎮 Interactive Gameplay

Play the classic Rock-Paper-Scissors game directly in your browser.

---

🤖 Computer Opponent

The computer randomly generates its choice every round.

---

📊 Live Score Tracking

Monitor:

• Player Score
• Computer Score
• Match Results

---

⚡ Instant Feedback

Receive immediate updates after every move:

• Win
• Lose
• Draw

---

📱 Responsive Design

Optimized for:

• Desktop
• Tablet
• Mobile Devices

---

🎨 Clean User Interface

Simple and distraction-free design focused on gameplay.

---

📸 Game Preview

🤖 Computer Victory

---

🏆 Player Victory

---

🤝 Draw Match

---

🎯 Live Gameplay

---

⚔️ Game Rules

🪨 Rock

Wins Against:

Scissors

Loses Against:

Paper

---

📄 Paper

Wins Against:

Rock

Loses Against:

Scissors

---

✂️ Scissors

Wins Against:

Paper

Loses Against:

Rock

---

🤝 Draw Condition

Rock vs Rock
Paper vs Paper
Scissors vs Scissors

Results in a draw.

---

⚙️ How It Works

Player Selects Move
          ↓
Computer Generates Random Move
          ↓
Choices Compared
          ↓
Winner Determined
          ↓
Score Updated
          ↓
Result Displayed

---

🏗️ Application Architecture

User Click Event
        ↓
JavaScript Event Listener
        ↓
Random Computer Choice
        ↓
Game Logic Evaluation
        ↓
Score Calculation
        ↓
UI Update

---

🛠️ Technology Stack

Technology	Purpose
HTML5	Structure
CSS3	Styling
JavaScript	Game Logic
DOM Manipulation	Dynamic Updates

---

📂 Project Structure

RockPaperScissors/
│
├── index.html
├── style.css
├── script.js
│
├── Screenshot 2025-04-01 040410.png
├── Screenshot 2025-04-01 040512.png
├── Screenshot 2025-04-01 040440.png
└── Screenshot 2025-04-01 040451.png

---

🚀 Getting Started

Clone Repository

git clone https://github.com/your-username/rock-paper-scissors.git

---

Navigate to Project

cd rock-paper-scissors

---

Run Application

Simply open:

index.html

inside any modern browser.

No installation required.

No external libraries required.

---

🎓 Learning Outcomes

This project demonstrates:

✅ JavaScript Fundamentals

✅ Event Handling

✅ DOM Manipulation

✅ Conditional Logic

✅ Random Number Generation

✅ Dynamic UI Updates

✅ Frontend Development Basics

---

🌟 Key Highlights

Technical Skills

• Game Logic Implementation
• Interactive User Interfaces
• Score Management System
• Real-Time Feedback

User Experience

• Fast Gameplay
• Simple Navigation
• Responsive Layout

Performance

• Lightweight
• Fast Loading
• Cross-Browser Compatible

---

🔮 Future Enhancements

• Best of 3 / Best of 5 Mode
• Multiplayer Support
• Dark Mode
• Sound Effects
• Animations
• Match History
• Local Storage Score Persistence
• Leaderboard System

---

📜 License

This project is available under the MIT License.

---

💡 Why This Project?

This project was developed to strengthen frontend development skills while implementing a fun and interactive game.

It focuses on building confidence with:

• JavaScript Logic
• User Interaction
• Event-Driven Programming
• Dynamic Web Applications

---

⭐ Rock • Paper • Scissors • Repeat

Built with ❤️ using HTML, CSS & JavaScript