Skip to content

Commit b1e7e8d

Browse files
CoderSatyCoderSaty
committed
added my site for simon game
1 parent 4dec0a1 commit b1e7e8d

File tree

8 files changed

+253
-0
lines changed

8 files changed

+253
-0
lines changed

‎Web Development/Simon game/index.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>SIMON GAME</title>
6+
</head>
7+
<body></body>
8+
</html>
9+
<!DOCTYPE html>
10+
<html lang="en" dir="ltr">
11+
<head>
12+
<meta charset="utf-8" />
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
14+
<title>Simon Game</title>
15+
<link
16+
rel="stylesheet"
17+
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
18+
/>
19+
20+
<link rel="stylesheet" href="styles.css" />
21+
</head>
22+
23+
<body>
24+
<div class="level">Press any key or click here to start the game.</div>
25+
<div class="container">
26+
<div lass="row">
27+
<div type="button" id="green" class="btn green"></div>
28+
29+
<div type="button" id="red" class="btn red"></div>
30+
</div>
31+
32+
<div class="row">
33+
<div type="button" id="yellow" class="btn yellow"></div>
34+
<div type="button" id="blue" class="btn blue"></div>
35+
</div>
36+
<footer>
37+
<div class="info">
38+
<a href="https://en.wikipedia.org/wiki/Simon_(game)"
39+
>WHAT IS SIMON GAME?</a
40+
>
41+
</div>
42+
<div class="social-links">
43+
<a href="https://www.linkedin.com/in/codersaty" class="profile-icon"
44+
><i class="fa fa-linkedin"></i
45+
></a>
46+
<a href="https://www.github.com/codersaty" class="profile-icon"
47+
><i class="fa fa-github"></i
48+
></a>
49+
<a href="https://www.facebook.com/codersaty" class="profile-icon"
50+
><i class="fa fa-facebook"></i
51+
></a>
52+
<a href="https://www.instagram.com/codersaty" class="profile-icon"
53+
><i class="fa fa-instagram"></i
54+
></a>
55+
<a href="https://www.twitter.com/codersaty" class="profile-icon"
56+
><i class="fa fa-twitter"></i
57+
></a>
58+
</div>
59+
<div class="bottom">
60+
<center>
61+
<span class="credit"
62+
>Created by
63+
<a href="https://codersaty.github.io">Codersaty</a></span
64+
>
65+
| <span class="fa fa-copyright"></span
66+
><span> 2020 All right Reserved.</span>
67+
</center>
68+
</div>
69+
</footer>
70+
</div>
71+
72+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
73+
<script src="index.js"></script>
74+
</body>
75+
</html>

‎Web Development/Simon game/index.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
var gamestart = false;
2+
var level = 0;
3+
$(".level").click(function () {
4+
// $(".start").fadeOut();
5+
// $(".container").fadeIn();
6+
if (gamestart == false) {
7+
nextSequence();
8+
gamestart = true;
9+
}
10+
});
11+
$(document).keypress(function () {
12+
// $(".start").fadeOut();
13+
// $(".container").fadeIn();
14+
if (gamestart == false) {
15+
nextSequence();
16+
gamestart = true;
17+
}
18+
});
19+
20+
var buttonColors = ["red", "blue", "green", "yellow"];
21+
var gamepattern = [];
22+
var userClickedPattern = [];
23+
var randomChossenColor;
24+
function nextSequence() {
25+
$(".level").text("LEVEL-" + level);
26+
level++;
27+
userClickedPattern = [];
28+
var randomNumber = Math.floor(Math.random() * 4);
29+
randomChossenColor = buttonColors[randomNumber];
30+
gamepattern.push(randomChossenColor);
31+
$("#" + randomChossenColor)
32+
.fadeOut(100)
33+
.fadeIn(100)
34+
.fadeOut(100)
35+
.fadeIn(100);
36+
playSound(randomChossenColor);
37+
}
38+
39+
$(".btn").click(function () {
40+
var userChossenColor = $(this).attr("id");
41+
userClickedPattern.push(userChossenColor);
42+
playSound(userChossenColor);
43+
animatePress(userChossenColor);
44+
checkAnswer(userClickedPattern.length - 1);
45+
});
46+
function checkAnswer(currentLevel) {
47+
if (gamepattern[currentLevel] === userClickedPattern[currentLevel]) {
48+
if (userClickedPattern.length === gamepattern.length) {
49+
setTimeout(function () {
50+
nextSequence();
51+
}, 1000);
52+
}
53+
} else {
54+
playSound("wrong");
55+
$(".level").text(
56+
"Game Over. Press any key or click on the screen to restart."
57+
);
58+
59+
startOver();
60+
}
61+
}
62+
function playSound(name) {
63+
var audio = new Audio("sounds/" + name + ".mp3");
64+
audio.play();
65+
}
66+
function animatePress(name) {
67+
$("#" + name).addClass("pressed");
68+
setTimeout(function () {
69+
$("#" + name).removeClass("pressed");
70+
}, 100);
71+
}
72+
function startOver() {
73+
level = 0;
74+
gamepattern = [];
75+
gamestart = false;
76+
}

