added audio

rachxh · Mar 8, 2022 · 4aab42d · 4aab42d
1 parent 8655779
commit 4aab42d
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 10 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/flower-icon.png b/flower-icon.png
diff --git a/forest-with-birds.ogg b/forest-with-birds.ogg
diff --git a/game-over.ogg b/game-over.ogg
diff --git a/img/watering can.png b/img/watering can.png
diff --git a/index.html b/index.html
@@ -12,20 +12,21 @@
       href="https://fonts.googleapis.com/css2?family=Odibee+Sans&family=Press+Start+2P&display=swap"
       rel="stylesheet"
     />
+    <link rel="apple-touch-icon" sizes="150x150" href="/apple-touch-icon.png" />
   </head>
   <body>
     <section>
       <h1>Speed Game</h1>
       <div class="game-area">
         <h2>Your score is: <span id="score">0</span></h2>
         <div class="container">
-          <div class="circle">1</div>
-          <div class="circle">2</div>
-          <div class="circle">3</div>
-          <div class="circle">4</div>
+          <div class="circle"><span class="flower">🌻</span></div>
+          <div class="circle"><span class="flower">🌻</span></div>
+          <div class="circle"><span class="flower">🌻</span></div>
+          <div class="circle"><span class="flower">🌻</span></div>
         </div>
         <div class="container">
-          <button type="button" id="start">Start game</button>
+          <button type="button" id="start" onclick="play()">Start game</button>
           <button type="button" id="stop">Stop game</button>
         </div>
       </div>
@@ -37,6 +38,12 @@ <h2>Your score is: <span id="score">0</span></h2>
         <button type="button" id="close">Close</button>
       </div>
     </section>
+    <audio
+      id="startMusic"
+      src="./forest-with-birds.ogg"
+      type="audio/ogg"
+    ></audio>
+    <audio id="failMusic" src="./game-over.ogg" type="audio/ogg"></audio>
     <script src="main.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -8,6 +8,9 @@ const overlay = document.querySelector("#overlay");
 const scoreText = document.querySelector("#score");
 const resultText = document.querySelector("#result");
 
+const startMusic = document.querySelector("#startMusic");
+const failMusic = document.querySelector("#failMusic");
+
 let active = 0;
 let score = 0;
 let pace = 1000;
@@ -36,6 +39,9 @@ const clickedCircle = (i) => {
 const startGame = () => {
   startButton.style.display = "none";
   endButton.style.display = "inline";
+  startMusic.currentTime = 0;
+  startMusic.play();
+
   for (let i = 0; i < circles.length; i++) {
     circles[i].style.pointEvents = "auto";
   }
@@ -51,7 +57,7 @@ const startGame = () => {
   console.log("active circle:", active);
   timer = setTimeout(startGame, pace);
   pace = pace - 10;
-  if (rounds >= 1) {
+  if (rounds >= 3) {
     endGame();
   }
   rounds++;
@@ -68,6 +74,9 @@ const startGame = () => {
 };
 
 const endGame = () => {
+  startMusic.pause();
+  startMusic.currentTime = 0;
+  failMusic.play();
   console.log("game ended");
   clearTimeout(timer);
   overlay.style.visibility = "visible";

diff --git a/style.css b/style.css
@@ -35,16 +35,14 @@ h1 {
   background-color: saddlebrown;
   display: inline-block;
   margin: 2rem 1rem;
-  cursor: pointer;
+  /* cursor: pointer; */
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: url("./img/watering\ can.png"), auto;
 }
 .circle.active {
-  /* background-image: url("https://cdn.pixabay.com/photo/2016/01/20/17/16/flower-1151963_1280.png"); */
   background-color: yellow;
-  /* background-image: url(./flower-icon.png);
-  background-attachment: fixed; */
 }
 
 button {
@@ -98,3 +96,7 @@ button {
 #stop {
   display: none;
 }
+
+.flower {
+  font-size: 4rem;
+}