Skip to content

Commit 8a49c32

Browse files
thinkswellthinkswell
authored
Merge pull request #651 from Paresh-95/SimonGame-Paresh-95
Added Simon Game
2 parents 5de2b33 + ee2be03 commit 8a49c32

File tree

9 files changed

+176
-0
lines changed

9 files changed

+176
-0
lines changed

‎SimonGame/Paresh-95/Readme.md‎

Whitespace-only changes.

‎SimonGame/Paresh-95/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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 lass="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+
38+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
39+
<script src="index.js"></script>
40+
</body>
41+
42+
</html>

‎SimonGame/Paresh-95/index.js‎

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

‎SimonGame/Paresh-95/sounds/blue.mp3‎

3.56 KB
Binary file not shown.

‎SimonGame/Paresh-95/sounds/green.mp3‎

17.3 KB
Binary file not shown.

‎SimonGame/Paresh-95/sounds/red.mp3‎

16.3 KB
Binary file not shown.

‎SimonGame/Paresh-95/sounds/wrong.mp3‎

7.74 KB
Binary file not shown.

‎SimonGame/Paresh-95/sounds/yellow.mp3‎

10.8 KB
Binary file not shown.

‎SimonGame/Paresh-95/styles.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Pixelify+Sans&display=swap');
2+
3+
body {
4+
text-align: center;
5+
background: linear-gradient(45deg, #e66465, #9198e5);
6+
}
7+
8+
#level-title {
9+
font-family: 'Bebas Neue', sans-serif;
10+
font-size: 5rem;
11+
margin: 5%;
12+
color: #FFCD4B;
13+
}
14+
15+
.container {
16+
display: block;
17+
width: 50%;
18+
margin: auto;
19+
20+
}
21+
22+
.btn {
23+
margin: 25px;
24+
display: inline-block;
25+
height: 200px;
26+
width: 200px;
27+
border: 10px solid black;
28+
border-radius: 20%;
29+
}
30+
31+
.game-over {
32+
background-color: red;
33+
opacity: 0.8;
34+
}
35+
36+
.red {
37+
background-color: red;
38+
}
39+
40+
.green {
41+
background-color: green;
42+
}
43+
44+
.blue {
45+
background-color: blue;
46+
}
47+
48+
.yellow {
49+
background-color: yellow;
50+
}
51+
52+
.pressed {
53+
box-shadow: 0 0 20px white;
54+
background-color: grey;
55+
}

0 commit comments

Comments
 (0)