Skip to content

Commit 06074fd

Browse files
suryaprakash0010suryaprakash0010
committed
Create an Example Solution for a Rock Paper Scissors Game #323 
1 parent 8574bc2 commit 06074fd

4 files changed

Lines changed: 949 additions & 0 deletions

File tree

‎examples/Rock-Paper-Scissors/README.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# Rock Paper Scissors Game
2+
3+
A classic Rock Paper Scissors game built with HTML, CSS, and JavaScript that demonstrates randomization, event handling, DOM manipulation, and game logic concepts.
4+
5+
## 🎮 Features
6+
7+
**Core Gameplay:**
8+
- ✅ Choose between Rock, Paper, or Scissors
9+
- ✅ Computer randomly selects its move
10+
- ✅ Real-time winner determination for each round
11+
- ✅ Live score tracking (You vs Computer)
12+
- ✅ Visual feedback with choice animations
13+
14+
**Bonus Features:**
15+
- ✅ **Smooth animations** - Button selections and choice displays
16+
- ✅ **Reset functionality** - Restart the game at any time
17+
- ✅ **Round history** - View past 10 rounds with results
18+
- ✅ **Responsive design** - Works perfectly on all devices
19+
- ✅ **Keyboard support** - Press R, P, or S keys to play
20+
- ✅ **Modern UI** - Beautiful gradient design with glass morphism
21+
22+
## 🛠 Technologies Demonstrated
23+
24+
**JavaScript Concepts:**
25+
- **Randomization** - `Math.random()` for computer choice generation
26+
- **Conditional Logic** - Winner determination using if/else statements
27+
- **Event Listeners** - Click handlers for game buttons
28+
- **DOM Manipulation** - Dynamic updates to scores, choices, and history
29+
- **Array Methods** - Managing game history and choices
30+
- **ES6 Classes** - Object-oriented game structure
31+
32+
**CSS Concepts:**
33+
- **Responsive Design** - Mobile-first approach with media queries
34+
- **CSS Grid & Flexbox** - Layout management
35+
- **Animations** - `@keyframes` for smooth transitions
36+
- **Modern Styling** - Gradients, backdrop-filter, and shadows
37+
38+
## 📁 Project Structure
39+
40+
```
41+
Rock-Paper-Scissors/
42+
├── index.html # Game interface and structure
43+
├── styles.css # Styling and animations
44+
└── script.js # Game logic and functionality
45+
```
46+
47+
## 🎯 How to Play
48+
49+
1. **Make your move** by clicking one of the three buttons:
50+
- 🪨 **Rock** - Press R key
51+
- 📄 **Paper** - Press P key
52+
- ✂️ **Scissors** - Press S key
53+
54+
2. **Computer makes its move** automatically using random selection
55+
56+
3. **Winner is determined** based on classic rules:
57+
- Rock beats Scissors
58+
- Paper beats Rock
59+
- Scissors beats Paper
60+
- Same choices = Tie
61+
62+
4. **Score updates** and round is added to history
63+
64+
5. **Play again** or click "Reset Game" to start over
65+
66+
## 🔧 Game Rules Implementation
67+
68+
```javascript
69+
determineWinner(player, computer) {
70+
if (player === computer) {
71+
return 'tie';
72+
}
73+
74+
const winConditions = {
75+
rock: 'scissors',
76+
paper: 'rock',
77+
scissors: 'paper'
78+
};
79+
80+
return winConditions[player] === computer ? 'win' : 'lose';
81+
}
82+
```
83+
84+
## 🎨 Key Features Explained
85+
86+
### Random Computer Choice
87+
```javascript
88+
getComputerChoice() {
89+
const randomIndex = Math.floor(Math.random() * this.choices.length);
90+
return this.choices[randomIndex];
91+
}
92+
```
93+
94+
### Score Tracking
95+
- Player and computer scores update in real-time
96+
- Visual feedback with scaling animations
97+
- Persistent throughout the game session
98+
99+
### Round History
100+
- Stores last 10 rounds with full details
101+
- Color-coded results (green=win, red=lose, gray=tie)
102+
- Scrollable interface for reviewing past games
103+
104+
### Animations
105+
- Button selection animations with `pulse` effect
106+
- Shake animation for choice reveals
107+
- Smooth score updates with scale transforms
108+
109+
## 🎯 Learning Outcomes
110+
111+
After studying this example, you'll understand:
112+
113+
**JavaScript Fundamentals:**
114+
- Random number generation and array manipulation
115+
- Event-driven programming with click handlers
116+
- Conditional logic for game state management
117+
- DOM manipulation for dynamic content updates
118+
- ES6 class structure and methods
119+
120+
**CSS Techniques:**
121+
- Responsive design with media queries
122+
- CSS animations and transitions
123+
- Modern styling with gradients and effects
124+
- Layout management with Grid and Flexbox
125+
126+
**Game Development Concepts:**
127+
- Game state management
128+
- User interaction handling
129+
- Score tracking and persistence
130+
- Game loop implementation
131+
132+
## 🚀 Game Strategy Tips
133+
134+
💡 **Pattern Recognition**: The computer chooses randomly each time, so there's no pattern to exploit!
135+
136+
💡 **Quick Play**: Use keyboard shortcuts (R, P, S) for faster gameplay
137+
138+
💡 **Track History**: Use the round history to analyze your win/loss patterns
139+
140+
💡 **Reset Often**: Start fresh games to practice different strategies
141+
142+
## 📱 Responsive Design
143+
144+
- **Desktop**: Full-width layout with side-by-side score display
145+
- **Tablet**: Optimized spacing and touch-friendly buttons
146+
- **Mobile**: Stacked layout with larger touch targets
147+
148+
## 🔊 Sound Effects (Optional)
149+
150+
To add sound effects:
151+
1. Add audio files (`win.mp3`, `lose.mp3`, `tie.mp3`) to the game directory
152+
2. Uncomment the `playSound()` function in `script.js`
153+
3. Customize sound playback as needed
154+
155+
## 🎮 Browser Compatibility
156+
157+
- ✅ Chrome (recommended)
158+
- ✅ Firefox
159+
- ✅ Safari
160+
- ✅ Edge
161+
- ✅ Mobile browsers
162+
163+
## 🏆 Challenge Yourself
164+
165+
Try these extensions:
166+
- Add sound effects for each action
167+
- Implement different difficulty levels
168+
- Add a tournament mode
169+
- Create player name input
170+
- Add game statistics (win percentage, streaks)
171+
172+
---
173+
174+
**Happy gaming!** 🎉

