Rock Paper Scissors Game ✊✋✌️

A simple and interactive Rock Paper Scissors game built with vanilla HTML, CSS, and JavaScript. Challenge the computer and see if you can win!

📝 About

This is a beginner-friendly web project that demonstrates fundamental web development concepts including DOM manipulation, event handling, and game logic. Play the classic Rock Paper Scissors game against a computer opponent right in your browser!

🎮 How to Play

1. Choose your move: Rock ✊, Paper ✋, or Scissors ✌️
2. The computer will randomly select its move
3. The winner is determined by the classic rules:
   • Rock beats Scissors
   • Scissors beats Paper
   • Paper beats Rock
4. Keep track of your score and try to beat the computer!

✨ Features

• 🎯 Simple Gameplay - Click to play, instant results
• 🤖 Computer Opponent - Random computer moves
• 📊 Score Tracking - Keep track of wins, losses, and ties
• 🎨 Clean UI - Simple and intuitive interface
• 📱 Responsive Design - Works on desktop and mobile devices
• ⚡ Fast & Lightweight - No frameworks, pure vanilla JavaScript

🚀 Getting Started

Prerequisites

All you need is a modern web browser! No installation required.

• Google Chrome (recommended)
• Firefox
• Safari
• Microsoft Edge
• Or any modern browser

Running the Game Locally

Option 1: Direct File Opening

1. Download or Clone the Repository

   git clone [https://github.com/yourusername/rock-paper-scissors.git](https://github.com/KarlAngeloFlores/RPS.github.io.git)

   or download the ZIP file and extract it.

2. Open the Game

   • Navigate to the project folder
   • Double-click on index.html
   • The game will open in your default browser Using VS Code Live Server:

3. Install the "Live Server" extension

4. Right-click on index.html

5. Select "Open with Live Server"

🛠️ Technologies Used

• HTML5 - Structure and content
• CSS3 - Styling and layout
• JavaScript (ES6) - Game logic and interactivity

💻 Code Overview

HTML (index.html)

Contains the game structure including:

• Title and instructions
• Button elements for player choices
• Display areas for results and scores

CSS (styles.css)

Handles all visual styling:

• Layout and positioning
• Button styles and hover effects
• Color schemes and typography
• Responsive design for different screen sizes

JavaScript (script.js)

Core game functionality:

• Event listeners for button clicks
• Random computer choice generation
• Score tracking and updates
• DOM manipulation to display results

🎯 Key Learning Concepts

This project demonstrates:

1. DOM Manipulation - Selecting and updating HTML elements
2. Event Handling - Responding to user clicks
3. Conditional Logic - If/else statements for game rules
4. Random Number Generation - Computer's random choices
5. Functions - Organizing code into reusable blocks
6. Variables - Storing game state and scores

🔧 Customization Ideas

Want to make this project your own? Try adding:

• 🎨 Different color schemes or themes
• 🏆 High score tracking (using localStorage)
• 🔊 Sound effects for wins/losses
• ⏱️ Timer for quick-play mode
• 🎭 Animated transitions and effects
• 📈 Statistics (win rate, total games played)
• 🌟 Different difficulty levels
• 🎮 Extended version (Rock Paper Scissors Lizard Spock)

🤝 Contributing

This is a beginner project, but contributions are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/awesome-feature)
3. Commit your changes (git commit -m 'Add awesome feature')
4. Push to the branch (git push origin feature/awesome-feature)
5. Open a Pull Request

📚 Resources for Learning

• MDN Web Docs - JavaScript
• W3Schools - HTML Tutorial
• CSS-Tricks
• JavaScript.info

📄 License

This project is free to use for learning purposes. Feel free to modify and distribute as needed.

👨‍💻 Author

Your Name

• GitHub: @KarlAngeloFlores

🙏 Acknowledgments

• Thanks to the web development community
• Inspired by classic Rock Paper Scissors game
• Built as a learning project for beginners

---

⭐ If you found this helpful, please give it a star!

🎮 Happy Gaming!