Skip to content

Commit a993326

Browse files
coder-writescoder-writes
authored
Simon Game Project Files
Simon Game is a classic memory game built using HTML, CSS, and JavaScript. The game challenges players to replicate increasingly complex patterns of button presses, testing memory and focus.
1 parent 8228efe commit a993326

File tree

4 files changed

+185
-0
lines changed

4 files changed

+185
-0
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎game.js‎

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

‎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 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+
38+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
39+
<script src="game.js"></script>
40+
</body>
41+
42+
</html>

‎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: #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+
}

0 commit comments

Comments
 (0)