‎examples/Rock-Paper-Scissors/index.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Rock Paper Scissors Game</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div class="game-container">
14+
<header class="game-header">
15+
<h1 class="game-title">Rock Paper Scissors</h1>
16+
<p class="game-subtitle">Challenge the computer in this classic game!</p>
17+
</header>
18+
19+
<div class="score-board">
20+
<div class="score-card player-score">
21+
<h3>You</h3>
22+
<div class="score" id="playerScore">0</div>
23+
</div>
24+
<div class="vs">VS</div>
25+
<div class="score-card computer-score">
26+
<h3>Computer</h3>
27+
<div class="score" id="computerScore">0</div>
28+
</div>
29+
</div>
30+
31+
<div class="game-area">
32+
<div class="choice-display">
33+
<div class="player-choice" id="playerChoice">
34+
<div class="choice-icon">❓</div>
35+
<p>You chose:</p>
36+
<h3 id="playerChoiceText">Make your move!</h3>
37+
</div>
38+
39+
<div class="result-display" id="gameResult">
40+
<h2>Choose your move to start!</h2>
41+
</div>
42+
43+
<div class="computer-choice" id="computerChoice">
44+
<div class="choice-icon">❓</div>
45+
<p>Computer chose:</p>
46+
<h3 id="computerChoiceText">Waiting...</h3>
47+
</div>
48+
</div>
49+
50+
<div class="controls">
51+
<button class="choice-btn rock" id="rockBtn" data-choice="rock">
52+
<span class="emoji">🪨</span>
53+
<span class="label">Rock</span>
54+
</button>
55+
<button class="choice-btn paper" id="paperBtn" data-choice="paper">
56+
<span class="emoji">📄</span>
57+
<span class="label">Paper</span>
58+
</button>
59+
<button class="choice-btn scissors" id="scissorsBtn" data-choice="scissors">
60+
<span class="emoji">✂️</span>
61+
<span class="label">Scissors</span>
62+
</button>
63+
</div>
64+
65+
<button class="reset-btn" id="resetBtn">
66+
<span class="reset-icon">🔄</span>
67+
Reset Game
68+
</button>
69+
</div>
70+
71+
<div class="round-history" id="roundHistory">
72+
<h3>Round History</h3>
73+
<div class="history-list" id="historyList">
74+
<p class="no-history">No rounds played yet. Make your first move!</p>
75+
</div>
76+
</div>
77+
</div>
78+
79+
<script src="script.js"></script>
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)