Shivang10799
diff --git a/Diff for: ‎javascript/the-simon-game/gameFiles.js
+68 b/Diff for: ‎javascript/the-simon-game/gameFiles.js
+68
diff --git a/Diff for: ‎javascript/the-simon-game/index.html
+31 b/Diff for: ‎javascript/the-simon-game/index.html
+31
diff --git a/Diff for: ‎javascript/the-simon-game/sounds/blue.mp3
3.56 KB b/Diff for: ‎javascript/the-simon-game/sounds/blue.mp3
3.56 KB
diff --git a/Diff for: ‎javascript/the-simon-game/sounds/green.mp3
17.3 KB b/Diff for: ‎javascript/the-simon-game/sounds/green.mp3
17.3 KB
diff --git a/Diff for: ‎javascript/the-simon-game/sounds/red.mp3
16.3 KB b/Diff for: ‎javascript/the-simon-game/sounds/red.mp3
16.3 KB
diff --git a/Diff for: ‎javascript/the-simon-game/sounds/wrong.mp3
7.74 KB b/Diff for: ‎javascript/the-simon-game/sounds/wrong.mp3
7.74 KB
diff --git a/Diff for: ‎javascript/the-simon-game/sounds/yellow.mp3
10.8 KB b/Diff for: ‎javascript/the-simon-game/sounds/yellow.mp3
10.8 KB
diff --git a/Diff for: ‎javascript/the-simon-game/styles.css
+53 b/Diff for: ‎javascript/the-simon-game/styles.css
+53
@@ -0,0 +1,68 @@
+var buttonColours = ["red", "blue", "green", "yellow"];
+var gamePattern = [];
+var userClickedPattern = [];
+var level = 0;
+var flag = 0;
+
+$(document).keydown(function () {
+  if (flag === 0) {
+    nextSequence();
+  }
+});
+
+function nextSequence() {
+  level = level + 1;
+  flag = 1;
+  $("#level-title").text(`Level ${level}`);
+  randomNumber = Math.floor(Math.random() * 4);
+  var randomChosenColour = buttonColours[randomNumber];
+  gamePattern.push(randomChosenColour);
+  $(`#${randomChosenColour}`).fadeOut(100).fadeIn(100);
+  playSound(randomChosenColour);
+}
+
+function startOver() {
+  level = 0;
+  gamePattern = [];
+  userClickedPattern = [];
+  flag = 0;
+}
+
+function playSound(name) {
+  var sound = new Audio("./sounds/" + name + ".mp3");
+  sound.play();
+}
+
+function animatePress(currentColour) {
+  $(`#${currentColour}`).addClass("pressed");
+  setTimeout(function () {
+    document.getElementById(`${currentColour}`).classList.remove("pressed");
+  }, 100);
+}
+
+function checkAnswer(lastIndex) {
+  if (userClickedPattern[lastIndex] === gamePattern[lastIndex]) {
+    if (JSON.stringify(userClickedPattern) == JSON.stringify(gamePattern)) {
+      setTimeout(function () {
+        nextSequence();
+        userClickedPattern = [];
+      }, 1000);
+    }
+  } else {
+    playSound("wrong");
+    $("body").addClass("game-over");
+    setTimeout(function () {
+      $("body").removeClass("game-over");
+    }, 200);
+    $("#level-title").text("Game Over, Press Any Key to Restart");
+    startOver();
+  }
+}
+
+$(".btn").click(function () {
+  var userChosenColour = $(this).attr("id");
+  playSound(userChosenColour);
+  animatePress(userChosenColour);
+  userClickedPattern.push(userChosenColour);
+  checkAnswer(userClickedPattern.length - 1);
+});
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Simon</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Press+Start+2P"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <h1 id="level-title">Press A Key to Start</h1>
+    <div class="container">
+      <div lass="row">
+        <div type="button" id="green" class="btn green"></div>
+
+        <div type="button" id="red" class="btn red"></div>
+      </div>
+
+      <div class="row">
+        <div type="button" id="yellow" class="btn yellow"></div>
+        <div type="button" id="blue" class="btn blue"></div>
+      </div>
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+    <script src="./gameFiles.js"></script>
+  </body>
+</html>
@@ -0,0 +1,53 @@
+body {
+  text-align: center;
+  background-color: #011F3F;
+}
+
+#level-title {
+  font-family: 'Press Start 2P', cursive;
+  font-size: 3rem;
+  margin:  5%;
+  color: #FEF2BF;
+}
+
+.container {
+  display: block;
+  width: 50%;
+  margin: auto;
+
+}
+
+.btn {
+  margin: 25px;
+  display: inline-block;
+  height: 200px;
+  width: 200px;
+  border: 10px solid black;
+  border-radius: 20%;
+}
+
+.game-over {
+  background-color: red;
+  opacity: 0.8;
+}
+
+.red {
+  background-color: red;
+}
+
+.green {
+  background-color: green;
+}
+
+.blue {
+  background-color: blue;
+}
+
+.yellow {
+  background-color: yellow;
+}
+
+.pressed {
+  box-shadow: 0 0 20px white;
+  background-color: grey;
+}