Skip to content

Commit 9604ac4

Browse files
thinkswellthinkswell
authored
Merge pull request #1202 from DPanvish/SimonsGame-DPanvish
Simons Game
2 parents afff8b7 + 2c6287d commit 9604ac4

File tree

5 files changed

+882
-0
lines changed

5 files changed

+882
-0
lines changed

‎SimonGame/SimonsGame/DPanvish/README.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# Simon's Game 🎮
2+
3+
A simple and easy-to-understand implementation of the classic Simon's memory game built with HTML, CSS, and JavaScript.
4+
5+
## Sample Working Output 📸
6+
7+
![Simon's Game Interface](SG.png)
8+
9+
*The game features a modern glass morphism design with four colored buttons arranged in a circle, score display, and intuitive controls.*
10+
11+
## Features ✨
12+
13+
- **Simple Code**: Easy to read and understand for beginners
14+
- **Classic Mode**: Traditional Simon's game with increasing difficulty
15+
- **Endless Mode**: Keep playing as long as you can
16+
- **Audio Support**: Custom sounds for each color and game over
17+
- **Speed Control**: Adjust how fast the pattern plays
18+
- **Volume Control**: Adjust audio volume
19+
- **Responsive Design**: Works on desktop and mobile
20+
21+
## How to Play 🎯
22+
23+
1. **Start the Game**: Click "Start Game" or "Endless Mode"
24+
2. **Watch the Pattern**: The game shows you a sequence of colors
25+
3. **Repeat the Pattern**: Click the colors in the same order
26+
4. **Progress**: Each level adds one more color
27+
5. **Score Points**: Earn points based on your level
28+
29+
## Audio Files Required 🔊
30+
31+
Add these audio files to the same folder:
32+
33+
- `sound1.mp3` - Red button sound
34+
- `sound2.mp3` - Blue button sound
35+
- `sound3.mp3` - Green button sound
36+
- `sound4.mp3` - Yellow button sound
37+
- `GameOver.mp3` - Game over sound
38+
39+
## Controls 🎮
40+
41+
- **Mouse**: Click colored buttons to play
42+
- **Sliders**: Adjust speed and volume
43+
- **Buttons**: Start, Endless Mode, Reset
44+
45+
## Game Modes 🎲
46+
47+
### Classic Mode
48+
- Game ends when you make a mistake
49+
- Try to get the highest score
50+
51+
### Endless Mode
52+
- No game over - keep playing forever!
53+
- Perfect for practice
54+
55+
## Code Structure 📁
56+
57+
```
58+
Panvish/
59+
├── index.html # Simple HTML structure
60+
├── style.css # Clean CSS styles
61+
├── main.js # Easy-to-read JavaScript
62+
├── README.md # This file
63+
├── sound1.mp3 # Red button audio
64+
├── sound2.mp3 # Blue button audio
65+
├── sound3.mp3 # Green button audio
66+
├── sound4.mp3 # Yellow button audio
67+
└── GameOver.mp3 # Game over audio
68+
```
69+
70+
## Getting Started 🚀
71+
72+
1. **Download** the project files
73+
2. **Add Audio Files** - Place your audio files in the same folder
74+
3. **Open index.html** in your web browser
75+
4. **Start Playing** - Click "Start Game" to begin!
76+
77+
## Code Explanation 📝
78+
79+
### HTML (index.html)
80+
- Simple structure with clear sections
81+
- Easy to understand element names
82+
- Comments explain each part
83+
84+
### CSS (style.css)
85+
- Clean, organized styles
86+
- Simple color scheme
87+
- Mobile-friendly design
88+
- Easy to modify
89+
90+
### JavaScript (main.js)
91+
- Single game object with clear methods
92+
- Simple variable names
93+
- Step-by-step comments
94+
- Easy to follow logic
95+
96+
## Tips for Learning 🎓
97+
98+
- **Read the Comments**: Each section is explained
99+
- **Start Simple**: Focus on basic functionality first
100+
- **Modify Colors**: Try changing the button colors
101+
- **Add Features**: Experiment with new ideas
102+
- **Practice**: Play the game to understand how it works
103+
104+
## Troubleshooting 🔧
105+
106+
### No Sound?
107+
- Check that audio files are in the correct folder
108+
- Make sure browser allows audio
109+
- Try adjusting volume slider
110+
111+
### Game Not Working?
112+
- Check browser console for errors
113+
- Make sure JavaScript is enabled
114+
- Try refreshing the page
115+
116+
## Learning Opportunities 📚
117+
118+
This simplified version is perfect for:
119+
- **HTML Beginners**: Learn basic structure
120+
- **CSS Learners**: Understand styling and layout
121+
- **JavaScript Newbies**: See how games work
122+
- **Web Developers**: Study clean, readable code
123+
124+
## Customization Ideas 💡
125+
126+
- Change button colors
127+
- Add new game modes
128+
- Modify scoring system
129+
- Add sound effects
130+
- Create different themes
131+
132+
---
133+
134+
**Enjoy learning and playing Simon's Game!** 🎉

‎SimonGame/SimonsGame/DPanvish/SG.png‎

285 KB
Loading

‎SimonGame/SimonsGame/DPanvish/index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
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>Simon's Game</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<!-- Game Title -->
12+
<header>
13+
<h1>Simon's Game</h1>
14+
</header>
15+
16+
<!-- Score and Level Display -->
17+
<div class="game-info">
18+
<div>Score: <span id="score">0</span></div>
19+
<div>Level: <span id="level">1</span></div>
20+
<div>Mode: <span id="mode">Classic</span></div>
21+
</div>
22+
23+
<!-- Main Game Board -->
24+
<div class="game-board">
25+
<div class="simon-container">
26+
<div class="simon-circle">
27+
<!-- Color Buttons -->
28+
<div class="color-button red" id="red"></div>
29+
<div class="color-button blue" id="blue"></div>
30+
<div class="color-button green" id="green"></div>
31+
<div class="color-button yellow" id="yellow"></div>
32+
33+
<!-- Center Control Panel -->
34+
<div class="center-circle">
35+
<div class="center-content">
36+
<div class="game-status" id="gameStatus">Press Start</div>
37+
<button id="startBtn" class="start-btn">Start Game</button>
38+
<button id="endlessBtn" class="endless-btn">Endless Mode</button>
39+
<button id="resetBtn" class="reset-btn" style="display: none;">Reset</button>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
46+
47+
48+
<!-- Instructions -->
49+
<div class="instructions">
50+
<h3>How to Play:</h3>
51+
<ul>
52+
<li>Click "Start Game" to begin</li>
53+
<li>Watch the pattern of colors</li>
54+
<li>Click the colors in the same order</li>
55+
<li>Each level adds one more color</li>
56+
<li>Try to get the highest score!</li>
57+
</ul>
58+
</div>
59+
</div>
60+
61+
<!-- Audio Files (Optional - will use beep sounds if files not found) -->
62+
<audio id="sound1" preload="auto">
63+
<source src="sound1.mp3" type="audio/mpeg">
64+
<source src="sound1.wav" type="audio/wav">
65+
</audio>
66+
<audio id="sound2" preload="auto">
67+
<source src="sound2.mp3" type="audio/mpeg">
68+
<source src="sound2.wav" type="audio/wav">
69+
</audio>
70+
<audio id="sound3" preload="auto">
71+
<source src="sound3.mp3" type="audio/mpeg">
72+
<source src="sound3.wav" type="audio/wav">
73+
</audio>
74+
<audio id="sound4" preload="auto">
75+
<source src="sound4.mp3" type="audio/mpeg">
76+
<source src="sound4.wav" type="audio/wav">
77+
</audio>
78+
<audio id="gameOverSound" preload="auto">
79+
<source src="GameOver.mp3" type="audio/mpeg">
80+
<source src="GameOver.wav" type="audio/wav">
81+
</audio>
82+
83+
<!-- Game Script -->
84+
<script src="main.js"></script>
85+
</body>
86+
</html>

0 commit comments

Comments
 (0)