Lesson 30

th3mon · th3mon · commit 99bf82dca938 · 2020-10-22T13:13:08.000+02:00
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
@@ -39,6 +39,61 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
       const holes = document.querySelectorAll('.hole');
       const scoreBoard = document.querySelector('.score');
       const moles = document.querySelectorAll('.mole');
+      let lastHole;
+      let timeUp = false;
+      let score = 0;
+
+      function randomTime(min, max) {
+        return Math.round(Math.random() * (max - min + min));
+      }
+
+      function randomHole(holes) {
+        const index = Math.floor(Math.random() * holes.length);
+        const hole = holes[index];
+
+        if (hole === lastHole) {
+          return randomHole(holes);
+        }
+
+        lastHole = hole;
+
+        return hole;
+      }
+
+      function peep() {
+        const time = randomTime(200, 1000);
+        const hole = randomHole(holes);
+
+        hole.classList.add('up');
+        setTimeout(() => {
+          hole.classList.remove('up');
+
+          if (!timeUp) {
+            peep();
+          }
+        }, time);
+      }
+
+      function startGame() {
+        scoreBoard.textContent = 0;
+        timeUp = false;
+        score = 0;
+        peep();
+
+        setTimeout(() => (timeUp = true), 10000);
+      }
+
+      function bonk(event) {
+        if (!event.isTrusted) {
+          return;
+        }
+
+        score += 100;
+        this.classList.remove('up');
+        scoreBoard.textContent = score;
+      }
+
+      moles.forEach(mole => mole.addEventListener('click', bonk));
     </script>
   </body>
 </html>
