Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2c6287d

Browse files
committed
Simons Game
1 parent 27ee633 commit 2c6287d

File tree

5 files changed

+882
-0
lines changed

5 files changed

+882
-0
lines changed
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[フレーム]
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)

AltStyle によって変換されたページ (->オリジナル) /