Skip to content

Commit bb180b8

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #12 from Eswari-Priya/memory_testing
added a memory testing puzzle game
2 parents 246e142 + 181d7aa commit bb180b8

9 files changed

Lines changed: 180 additions & 0 deletions

File tree

‎Simon Game/.DS_Store‎

6 KB
Binary file not shown.

‎Simon Game/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Simon</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
<h1 id="level-title">Press A Key to Start</h1>
13+
<div class="container">
14+
<div class="row">
15+
16+
<div type="button" id="green" class="btn green">
17+
18+
</div>
19+
20+
<div type="button" id="red" class="btn red">
21+
22+
</div>
23+
</div>
24+
25+
<div class="row">
26+
27+
<div type="button" id="yellow" class="btn yellow">
28+
29+
</div>
30+
<div type="button" id="blue" class="btn blue">
31+
32+
</div>
33+
34+
</div>
35+
36+
</div>
37+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
38+
<script src="index.js"></script>
39+
</body>
40+
41+
</html>

‎Simon Game/index.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
var list = document.querySelectorAll(".btn");
2+
var seq = [];
3+
var colors = ["red","green","yellow","blue"];
4+
var count = 0;
5+
var clicks = 0;
6+
var level = 0;
7+
8+
function highlight(i){
9+
setTimeout(()=>{
10+
$("#"+seq[i]).addClass("animate");
11+
$("#"+seq[i]).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).delay(100); //for flash effect
12+
PlayAudio(seq[i]);
13+
},(i)*1000+100);
14+
setTimeout(()=>{
15+
$("#"+seq[i]).removeClass("animate")
16+
},(i+1)*1000);
17+
}
18+
19+
function PlayAudio(evt){
20+
var audio = new Audio("sounds/"+evt+".mp3");
21+
audio.play();
22+
}
23+
24+
function startOver(){
25+
seq=[];
26+
count = 0;
27+
clicks = 0;
28+
level = 0;
29+
$("h1").text("Press any color to start the game");
30+
}
31+
32+
function LetsPlay(evt){
33+
34+
//debugger
35+
if(level == 0){
36+
seq.push(evt.id);
37+
count++;
38+
clicks++;
39+
}
40+
else if(evt.id != seq[clicks++]){ //Game Over!!!
41+
42+
var audio = new Audio("sounds/"+"wrong"+".mp3");
43+
audio.play();
44+
$("body").addClass("game-over");
45+
setTimeout(function(){
46+
$("body").removeClass("game-over")
47+
},300);
48+
$("h1").text( "Game Over, Press Any Key to Restart");
49+
document.addEventListener("keyup",function(){
50+
startOver();
51+
})
52+
return;
53+
}
54+
if(clicks==count){ //Next Level
55+
var randval = Math.floor(Math.random()*4); //Generating next color
56+
seq.push(colors[randval]);
57+
count++;
58+
level++;
59+
clicks = 0;
60+
$("h1").text("LEVEL "+level);
61+
for(var i=0;i<seq.length;i++)
62+
highlight(i);
63+
}
64+
}
65+
66+
67+
68+
for(var i=0;i<list.length;i++){
69+
list[i].addEventListener("click",function(){
70+
var id = this.id;
71+
$("#"+this.id).addClass("pressed"); //to show an effect when user clicks on a specific tile
72+
setTimeout(function(){
73+
$("#"+id).removeClass("pressed");
74+
},300);
75+
PlayAudio(this.id);
76+
LetsPlay(this);
77+
});
78+
}

‎Simon Game/sounds/blue.mp3‎

3.56 KB
Binary file not shown.

‎Simon Game/sounds/green.mp3‎

17.3 KB
Binary file not shown.

‎Simon Game/sounds/red.mp3‎

16.3 KB
Binary file not shown.

‎Simon Game/sounds/wrong.mp3‎

7.74 KB
Binary file not shown.

‎Simon Game/sounds/yellow.mp3‎

10.8 KB
Binary file not shown.

‎Simon Game/styles.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
text-align: center;
3+
background-color: #011F3F;
4+
}
5+
6+
#level-title {
7+
font-family: 'Press Start 2P', cursive;
8+
font-size: 3rem;
9+
margin: 5%;
10+
color: #FEF2BF;
11+
}
12+
13+
.container {
14+
display: block;
15+
width: 50%;
16+
margin: auto;
17+
18+
}
19+
20+
.btn {
21+
margin: 25px;
22+
display: inline-block;
23+
height: 200px;
24+
width: 200px;
25+
border: 10px solid black;
26+
border-radius: 20%;
27+
}
28+
29+
.game-over {
30+
background-color: red;
31+
opacity: 0.8;
32+
}
33+
34+
.red {
35+
background-color: red;
36+
}
37+
38+
.green {
39+
background-color: green;
40+
}
41+
42+
.blue {
43+
background-color: blue;
44+
}
45+
46+
.yellow {
47+
background-color: yellow;
48+
}
49+
50+
.pressed {
51+
box-shadow: 0 0 20px white;
52+
background-color: grey;
53+
}
54+
55+
.activated{
56+
border: "2px solid #fff";
57+
}
58+
59+
.animate{
60+
border: 10px double violet;
61+
}

0 commit comments

Comments
 (0)