Add files via upload

affancoder · Feb 22, 2024 · 627e5e4 · 627e5e4
1 parent 421d79f
commit 627e5e4
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 6 deletions.
diff --git a/app.js b/app.js
@@ -12,11 +12,23 @@ document.addEventListener("click", function () {
   if (started == false) {
     console.log("Game is started");
     started = true;
+    sbtnSound.play();
 
     levelUp();
   }
 });
 
+let sbtnSound = document.querySelector(".bg-music");
+let startbtnSound = function () {
+  sbtnSound.play();
+};
+
+let errorbtn = document.querySelector(".error-music");
+
+let pausebtnSound = function () {
+  errorbtn.play();
+};
+
 //Flashing Buttons and level up
 
 function gameFlash(btn) {
@@ -56,9 +68,13 @@ function checkAns(idx) {
   } else {
     h2.innerHTML = `Game Over! Your score is <b>${level}</b> <br>Press any key to start`;
     document.querySelector("body").style.backgroundColor = "red";
+    errorbtn.play();
+
     setTimeout(function () {
-      document.querySelector("body").style.backgroundColor = "white";
-    }, 150);
+      document.querySelector("body").style.backgroundColor =
+        "rgb(186, 250, 122)";
+      sbtnSound.pause();
+    }, 3000);
     reset();
   }
 }

diff --git a/img/simonGameLogo.gif b/img/simonGameLogo.gif
diff --git a/img/thumbnail.png b/img/thumbnail.png
diff --git a/index.html b/index.html
@@ -5,11 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Simon Says Game</title>
     <link rel="stylesheet" href="style.css" class="rel" />
+    <link rel="icon" href="/img/simonGameLogo.gif" class="icon" />
   </head>
   <body>
-    <h1>Simon Says Game</h1>
+    <audio src="./sounds/bg-music .mp3" class="bg-music" controls></audio>
+    <audio src="./sounds/error-music.mp3" class="error-music" controls></audio>
+    <div class="top-title">
+      <img src="./img/simonGameLogo.gif" width="40px" height="40px" />
+      <h1>&nbsp;Simon Says Game</h1>
+    </div>
     <h2>press any key to start</h2>
-
     <div class="btn-container">
       <div class="line-one">
         <div class="btn red" type="button" id="red">1</div>

diff --git a/sounds/bg-music .mp3 b/sounds/bg-music .mp3
diff --git a/sounds/error-music.mp3 b/sounds/error-music.mp3
diff --git a/style.css b/style.css
@@ -1,13 +1,28 @@
 body {
   text-align: center;
+  background-color: rgb(186, 250, 122);
 }
 
+.bg-music {
+  display: none;
+}
+.error-music {
+  display: none;
+}
+.top-title {
+  display: flex;
+  justify-content: center;
+}
+.top-title img {
+  margin-top: 20px;
+}
 .btn {
   height: 150px;
   width: 150px;
   border-radius: 20%;
-  border: 10px solid black;
-  margin: 1.5rem;
+  border: 7px solid black;
+  margin: 1.2rem;
+  cursor: pointer;
 }
 .btn-container {
   display: flex;