diff --git a/examples/Rock-Paper-Scissors/README.md b/examples/Rock-Paper-Scissors/README.md new file mode 100644 index 00000000..a9d8f988 --- /dev/null +++ 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 new file mode 100644 index 00000000..d762e89a --- /dev/null +++ b/examples/Rock-Paper-Scissors/index.html @@ -0,0 +1,81 @@ + + + + + + Rock Paper Scissors Game + + + + + + +
+
+

Rock Paper Scissors

+

Challenge the computer in this classic game!

+
+ +
+
+

You

+
0
+
+
VS
+
+

Computer

+
0
+
+
+ +
+
+
+
❓
+

You chose:

+

Make your move!

+
+ +
+

Choose your move to start!

+
+ +
+
❓
+

Computer chose:

+

Waiting...

+
+
+ +
+ + + +
+ + +
+ +
+

Round History

+
+

No rounds played yet. Make your first move!

+
+
+
+ + + + diff --git a/examples/Rock-Paper-Scissors/script.js b/examples/Rock-Paper-Scissors/script.js new file mode 100644 index 00000000..808c139c --- /dev/null +++ b/examples/Rock-Paper-Scissors/script.js @@ -0,0 +1,239 @@ +// Rock Paper Scissors Game - JavaScript +// Demonstrates randomization, event handling, DOM manipulation, and game logic + +class RockPaperScissorsGame { + constructor() { + this.choices = ['rock', 'paper', 'scissors']; + this.playerScore = 0; + this.computerScore = 0; + this.roundNumber = 0; + this.gameHistory = []; + + this.initializeElements(); + this.bindEvents(); + } + + initializeElements() { + this.playerScoreEl = document.getElementById('playerScore'); + this.computerScoreEl = document.getElementById('computerScore'); + this.playerChoiceEl = document.getElementById('playerChoice'); + this.computerChoiceEl = document.getElementById('computerChoice'); + this.playerChoiceTextEl = document.getElementById('playerChoiceText'); + this.computerChoiceTextEl = document.getElementById('computerChoiceText'); + this.gameResultEl = document.getElementById('gameResult'); + this.rockBtn = document.getElementById('rockBtn'); + this.paperBtn = document.getElementById('paperBtn'); + this.scissorsBtn = document.getElementById('scissorsBtn'); + this.resetBtn = document.getElementById('resetBtn'); + this.historyListEl = document.getElementById('historyList'); + } + + bindEvents() { + this.rockBtn.addEventListener('click', () => this.playRound('rock')); + this.paperBtn.addEventListener('click', () => this.playRound('paper')); + this.scissorsBtn.addEventListener('click', () => this.playRound('scissors')); + this.resetBtn.addEventListener('click', () => this.resetGame()); + } + + playRound(playerChoice) { + const computerChoice = this.getComputerChoice(); + const result = this.determineWinner(playerChoice, computerChoice); + + this.animateChoices(playerChoice, computerChoice); + this.displayResult(playerChoice, computerChoice, result); + this.updateScore(result); + this.addToHistory(playerChoice, computerChoice, result); + } + + getComputerChoice() { + const randomIndex = Math.floor(Math.random() * this.choices.length); + return this.choices[randomIndex]; + } + + determineWinner(player, computer) { + if (player === computer) { + return 'tie'; + } + + const winConditions = { + rock: 'scissors', + paper: 'rock', + scissors: 'paper' + }; + + return winConditions[player] === computer ? 'win' : 'lose'; + } + + animateChoices(playerChoice, computerChoice) { + +document.querySelectorAll('.choice-btn.selected') + .forEach(el => el.classList.remove('selected')); + +const playerBtn = document.querySelector(`[data-choice="${playerChoice}"]`); +if (playerBtn) { + playerBtn.classList.add('selected'); +} + + + // Add shake animation to choice displays + this.playerChoiceEl.classList.add('shake'); + this.computerChoiceEl.classList.add('shake'); + + setTimeout(() => { + this.playerChoiceEl.classList.remove('shake'); + this.computerChoiceEl.classList.remove('shake'); + }, 500); + } + + displayResult(playerChoice, computerChoice, result) { + // Update choice displays + this.playerChoiceTextEl.textContent = this.capitalize(playerChoice); + this.computerChoiceTextEl.textContent = this.capitalize(computerChoice); + + // Update choice icons + const playerIcon = this.getChoiceIcon(playerChoice); + const computerIcon = this.getChoiceIcon(computerChoice); + + this.playerChoiceEl.querySelector('.choice-icon').textContent = playerIcon; + this.computerChoiceEl.querySelector('.choice-icon').textContent = computerIcon; + + // Display result + const resultMessages = { + win: '🎉 You Win!', + lose: '😔 Computer Wins!', + tie: '🤝 It\'s a Tie!' + }; + + this.gameResultEl.innerHTML = `

