終於來到最後一堂課，而今天要做的是一個小遊戲—「打地鼠」。點選左邊的按鈕可以開始遊戲，遊戲時間為十秒，而上方會顯示你擊中的次數。實作範例如下：

邏輯流程

1. 產生隨機亂數時間(地鼠出現時間長度)
2. 產生隨機地洞亂數(地鼠出現的位置)
3. 根據時間跟地洞亂數讓地鼠出現和消失
4. 監聽地鼠被點擊事件，擊中加分
5. 設定初始遊戲按鈕

課程重點

1. 產生隨機亂數時間：Math.random()是產生隨機0~1之數。這邊min和max是想要地鼠出現的最短和最長時間。

   function randomTime(min, max) {
       return Math.round(Math.random() * (max - min) + min);
   }
   

2. 產生隨機地洞亂數：我們共有六個洞，所以idx會是0~5的隨機整數。而holes是全部class=hole的元素的NodeList。為了不要讓地鼠在同一個洞連續出現，設定一個lastHole的全域變數，每次的hole都會指派給lastHole，若hole等於lastHole，就重新呼叫本身函式。最後函式要回傳地洞元素。

   const holes = document.querySelectorAll('.hole');
   
   function randomHole(holes) {
     const idx = Math.floor(Math.random() * holes.length);
     const hole = holes[idx];
     if (hole === lastHole) {
       console.log('Ah nah thats the same one bud');
       return randomHole(holes);
     }
     lastHole = hole;
     return hole;
   }
   

3. 根據時間跟地洞亂數讓地鼠出現和消失：替隨機地洞加入"up" class，而利用隨機時間來setTimeout()，timeout時間到就移除"up" class，若遊戲時間未到就再呼叫本身函式，讓下個地鼠出現。

   function peep() {
     const time = randomTime(200, 1000);
     const hole = randomHole(holes);
     hole.classList.add('up');
     setTimeout(() => {
       hole.classList.remove('up');
       if (!timeUp) peep();
     }, time);
   }
   

4. 擊中地鼠：這裡有個有趣的防作弊機制，因為點擊地鼠可以透過下指令來完成，而事件中有個isTrusted屬性可以判斷使用者是真的滑鼠點擊還是用指令點擊。因此若isTrusted為false，就跳出函式，否則就加一分且讓地鼠消失。

   function bonk(e) {
     if(!e.isTrusted) return; // cheater!
     score++;
     this.parentNode.classList.remove('up');
     scoreBoard.textContent = score;
   }
   
   moles.forEach(mole => mole.addEventListener('click', bonk));
   

5. 設定初始遊戲按鈕：遊戲初始時分數歸零，並讓地鼠開始出現，且設定遊戲時間為10秒，時間到就將timeUp flag設定為true，讓peep()不再呼叫自己。

   function startGame() {
       scoreBoard.textContent = 0;
       timeUp = false;
       score = 0;
       peep();
       setTimeout(() => timeUp = true, 10000)
   }