Skip to content

Commit a175c5c

Browse files
devsdenepaldevsdenepal
authored
Merge pull request #65 from anishk85/number-guessing-game
added number guessing game
2 parents 9f73835 + ec5e2cb commit a175c5c

4 files changed

Lines changed: 747 additions & 0 deletions

File tree

‎web/Number-Guessing-Game/README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Number Guessing Game
2+
3+
An interactive web-based number guessing game that challenges players to guess a random number within a specified range.
4+
5+
## Features
6+
7+
- **Multiple Difficulty Levels**: Easy (1-50), Medium (1-100), Hard (1-200)
8+
- **Smart Range Narrowing**: Visual range indicator that updates as you guess
9+
- **Live Statistics**: Track attempts, best score, and games won
10+
- **Hint System**: Get helpful hints when you're stuck
11+
- **Persistent Scores**: Best scores saved in browser localStorage
12+
- **Confetti Celebration**: Animated celebration when you win
13+
- **Responsive Design**: Works perfectly on desktop and mobile
14+
15+
## How to Play
16+
17+
1. Open `index.html` in your web browser
18+
2. Choose your difficulty level
19+
3. Enter your guess in the input field
20+
4. Get feedback on whether your guess is too high or too low
21+
5. Use the visual range indicator to narrow down your options
22+
6. Try to guess the number in as few attempts as possible!
23+
24+
## Game Mechanics
25+
26+
- **Range Indicator**: Shows the current possible range with a visual bar
27+
- **Smart Feedback**: Updates the range based on your guesses
28+
- **Hint System**: Provides proximity-based hints (very close, getting warmer, etc.)
29+
- **Score Tracking**: Keeps track of your best performance and total games won
30+
31+
## Visual Indicators
32+
33+
- 🔵 **Blue**: Normal input field
34+
- 🔴 **Red**: Invalid input (out of range)
35+
- 🟢 **Green**: Success message with celebration
36+
- 🔴 **Red**: Error messages
37+
- 🟡 **Yellow**: Warning messages (too high/low)
38+
- 🔵 **Blue**: Info messages and hints
39+
40+
## Technical Features
41+
42+
- **Local Storage**: Saves your best scores and game statistics
43+
- **Smooth Animations**: CSS transitions and keyframe animations
44+
- **Responsive Grid**: Adapts to different screen sizes
45+
- **Accessibility**: Keyboard navigation support
46+
- **Modern UI**: Beautiful gradients and hover effects
47+
48+
## Browser Compatibility
49+
50+
- Chrome (recommended)
51+
- Firefox
52+
- Safari
53+
- Edge
54+
55+
Perfect for quick brain training sessions and improving your number sense! 🎯

‎web/Number-Guessing-Game/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>Number Guessing Game</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header>
12+
<h1>🎯 Number Guessing Game</h1>
13+
<p>I'm thinking of a number between 1 and 100. Can you guess it?</p>
14+
</header>
15+
16+
<div class="game-container">
17+
<div class="game-info">
18+
<div class="stat">
19+
<span class="stat-label">Attempts:</span>
20+
<span id="attempts">0</span>
21+
</div>
22+
<div class="stat">
23+
<span class="stat-label">Best Score:</span>
24+
<span id="best-score">-</span>
25+
</div>
26+
<div class="stat">
27+
<span class="stat-label">Games Won:</span>
28+
<span id="games-won">0</span>
29+
</div>
30+
</div>
31+
32+
<div class="game-area">
33+
<div class="guess-container">
34+
<input type="number" id="guess-input" placeholder="Enter your guess (1-100)" min="1" max="100">
35+
<button id="guess-btn" class="btn primary">Guess</button>
36+
</div>
37+
38+
<div class="feedback" id="feedback">
39+
<p>Start guessing to begin!</p>
40+
</div>
41+
42+
<div class="range-indicator">
43+
<div class="range-bar">
44+
<div class="range-fill" id="range-fill"></div>
45+
</div>
46+
<div class="range-labels">
47+
<span id="min-range">1</span>
48+
<span id="max-range">100</span>
49+
</div>
50+
</div>
51+
52+
<div class="game-controls">
53+
<button id="new-game-btn" class="btn secondary">New Game</button>
54+
<button id="hint-btn" class="btn hint" disabled>Get Hint</button>
55+
</div>
56+
</div>
57+
58+
<div class="difficulty-selector">
59+
<h3>Choose Difficulty:</h3>
60+
<div class="difficulty-options">
61+
<button class="difficulty-btn active" data-difficulty="easy">Easy (1-50)</button>
62+
<button class="difficulty-btn" data-difficulty="medium">Medium (1-100)</button>
63+
<button class="difficulty-btn" data-difficulty="hard">Hard (1-200)</button>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div class="instructions">
69+
<h3>How to Play:</h3>
70+
<ul>
71+
<li>🎯 Guess a number within the given range</li>
72+
<li>📊 Get feedback on whether your guess is too high or too low</li>
73+
<li>🎉 Try to guess the number in as few attempts as possible</li>
74+
<li>💡 Use hints if you get stuck!</li>
75+
</ul>
76+
</div>
77+
</div>
78+
79+
<script src="script.js"></script>
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)