feat: add new button, toggle music & improve code

README.md

@@ -7,4 +7,4 @@ Simon Game is my first project built with JavaScript after 2 days (~21.58 hours)
 ### Indonesia
 Simon Game adalah proyek pertama saya yang dibuat menggunakan JavaScript setelah belajar selama 2 hari (~21,58 jam). Game ini menguji memori pemain dengan pola warna dan suara yang semakin kompleks di setiap level. Proyek ini menggunakan HTML, CSS, jQuery, dan JavaScript. Meskipun mungkin hasilnya belum sempurna, saya tetap bangga dengan apa yang telah saya capai. Proyek ini adalah langkah awal saya dalam memahami konsep dasar DOM, animasi, dan event handling dalam JavaScript.
 
-![Demo](https://github.com/triliun/simon-game/blob/a0e60b54dcd5bf8d8b250c32045c56de69046304/image.png)
+![Demo](https://github.com/triliun/simon-game/blob/master/image.png)

game.js

@@ -1,67 +1,52 @@
-var userClickedPattern = [];
-var gamePattern = [];
-var randomNumber;
-var buttonColours = ["red", "blue", "green", "yellow"];
-var levelGame = 0;
-var gameStart = false;
-var clickBtn = false;
-
-
-function animationStart(counter) { 
-  clickBtn = true;
-
+const buttonColours = ["red", "blue", "green", "yellow", "orange", "purple", "pink", "gray"];
+let userClickedPattern = [];
+let gamePattern = [];
+let randomNumber = 0;
+let levelGame = 0;
+let gameStart = false;
+let clickBtn = false;
+let soundStatus = false;
+
+function playsound(nameSound) {
+  if (!soundStatus) {
+    const sound = new Audio(`assets/sounds/${nameSound}.mp3`);
+    sound.play();
+  }
+}
+
+function animationStart(counter) {
+  clickBtn = false;
+
   setTimeout(function () {
-    $(`#${gamePattern[counter]}`).fadeOut(100).fadeIn(100);
-    playSound(gamePattern[counter]);
+    $(`#${gamePattern[counter]}`).addClass("active");
+    playsound(gamePattern[counter]);
   }, counter * 500);
 
   setTimeout(function () {
-    if (counter === gamePattern.length - 1) { 
-      clickBtn = false;
+    $(`#${gamePattern[counter]}`).removeClass("active");
+  }, counter * 500 + 300);
+
+  setTimeout(function () {
+    if (counter === gamePattern.length - 1) {
+      clickBtn = true;
     }
-  }, counter * 800); 
+  }, counter * 700);
 }
 
 function nextSequence() {
   gameStart = true;
+  randomNumber = Math.floor(Math.random() * 8);
   levelGame++;
-  randomNumber = Math.floor(Math.random() * 4);
-  var randomChosenColour = buttonColours[randomNumber];
-  gamePattern.push(randomChosenColour);
+
+  const randomColor = buttonColours[randomNumber];
+  gamePattern.push(randomColor);
   $("h1").text(`Level ${levelGame}`);
 
   for (let i = 0; i < gamePattern.length; i++) {
     animationStart(i);
   }
 }
 
-
-$(document).keydown(function () {
-  if (gameStart === true) {
-    return;
-  }
-  nextSequence();
-});
-
-$(".btn").click(function () {
-  if (gameStart === false || clickBtn === true) {
-    return;
-  }
-  var userChosenColour = $(this).attr("id");
-  $(`#${userChosenColour}`).fadeOut(100).fadeIn(100);
-  // $(`#${userChosenColour}`).addClass("pressed");
-  userClickedPattern.push(userChosenColour);
-  playSound(userChosenColour);
-
-  setTimeout(function () {
-    $(`#${userChosenColour}`).removeClass("pressed");
-  }, 100);
-
-  var currentLevel = userClickedPattern.length - 1;
-
-  checkAnswer(currentLevel);
-});
-
 function checkAnswer(currentLevel) {
   if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
     if (gamePattern.length === userClickedPattern.length) {
@@ -74,25 +59,54 @@ function checkAnswer(currentLevel) {
 
 function nextLevel() {
   setTimeout(function () {
-    nextSequence();
     userClickedPattern = [];
+    nextSequence();
   }, 1000);
 }
 
 function startOver() {
-  gameStart = false;
+  setTimeout(function () {
+    gameStart = false;
+  }, 1100);
   gamePattern = [];
   userClickedPattern = [];
   levelGame = 0;
-  playSound("wrong");
-  $("h1").text("Game Over, Press Any Key to Restart");
+  playsound("wrong");
+  $("#level_title").text("Game Over, Click Anywhere To Restart");
   $("body").addClass("game-over");
   setTimeout(function () {
     $("body").removeClass("game-over");
   }, 200);
 }
 
-function playSound(currentKey) {
-  var audio = new Audio(`sounds/${currentKey}.mp3`);
-  audio.play();
-}
+$("#sound_button").click(function () {
+  if (!soundStatus) {
+    soundStatus = true;
+  } else {
+    soundStatus = false;
+  }
+  $(this).toggleClass("mute");
+});
+
+$(document).click(function () {
+  if (gameStart !== true) {
+    nextSequence();
+  }
+});
+
+$(".btn").click(function () {
+  if (gameStart === false || clickBtn === false) {
+    return;
+  }
+  const userChosenColour = $(this).attr("id");
+  $(`#${userChosenColour}`).addClass("active");
+  userClickedPattern.push(userChosenColour);
+
+  const currentLevel = userClickedPattern.length - 1;
+  checkAnswer(currentLevel);
+  playsound(userChosenColour);
+
+  setTimeout(function () {
+    $(`#${userChosenColour}`).removeClass("active");
+  }, 100);
+});

index.html

@@ -1,42 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Simon Game</title>
-  <link rel="stylesheet" href="styles.css">
-  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Simon Game</title>
+    <meta
+      name="description"
+      content="Simon Game is my first project using JavaScript after 2 days (~21.58 hours) of learning. It tests memory with color and sound patterns. Built with HTML, CSS, and jQuery, it may not be perfect, but I'm proud of it as my first step into DOM, animations, and event handling."
+    />
+    <meta name="title" content="Simon Game" />
+    <meta
+      name="description"
+      content=" Simon Game is my first project using JavaScript after 2 days (~21.58 hours) of learning. It tests memory with color and sound patterns. Built with HTML, CSS, and jQuery, it may not be perfect, but I'm proud of it as my first step into DOM, animations, and event handling. "
+    />
 
-<body>
-  <h1 id="level-title">Press A Key to Start</h1>
-  <div class="container">
-    <div class="row">
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://github.com/triliun/simon-game" />
+    <meta property="og:title" content="Simon Game" />
+    <meta
+      property="og:description"
+      content=" Simon Game is my first project using JavaScript after 2 days (~21.58 hours) of learning. It tests memory with color and sound patterns. Built with HTML, CSS, and jQuery, it may not be perfect, but I'm proud of it as my first step into DOM, animations, and event handling. "
+    />
+    <meta
+      property="og:image"
+      content="https://github.com/triliun/simon-game/blob/master/image.png"
+    />
 
-      <div type="button" id="green" class="btn green">
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta
+      property="twitter:url"
+      content="https://github.com/triliun/simon-game"
+    />
+    <meta property="twitter:title" content="Simon Game" />
+    <meta
+      property="twitter:description"
+      content=" Simon Game is my first project using JavaScript after 2 days (~21.58 hours) of learning. It tests memory with color and sound patterns. Built with HTML, CSS, and jQuery, it may not be perfect, but I'm proud of it as my first step into DOM, animations, and event handling. "
+    />
+    <meta
+      property="twitter:image"
+      content="https://github.com/triliun/simon-game/blob/master/image.png"
+    />
 
+    <link href="https://github.com/triliun/simon-game" rel="canonical" />
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Press+Start+2P"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <section class="container">
+      <div class="container-helper">
+        <div class="flex">
+          <h1 id="level_title">Click Anywhere To Start</h1>
+          <i id="sound_button" class="sound on"></i>
+        </div>
+        <div class="row">
+          <div type="button" id="green" class="btn green"></div>
+          <div type="button" id="red" class="btn red"></div>
+          <div type="button" id="yellow" class="btn yellow"></div>
+          <div type="button" id="blue" class="btn blue"></div>
+          <div type="button" id="orange" class="btn orange"></div>
+          <div type="button" id="gray" class="btn gray"></div>
+          <div type="button" id="purple" class="btn purple"></div>
+          <div type="button" id="pink" class="btn pink"></div>
+        </div>
       </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.7.1/jquery.min.js"></script> 
-  <script src="game.js"></script>
-</body>
-
+    </section>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="game.js"></script>
+  </body>
 </html>