finish video 30

morinoko · morinoko · commit 4fecf3262763 · 2020-03-18T13:47:38.000+09:00
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
@@ -36,7 +36,54 @@ <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(e) {
+    if(!e.isTrusted) return; // cheater!
+    score ++;
+    this.classList.remove('up');
+    scoreBoard.textContent = score;
+  }
+
+  moles.forEach(mole => mole.addEventListener('click', bonk));
 </script>
 </body>
 </html>
