Skip to content

Commit 46f55ad

Browse files
NiranjanMeghwalNiranjanMeghwal
committed
added simon game
1 parent 593d5fb commit 46f55ad

File tree

8 files changed

+181
-0
lines changed

8 files changed

+181
-0
lines changed

‎SimonGame/NiranjanMeghwal/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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 rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap" rel="stylesheet">
11+
</head>
12+
13+
<body>
14+
<h1 id="level-title">Press Any Key to Start</h1>
15+
<div class="container">
16+
<div lass="row">
17+
18+
<div type="button" id="green" class="btn green">
19+
20+
</div>
21+
22+
<div type="button" id="red" class="btn red">
23+
24+
</div>
25+
</div>
26+
27+
<div class="row">
28+
29+
<div type="button" id="yellow" class="btn yellow">
30+
31+
</div>
32+
<div type="button" id="blue" class="btn blue">
33+
34+
</div>
35+
36+
</div>
37+
38+
</div>
39+
40+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
41+
<script src="index.js" charset="utf-8"></script>
42+
43+
</body>
44+
45+
</html>

‎SimonGame/NiranjanMeghwal/index.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
var btnclr = ["green","red","blue","yellow"];
2+
3+
var pattern = [];
4+
var userPtrn = [];
5+
6+
var level = 0;
7+
var started = false;
8+
9+
$(document).keypress(function () {
10+
if(!started)
11+
{
12+
$("#level-title").text("Level " + level);
13+
newSeq();
14+
started = true;
15+
}
16+
});
17+
18+
$(".btn").click(function(){
19+
if(started)
20+
{
21+
userPtrn.push($(this).attr('id'));
22+
animatePress($(this).attr('id'));
23+
playSound($(this).attr('id'));
24+
console.log(userPtrn);
25+
}
26+
});
27+
28+
29+
function newSeq() {
30+
userPtrn = [];
31+
32+
level++;
33+
$("#level-title").text("Level " + level);
34+
35+
var random = Math.floor(Math.random()*4);
36+
var randomClr = btnclr[random];
37+
38+
pattern.push(randomClr);
39+
$("#" + randomClr).fadeIn(100).fadeOut(100).fadeIn(100);
40+
playSound(randomClr);
41+
}
42+
43+
function playSound(name)
44+
{
45+
var aud = new Audio('sounds/' + name + '.mp3');
46+
aud.play();
47+
}
48+
49+
function animatePress(currentClr){
50+
$('#' + currentClr).addClass('pressed');
51+
52+
setTimeout(function() {
53+
$('#' + currentClr).removeClass('pressed');
54+
},100);
55+
checkAnswer(userPtrn.length - 1);
56+
}
57+
58+
function checkAnswer(level) {
59+
if(pattern[level] === userPtrn[level])
60+
{
61+
console.log("success");
62+
if(pattern.length === userPtrn.length)
63+
{
64+
setTimeout(function(){
65+
newSeq();
66+
},1000);
67+
}
68+
} else {
69+
playSound("wrong");
70+
$("body").addClass("game-over");
71+
setTimeout(function() {
72+
$("body").removeClass("game-over");
73+
},200);
74+
$("#level-title").html("GAME-OVER !!"+"<br/>"+"( Press Any Key to Restart )");
75+
startOver();
76+
}
77+
}
78+
79+
function startOver() {
80+
level = 0;
81+
pattern = [];
82+
started = false;
83+
}

‎SimonGame/NiranjanMeghwal/sounds/blue.mp3

6.08 KB
Binary file not shown.

‎SimonGame/NiranjanMeghwal/sounds/green.mp3

21.7 KB
Binary file not shown.

‎SimonGame/NiranjanMeghwal/sounds/red.mp3

18.4 KB
Binary file not shown.

‎SimonGame/NiranjanMeghwal/sounds/wrong.mp3

48.2 KB
Binary file not shown.

‎SimonGame/NiranjanMeghwal/sounds/yellow.mp3

10.8 KB
Binary file not shown.

‎SimonGame/NiranjanMeghwal/styles.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body {
2+
text-align: center;
3+
background-color: #6D8299;
4+
}
5+
6+
#level-title {
7+
font-family: 'Odibee Sans';
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: #FF5C58;
36+
}
37+
38+
.green {
39+
background-color: #B1E693;
40+
}
41+
42+
.blue {
43+
background-color: #B5DEFF;
44+
}
45+
46+
.yellow {
47+
background-color: #FFFD95;
48+
}
49+
50+
.pressed {
51+
box-shadow: 0 0 20px white;
52+
background-color: grey;
53+
}

0 commit comments

Comments
 (0)