‎Web Development/Simon game/sounds/blue.mp3‎

3.56 KB
Binary file not shown.

‎Web Development/Simon game/sounds/green.mp3‎

17.3 KB
Binary file not shown.

‎Web Development/Simon game/sounds/red.mp3‎

16.3 KB
Binary file not shown.

‎Web Development/Simon game/sounds/wrong.mp3‎

7.74 KB
Binary file not shown.

‎Web Development/Simon game/sounds/yellow.mp3‎

10.8 KB
Binary file not shown.

‎Web Development/Simon game/styles.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
body {
2+
text-align: center;
3+
color: #fff;
4+
background-color: #011f3f;
5+
font-family: "Roboto", "cursive", sans-serif;
6+
}
7+
8+
.level {
9+
margin-top: 3rem;
10+
font-size: 3rem;
11+
font-family: cursive;
12+
margin-bottom: 1rem;
13+
}
14+
.container {
15+
height: 73vh;
16+
width: 100vw;
17+
overflow-x: hidden;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
flex-direction: column;
22+
}
23+
24+
.btn {
25+
margin: 25px;
26+
margin-top: 0;
27+
display: inline-block;
28+
height: 200px;
29+
width: 200px;
30+
border: 10px solid black;
31+
border-radius: 20%;
32+
}
33+
@media only screen and (max-width: 500px) {
34+
.btn {
35+
height: 100px;
36+
width: 100px;
37+
border: 5px solid black;
38+
border-radius: 20%;
39+
}
40+
}
41+
42+
.red {
43+
background-color: red;
44+
}
45+
46+
.green {
47+
background-color: green;
48+
}
49+
50+
.blue {
51+
background-color: blue;
52+
}
53+
54+
.yellow {
55+
background-color: yellow;
56+
}
57+
58+
.pressed {
59+
box-shadow: 0 0 20px white;
60+
background-color: grey;
61+
}
62+
.info a {
63+
color: white;
64+
text-decoration: none;
65+
}
66+
.social-links {
67+
margin: 20px 0 0 0;
68+
}
69+
.social-links a {
70+
padding: 0 2px;
71+
}
72+
.social-links a i {
73+
height: 40px;
74+
width: 40px;
75+
background: #1a1a1a;
76+
line-height: 40px;
77+
text-align: center;
78+
font-size: 18px;
79+
border-radius: 50%;
80+
transition: 1s;
81+
}
82+
.social-links a i:hover {
83+
background: #fff;
84+
}
85+
.bottom center {
86+
margin-top: 1rem;
87+
padding: 5px;
88+
font-size: 1rem;
89+
}
90+
.bottom center span {
91+
color: #fff;
92+
}
93+
.bottom center a {
94+
color: #e94560;
95+
text-decoration: none;
96+
}
97+
.bottom center a:hover {
98+
text-decoration: none;
99+
}
100+
.visibility {
101+
display: none;
102+
}

0 commit comments

Comments
 (0)