Skip to content

Commit 9b049de

Browse files
patnaikankitpatnaikankit
committed
simon game
1 parent 7b05683 commit 9b049de

10 files changed

Lines changed: 242 additions & 0 deletions

File tree

‎Projects/Simon Game/.DS_Store‎

6 KB
Binary file not shown.

‎Projects/Simon Game/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
## Objective of my project
2+
3+
- Simon Game
4+
5+
## What task does it do?
6+
7+
- The task of the Simon game challenge is to reproduce the sequence of colors and sounds shown to the player. The player's goal is to repeat the exact sequence, which gradually becomes longer and more complex as the game progresses. The challenge tests the player's memory as well as his ability to recall and reproduce a given pattern.
8+
9+
- The game will start with a sequence of colors and sounds played by the computer, which the player must then repeat. The player's input is compared with the original string, and if it matches, the game moves on to the next level with the extended sequence. If the player moves incorrectly, the game ends, and their score is displayed.
10+
11+
Overall, the Simon Game Challenge provides a fun way to practice and improve memory skills.
12+
13+
14+
## Tech-Stack
15+
16+
- I used HTML, CSS and JAVASCRIPT .
17+
18+
19+
## Run Locally
20+
21+
- install live server extension
22+
- Open index.html
23+
- click on live server

‎Projects/Simon Game/game.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
var gamePattern = [];
2+
var userClickedPattern = [];
3+
4+
var buttonColours = ["red", "blue", "green", "yellow"];
5+
6+
var started = false;
7+
var level = 0;
8+
var highest = 0;
9+
10+
11+
$(".btn").click(function(){
12+
var userChosenColour = $(this).attr("id");
13+
userClickedPattern.push(userChosenColour);
14+
playSound(userChosenColour);
15+
animatePress(userChosenColour);
16+
checkAnswer(userClickedPattern.length - 1);
17+
});
18+
19+
20+
$(document).keypress(function() {
21+
if (!started) {
22+
$("#level-title").text("Level " + level);
23+
nextSequence();
24+
started = true;
25+
}
26+
});
27+
28+
29+
30+
function checkAnswer(currentLevel) {
31+
if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
32+
// console.log("success");
33+
if (userClickedPattern.length === gamePattern.length){
34+
setTimeout(function () {
35+
nextSequence();
36+
}, 1000);
37+
}
38+
}
39+
else{
40+
// console.log("wrong");
41+
playSound("wrong");
42+
$("body").addClass("game-over");
43+
setTimeout(function () {
44+
$("body").removeClass("game-over");
45+
}, 200);
46+
$("#level-title").text("Game Over, Press Any Key to Restart");
47+
startOver();
48+
}
49+
50+
}
51+
52+
53+
function nextSequence(){
54+
userClickedPattern = [];
55+
level++;
56+
$("#level-title").text("Level " + level);
57+
58+
var randomNumber = Math.random()*4;
59+
randomNumber = Math.floor(randomNumber);
60+
var randomChosenColour = buttonColours[randomNumber];
61+
gamePattern.push(randomChosenColour);
62+
$("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
63+
playSound(randomChosenColour);
64+
}
65+
66+
67+
var audio = new Audio("sounds/" + randomChosenColour +".mp3");
68+
audio.play();
69+
70+
71+
function playSound(name){
72+
var audio = new Audio("sounds/" + name + ".mp3");
73+
audio.play();
74+
}
75+
76+
function animatePress(currentColor) {
77+
$("#" + currentColor).addClass("pressed");
78+
setTimeout(function () {
79+
$("#" + currentColor).removeClass("pressed");
80+
}, 100);
81+
}
82+
83+
84+
$(".btn").click(function() {
85+
86+
var userChosenColour = $(this).attr("id");
87+
userClickedPattern.push(userChosenColour);
88+
playSound(userChosenColour);
89+
animatePress(userChosenColour);
90+
checkAnswer(userClickedPattern.length - 1);
91+
});
92+
93+
94+
95+
$(document).keypress(function() {
96+
if (!started) {
97+
$("#level-title").text("Level " + level);
98+
nextSequence();
99+
started = true;
100+
}
101+
});
102+
103+
104+
105+
106+
function startOver() {
107+
level = 0;
108+
gamePattern = [];
109+
started = false;
110+
}
111+
112+
function startOver() {
113+
if (level > highest) highest = level;
114+
$("#highest").text("Highest reached level : " + highest);
115+
started = false;
116+
level = 0;
117+
gamePattern = [];
118+
}

‎Projects/Simon Game/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
<h2 id="highest">Highest reached level : 0</h2>
14+
<div class="container">
15+
<div lass="row">
16+
17+
<div type="button" id="green" class="btn green">
18+
19+
</div>
20+
21+
<div type="button" id="red" class="btn red">
22+
23+
</div>
24+
</div>
25+
26+
<div class="row">
27+
28+
<div type="button" id="yellow" class="btn yellow">
29+
30+
</div>
31+
<div type="button" id="blue" class="btn blue">
32+
33+
</div>
34+
35+
</div>
36+
37+
</div>
38+
39+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
40+
<script src="game.js" charset="utf-8"></script>
41+
42+
</body>
43+
44+
</html>

‎Projects/Simon Game/sounds/blue.mp3‎

3.56 KB
Binary file not shown.

‎Projects/Simon Game/sounds/green.mp3‎

17.3 KB
Binary file not shown.

‎Projects/Simon Game/sounds/red.mp3‎

16.3 KB
Binary file not shown.

‎Projects/Simon Game/sounds/wrong.mp3‎

7.74 KB
Binary file not shown.

‎Projects/Simon Game/sounds/yellow.mp3‎

10.8 KB
Binary file not shown.

‎Projects/Simon Game/styles.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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+
#highest {
21+
color: #fef2bf;
22+
}
23+
24+
.btn {
25+
margin: 25px;
26+
display: inline-block;
27+
height: 200px;
28+
width: 200px;
29+
border: 10px solid black;
30+
border-radius: 20%;
31+
}
32+
33+
.game-over {
34+
background-color: red;
35+
opacity: 0.8;
36+
}
37+
38+
.red {
39+
background-color: red;
40+
}
41+
42+
.green {
43+
background-color: green;
44+
}
45+
46+
.blue {
47+
background-color: blue;
48+
}
49+
50+
.yellow {
51+
background-color: yellow;
52+
}
53+
54+
.pressed {
55+
box-shadow: 0 0 20px white;
56+
background-color: grey;
57+
}

0 commit comments

Comments
 (0)