${resultMessages[result]}

`; + } + + updateScore(result) { + if (result === 'win') { + this.playerScore++; + this.playerScoreEl.textContent = this.playerScore; + } else if (result === 'lose') { + this.computerScore++; + this.computerScoreEl.textContent = this.computerScore; + } + + // Add score animation + if (result !== 'tie') { + const scoreEl = result === 'win' ? this.playerScoreEl : this.computerScoreEl; + scoreEl.style.transform = 'scale(1.2)'; + setTimeout(() => { + scoreEl.style.transform = 'scale(1)'; + }, 200); + } + } + + addToHistory(playerChoice, computerChoice, result) { + this.roundNumber++; + + const historyItem = { + round: this.roundNumber, + player: playerChoice, + computer: computerChoice, + result: result + }; + + this.gameHistory.unshift(historyItem); + if (this.gameHistory.length > 10) this.gameHistory.length = 10; + this.displayHistory(); + } + + displayHistory() { + if (this.gameHistory.length === 0) { + this.historyListEl.innerHTML = '

No rounds played yet. Make your first move!

'; + return; + } + + this.historyListEl.innerHTML = ''; + + this.gameHistory.slice(0, 10).forEach(item => { + const historyItemEl = document.createElement('div'); + historyItemEl.className = `history-item ${item.result}`; + + historyItemEl.innerHTML = ` +
Round ${item.round}
+
+
+ ${this.getChoiceIcon(item.player)} + ${this.capitalize(item.player)} +
+ vs +
+ ${this.getChoiceIcon(item.computer)} + ${this.capitalize(item.computer)} +
+
+
${this.capitalize(item.result)}
+ `; + + this.historyListEl.appendChild(historyItemEl); + }); + } + + resetGame() { + this.playerScore = 0; + this.computerScore = 0; + this.roundNumber = 0; + this.gameHistory = []; + + this.playerScoreEl.textContent = '0'; + this.computerScoreEl.textContent = '0'; + + // Reset choice displays + this.playerChoiceTextEl.textContent = 'Make your move!'; + this.computerChoiceTextEl.textContent = 'Waiting...'; + this.playerChoiceEl.querySelector('.choice-icon').textContent = '❓'; + this.computerChoiceEl.querySelector('.choice-icon').textContent = '❓'; + + // Reset result display + this.gameResultEl.innerHTML = '

Choose your move to start!

'; + + // Remove selected state from buttons + this.rockBtn.classList.remove('selected'); + this.paperBtn.classList.remove('selected'); + this.scissorsBtn.classList.remove('selected'); + + // Reset history + this.displayHistory(); + } + + getChoiceIcon(choice) { + const icons = { + rock: '🪨', + paper: '📄', + scissors: '✂️' + }; + return icons[choice] || '❓'; + } + + capitalize(str) { + return str.charAt(0).toUpperCase() + str.slice(1); + } +} +if (typeof module !== 'undefined' && module.exports) { + module.exports = RockPaperScissorsGame; +} + +document.addEventListener('DOMContentLoaded', () => { + const game = new RockPaperScissorsGame(); + + document.addEventListener('keydown', (e) => { + const key = e.key.toLowerCase(); + if (key === 'r') game.playRound('rock'); + else if (key === 'p') game.playRound('paper'); + else if (key === 's') game.playRound('scissors'); + }); + + // Add sound effects (optional) + const playSound = (type) => { + // You can add sound files in the same directory and uncomment this + // const audio = new Audio(`${type}.mp3`); + // audio.volume = 0.3; + // audio.play().catch(e => console.log('Audio play failed:', e)); + }; +}); + + diff --git a/examples/Rock-Paper-Scissors/styles.css b/examples/Rock-Paper-Scissors/styles.css new file mode 100644 index 00000000..5a12883f --- /dev/null +++ b/examples/Rock-Paper-Scissors/styles.css @@ -0,0 +1,466 @@ +/* Rock Paper Scissors Game Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.game-container { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); /* Safari support */ + border-radius: 20px; + padding: 2rem; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + max-width: 600px; + width: 100%; + border: 1px solid rgba(255, 255, 255, 0.2); +} + + +/* Header */ +.game-header { + text-align: center; + margin-bottom: 2rem; +} + +.game-title { + font-size: 2.5rem; + font-weight: 700; + background: linear-gradient(135deg, #667eea, #764ba2); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 0.5rem; +} + +.game-subtitle { + color: #6b7280; + font-size: 1.1rem; +} + +/* Score Board */ +.score-board { + display: flex; + justify-content: space-around; + align-items: center; + margin-bottom: 2rem; + padding: 1.5rem; + background: rgba(102, 126, 234, 0.05); + border-radius: 15px; + border: 2px solid rgba(102, 126, 234, 0.1); +} + +.score-card { + text-align: center; + padding: 1rem; + border-radius: 10px; + min-width: 80px; +} + +.player-score { + background: rgba(34, 197, 94, 0.1); + border: 2px solid rgba(34, 197, 94, 0.2); +} + +.computer-score { + background: rgba(239, 68, 68, 0.1); + border: 2px solid rgba(239, 68, 68, 0.2); +} + +.score-card h3 { + font-size: 0.9rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: #374151; +} + +.score { + font-size: 2rem; + font-weight: 700; + color: #1f2937; +} + +.vs { + font-size: 1.5rem; + font-weight: 700; + color: #9ca3af; + margin: 0 1rem; +} + +/* Game Area */ +.game-area { + text-align: center; + margin-bottom: 2rem; +} + +.choice-display { + display: flex; + justify-content: space-around; + align-items: center; + margin-bottom: 2rem; + padding: 1.5rem; + background: rgba(255, 255, 255, 0.5); + border-radius: 15px; + min-height: 120px; +} + +.player-choice, +.computer-choice { + flex: 1; + padding: 1rem; +} + +.choice-display .player-choice { + border-right: 2px solid rgba(102, 126, 234, 0.2); +} + +.choice-icon { + font-size: 2.5rem; + margin-bottom: 0.5rem; + opacity: 0.7; +} + +.choice-display p { + font-size: 0.9rem; + color: #6b7280; + margin-bottom: 0.3rem; +} + +.choice-display h3 { + font-size: 1.1rem; + color: #374151; + font-weight: 600; +} + +.result-display { + padding: 0 1rem; + min-width: 200px; +} + +.result-display h2 { + font-size: 1.3rem; + font-weight: 600; + color: #374151; + margin: 0; +} + +/* Controls */ +.controls { + display: flex; + justify-content: center; + gap: 1rem; + margin-bottom: 2rem; + flex-wrap: wrap; +} + +.choice-btn { + background: white; + border: 3px solid #e5e7eb; + border-radius: 15px; + padding: 1rem 1.5rem; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + min-width: 100px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.choice-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); + border-color: #667eea; +} + +.choice-btn:active { + transform: translateY(0); +} + +.choice-btn.rock:hover { + background: rgba(245, 158, 11, 0.1); + border-color: #f59e0b; +} + +.choice-btn.paper:hover { + background: rgba(59, 130, 246, 0.1); + border-color: #3b82f6; +} + +.choice-btn.scissors:hover { + background: rgba(239, 68, 68, 0.1); + border-color: #ef4444; +} + +.choice-btn.selected { + animation: pulse 0.6s ease-in-out; +} + +.emoji { + font-size: 2rem; +} + +.label { + font-size: 0.9rem; + color: #6b7280; +} + +@keyframes pulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +/* Reset Button */ +.reset-btn { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border: none; + border-radius: 50px; + padding: 0.75rem 2rem; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 0.5rem; + margin: 0 auto; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); +} + +.reset-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); +} + +.reset-icon { + font-size: 1.1rem; +} + +/* Round History */ +.round-history { + background: rgba(255, 255, 255, 0.5); + border-radius: 15px; + padding: 1.5rem; + border: 1px solid rgba(102, 126, 234, 0.1); +} + +.round-history h3 { + font-size: 1.2rem; + font-weight: 600; + color: #374151; + margin-bottom: 1rem; + text-align: center; +} + +.history-list { + max-height: 200px; + overflow-y: auto; +} + +.history-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem; + margin-bottom: 0.5rem; + background: white; + border-radius: 8px; + border-left: 4px solid #667eea; + font-size: 0.9rem; +} + +.history-item.win { + border-left-color: #22c55e; + background: rgba(34, 197, 94, 0.05); +} + +.history-item.lose { + border-left-color: #ef4444; + background: rgba(239, 68, 68, 0.05); +} + +.history-item.tie { + border-left-color: #6b7280; + background: rgba(107, 114, 128, 0.05); +} + +.round-number { + font-weight: 600; + color: #374151; +} + +.moves { + display: flex; + gap: 1rem; + align-items: center; +} + +.player-move, +.computer-move { + display: flex; + align-items: center; + gap: 0.3rem; +} + +.result { + font-weight: 600; +} + +.win .result { + color: #22c55e; +} + +.lose .result { + color: #ef4444; +} + +.tie .result { + color: #6b7280; +} + +.no-history { + text-align: center; + color: #9ca3af; + font-style: italic; + padding: 1rem; +} + +/* Shake animation */ +@keyframes shake { + 0%, 100% { + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + transform: translateX(-5px); + } + 20%, 40%, 60%, 80% { + transform: translateX(5px); + } +} + +.shake { + animation: shake 0.5s ease-in-out; +} + +/* Respect users' reduced motion preferences */ +@media (prefers-reduced-motion: reduce) { + .choice-btn.selected, + .shake { + animation: none !important; + } + + .score { + transition: none !important; + } +} + + +/* Responsive Design */ +@media (max-width: 600px) { + .game-container { + padding: 1.5rem; + margin: 10px; + } + + .game-title { + font-size: 2rem; + } + + .score-board { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + + .score-card { + min-width: auto; + width: 100%; + } + + .vs { + margin: 0; + order: -1; + } + + .choice-display { + flex-direction: column; + gap: 1rem; + min-height: auto; + padding: 1rem; + } + + .player-choice { + border-right: none; + border-bottom: 2px solid rgba(102, 126, 234, 0.2); + padding-bottom: 1rem; + } + + .computer-choice { + padding-top: 1rem; + } + + .controls { + gap: 0.5rem; + } + + .choice-btn { + min-width: 80px; + padding: 0.75rem 1rem; + } + + .emoji { + font-size: 1.5rem; + } + + .label { + font-size: 0.8rem; + } + + .result-display { + min-width: auto; + padding: 0; + } + + .result-display h2 { + font-size: 1.1rem; + } + + .round-history { + padding: 1rem; + } + + .history-list { + max-height: 150px; + } +} + +@media (max-width: 400px) { + .controls { + flex-direction: column; + align-items: center; + } + + .choice-btn { + width: 100%; + max-width: 200px; + } +}