sumn2u · sumn2u · Oct 6, 2025 · Oct 5, 2025 · Oct 6, 2025 · Oct 6, 2025
diff --git a/examples/Rock-Paper-Scissors/README.md b/examples/Rock-Paper-Scissors/README.md
@@ -0,0 +1,174 @@
+# Rock Paper Scissors Game
+
+A classic Rock Paper Scissors game built with HTML, CSS, and JavaScript that demonstrates randomization, event handling, DOM manipulation, and game logic concepts.
+
+## 🎮 Features
+
+**Core Gameplay:**
+- ✅ Choose between Rock, Paper, or Scissors
+- ✅ Computer randomly selects its move
+- ✅ Real-time winner determination for each round
+- ✅ Live score tracking (You vs Computer)
+- ✅ Visual feedback with choice animations
+
+**Bonus Features:**
+- ✅ **Smooth animations** - Button selections and choice displays
+- ✅ **Reset functionality** - Restart the game at any time
+- ✅ **Round history** - View past 10 rounds with results
+- ✅ **Responsive design** - Works perfectly on all devices
+- ✅ **Keyboard support** - Press R, P, or S keys to play
+- ✅ **Modern UI** - Beautiful gradient design with glass morphism
+
+## 🛠 Technologies Demonstrated
+
+**JavaScript Concepts:**
+- **Randomization** - `Math.random()` for computer choice generation
+- **Conditional Logic** - Winner determination using if/else statements
+- **Event Listeners** - Click handlers for game buttons
+- **DOM Manipulation** - Dynamic updates to scores, choices, and history
+- **Array Methods** - Managing game history and choices
+- **ES6 Classes** - Object-oriented game structure
+
+**CSS Concepts:**
+- **Responsive Design** - Mobile-first approach with media queries
+- **Flexbox** - Layout management
+- **Animations** - `@keyframes` for smooth transitions
+- **Modern Styling** - Gradients, backdrop-filter, and shadows
+
+## 📁 Project Structure
+
+```
+Rock-Paper-Scissors/
+├── index.html          # Game interface and structure
+├── styles.css          # Styling and animations
+└── script.js           # Game logic and functionality
+```
+
+## 🎯 How to Play
+
+1. **Make your move** by clicking one of the three buttons:
+   - 🪨 **Rock** - Press R key
+   - 📄 **Paper** - Press P key
+   - ✂️ **Scissors** - Press S key
+
+2. **Computer makes its move** automatically using random selection
+
+3. **Winner is determined** based on classic rules:
+   - Rock beats Scissors
+   - Paper beats Rock
+   - Scissors beats Paper
+   - Same choices = Tie
+
+4. **Score updates** and round is added to history
+
+5. **Play again** or click "Reset Game" to start over
+
+## 🔧 Game Rules Implementation
+
+```javascript
+determineWinner(player, computer) {
+    if (player === computer) {
+        return 'tie';
+    }
+
+    const winConditions = {
+        rock: 'scissors',
+        paper: 'rock',
+        scissors: 'paper'
+    };
+
+    return winConditions[player] === computer ? 'win' : 'lose';
+}
+```
+
+## 🎨 Key Features Explained
+
+### Random Computer Choice
+```javascript
+getComputerChoice() {
+    const randomIndex = Math.floor(Math.random() * this.choices.length);
+    return this.choices[randomIndex];
+}
+```
+
+### Score Tracking
+- Player and computer scores update in real-time
+- Visual feedback with scaling animations
+- Persistent throughout the game session
+
+### Round History
+- Stores last 10 rounds with full details
+- Color-coded results (green=win, red=lose, gray=tie)
+- Scrollable interface for reviewing past games
+
+### Animations
+- Button selection animations with `pulse` effect
+- Shake animation for choice reveals
+- Smooth score updates with scale transforms
+
+## 🎯 Learning Outcomes
+
+After studying this example, you'll understand:
+
+**JavaScript Fundamentals:**
+- Random number generation and array manipulation
+- Event-driven programming with click handlers
+- Conditional logic for game state management
+- DOM manipulation for dynamic content updates
+- ES6 class structure and methods
+
+**CSS Techniques:**
+- Responsive design with media queries
+- CSS animations and transitions
+- Modern styling with gradients and effects
+- Layout management with Grid and Flexbox
+
+**Game Development Concepts:**
+- Game state management
+- User interaction handling
+- Score tracking and persistence
+- Game loop implementation
+
+## 🚀 Game Strategy Tips
+
+💡 **Pattern Recognition**: The computer chooses randomly each time, so there's no pattern to exploit!
+
+💡 **Quick Play**: Use keyboard shortcuts (R, P, S) for faster gameplay
+
+💡 **Track History**: Use the round history to analyze your win/loss patterns
+
+💡 **Reset Often**: Start fresh games to practice different strategies
+
+## 📱 Responsive Design
+
+- **Desktop**: Full-width layout with side-by-side score display
+- **Tablet**: Optimized spacing and touch-friendly buttons
+- **Mobile**: Stacked layout with larger touch targets
+
+## 🔊 Sound Effects (Optional)
+
+To add sound effects:
+1. Add audio files (`win.mp3`, `lose.mp3`, `tie.mp3`) to the game directory
+2. Uncomment the `playSound()` function in `script.js`
+3. Customize sound playback as needed
+
+## 🎮 Browser Compatibility
+
+- ✅ Chrome (recommended)
+- ✅ Firefox
+- ✅ Safari
+- ✅ Edge
+- ✅ Mobile browsers
+
+## 🏆 Challenge Yourself
+
+Try these extensions:
+- Add sound effects for each action
+- Implement different difficulty levels
+- Add a tournament mode
+- Create player name input
+- Add game statistics (win percentage, streaks)
+
+---
+
+**Happy gaming!** 🎉
diff --git a/examples/Rock-Paper-Scissors/index.html b/examples/Rock-Paper-Scissors/index.html
@@ -0,0 +1,81 @@
+<!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 Game</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="game-container">
+        <header class="game-header">
+            <h1 class="game-title">Rock Paper Scissors</h1>
+            <p class="game-subtitle">Challenge the computer in this classic game!</p>
+        </header>
+
+        <div class="score-board">
+            <div class="score-card player-score">
+                <h3>You</h3>
+                <div class="score" id="playerScore">0</div>
+            </div>
+            <div class="vs">VS</div>
+            <div class="score-card computer-score">
+                <h3>Computer</h3>
+                <div class="score" id="computerScore">0</div>
+            </div>
+        </div>
+
+        <div class="game-area">
+            <div class="choice-display">
+                <div class="player-choice" id="playerChoice">
+                    <div class="choice-icon">❓</div>
+                    <p>You chose:</p>
+                    <h3 id="playerChoiceText">Make your move!</h3>
+                </div>
+
+               <div class="result-display" id="gameResult" role="status" aria-live="polite" aria-atomic="true">
+                    <h2>Choose your move to start!</h2>
+                </div>
+
+                <div class="computer-choice" id="computerChoice">
+                    <div class="choice-icon">❓</div>
+                    <p>Computer chose:</p>
+                    <h3 id="computerChoiceText">Waiting...</h3>
+                </div>
+            </div>
+
+            <div class="controls">
+                            <button type="button" class="choice-btn rock" id="rockBtn" data-choice="rock" aria-keyshortcuts="R">
+	                    <span class="emoji">🪨</span>
+	                    <span class="label">Rock</span>
+	                </button>
+	                <button type="button" class="choice-btn paper" id="paperBtn" data-choice="paper" aria-keyshortcuts="P">
+	                    <span class="emoji">📄</span>
+	                    <span class="label">Paper</span>
+	                </button>
+	                <button type="button" class="choice-btn scissors" id="scissorsBtn" data-choice="scissors" aria-keyshortcuts="S">
+	                    <span class="emoji">✂️</span>
+	                    <span class="label">Scissors</span>
+	                </button>
+	            </div>
+
+	            <button type="button" class="reset-btn" id="resetBtn" aria-keyshortcuts="X">
+                <span class="reset-icon">🔄</span>
+                Reset Game
+            </button>
+        </div>
+
+        <div class="round-history" id="roundHistory">
+            <h3>Round History</h3>
+            <div class="history-list" id="historyList">
+                <p class="no-history">No rounds played yet. Make your first move!</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>