Skip to content

Commit aad5746

Browse files
IshitaPathakIshitaPathak
committed
simon_game
1 parent cf9676e commit aad5746

File tree

8 files changed

+183
-0
lines changed

8 files changed

+183
-0
lines changed

‎Fronted Projects/Simon_Game/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Simon_Game</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Rubik+Vinyl&family=Secular+One&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
<h1>Press any key to Start</h1>
13+
<div class="container">
14+
<button id="red" class="container1 btn"></button>
15+
<button id="yellow" class="container2 btn"></button>
16+
<button id="green" class="container3 btn"></button>
17+
<button id="blue" class="container4 btn"></button>
18+
</div>
19+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
20+
<script src="index.js"></script>
21+
</body>
22+
</html>

‎Fronted Projects/Simon_Game/index.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
2+
var colors = ["blue", "red", "yellow", "green"]
3+
var gamePattern = []
4+
var userClickPattern = []
5+
var start = false
6+
var levelNumber = 1
7+
8+
//This function genetrates random color and push that random color in array gamePattern
9+
function colorGenerator() {
10+
var randomNumber = Math.floor(Math.random() * 4)
11+
var randomColor = colors[randomNumber]
12+
gamePattern.push(randomColor)
13+
// console.log(gamePattern)
14+
}
15+
16+
17+
$(document).on("keypress", function () {
18+
if (!start) {
19+
colorGenerator()
20+
showGamePattern()
21+
$("h1").text("Level-" + levelNumber)
22+
start = true
23+
// console.log(gamePattern)
24+
}
25+
})
26+
27+
28+
for (var i = 0; i < 4; i++)
29+
document.querySelectorAll(".btn")[i].addEventListener("click", function (event) {
30+
if (start) {
31+
var userClickButtonColor = event.target.id
32+
userClickPattern.push(userClickButtonColor)
33+
// console.log(userClickPattern)
34+
35+
animation(userClickButtonColor)
36+
createSound(userClickButtonColor)
37+
38+
if (sublist() && userClickPattern.length == gamePattern.length) {
39+
levelNumber++
40+
userClickPattern = []
41+
colorGenerator()
42+
showGamePattern()
43+
$("h1").text("Level-" + levelNumber)
44+
console.log(gamePattern)
45+
}
46+
else if (!sublist()) {
47+
gameOver()
48+
}
49+
}
50+
})
51+
52+
53+
// for animation when button is clicked
54+
function animation(color) {
55+
$("#" + color).addClass("animate")
56+
57+
setTimeout(function () {
58+
$("#" + color).removeClass("animate")
59+
}, 90)
60+
}
61+
62+
function createSound(color) {
63+
var audio = new Audio("sound/sounds_" + color + ".mp3")
64+
audio.play()
65+
}
66+
67+
68+
function showGamePattern() {
69+
var i = 0;
70+
var pattern = setInterval(thisFunction, 1200)
71+
72+
function thisFunction() {
73+
if (i < gamePattern.length) {
74+
var currentColor = gamePattern[i]
75+
animation(currentColor)
76+
createSound(currentColor)
77+
i++
78+
}
79+
else {
80+
clearInterval(pattern)
81+
}
82+
}
83+
}
84+
85+
function sublist() {
86+
for (var n = 0; n < userClickPattern.length; n++) {
87+
if (userClickPattern[n] != gamePattern[n])
88+
return false
89+
}
90+
91+
return true
92+
93+
}
94+
95+
function gameOver() {
96+
levelNumber = 1
97+
userClickPattern = []
98+
gamePattern = []
99+
start = false
100+
101+
$("body").addClass("out")
102+
$("h1").text("GAME OVER!🙁")
103+
104+
setTimeout(function () {
105+
$("body").removeClass("out")
106+
$("h1").text("Press any key to restart")
107+
}, 1000)
108+
109+
110+
var audio = new Audio("sound/game_over.mp3")
111+
audio.play()
112+
}

‎Fronted Projects/Simon_Game/sound/game_over.mp3‎

27.2 KB
Binary file not shown.

‎Fronted Projects/Simon_Game/sound/sounds_blue.mp3‎

3.56 KB
Binary file not shown.

‎Fronted Projects/Simon_Game/sound/sounds_green.mp3‎

17.3 KB
Binary file not shown.

‎Fronted Projects/Simon_Game/sound/sounds_red.mp3‎

16.3 KB
Binary file not shown.

‎Fronted Projects/Simon_Game/sound/sounds_yellow.mp3‎

10.8 KB
Binary file not shown.

‎Fronted Projects/Simon_Game/style.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
body {
2+
background-color: #263159;
3+
}
4+
h1{
5+
text-align:center;
6+
color:beige;
7+
font-size:5rem;
8+
font-family: 'Secular One', sans-serif;
9+
}
10+
.container{
11+
display: block;
12+
margin-left: auto;
13+
margin-right: auto;
14+
width: 40%;
15+
}
16+
.container1,.container2,.container3,.container4 {
17+
padding: 45px;
18+
margin: 17px;
19+
display: inline-block;
20+
border: solid bold;
21+
border-radius: 15%;
22+
border-color: rgb(19, 18, 18);
23+
width: 200px;
24+
height: 200px;
25+
border-width:10px;
26+
}
27+
.container1{
28+
background-color: red;
29+
cursor: pointer;
30+
}
31+
.container2{
32+
background-color:#FFBF00;
33+
cursor: pointer;
34+
}
35+
.container3{
36+
background-color: #54B435;
37+
cursor: pointer;
38+
}
39+
.container4{
40+
background-color: #2192FF;
41+
cursor: pointer;
42+
}
43+
.animate{
44+
box-shadow:0 0 15px white;
45+
background-color:rgb(24, 18, 18);
46+
}
47+
.out{
48+
background-color: rgb(131, 34, 34);
49+
}

0 commit comments

Comments
 (0)