---
# System prepended metadata

title: '[JS30] Day.30 Whack A Mole Game'
tags: [JS30]

---

# [JS30] Day.30 Whack A Mole Game 
###### tags: `JS30`
## 任務 Task
終於到第 30 天啦！今天做一個酷酷的打地鼠遊戲，在十秒內隨機跳出地鼠，且時間也是隨機的，點到地鼠時會加分。
ps : 是說地鼠的英文是 `Mole` 原來摩爾莊園的摩爾是這樣來的哈哈。

==完成時間：30min==
## 步驟 Step
1. 建立 `randomMole()` 使用 Math.random() 隨機跑出 `0 ~ holes.length` 的整數，回傳 `holes[index]` 隨機的洞，如果重複則回傳 `randomMole()` 再跑一次。
2. 建立 `randomTime(min, max)` 輸入最小及最大的毫秒數，回傳隨機的毫秒數。
3. 建立 flag `timeUp` 判斷時間是否結束。
4. 建立 `peep()` 抓取 `randomMole()` 回傳的隨機 `mole` 加入跳起來的 class ，並且設定 `setTimout()` 時間為隨機時間 `randomTime()` 裡面移除跳起來的 class 並且時間還沒到時，繼續執行 `peep()` 
```javascript=
function peep() {
    const time = randomTime(200, 1000);
    const hole = randomHole(holes);
    hole.classList.add('up');
    setTimeout(() => {
      hole.classList.remove('up');
      if (!timeUp) peep();
    }, time);
  }
```
5. 建立 `startGame()` 設定初始分數為零，`timeUp = false` 、執行 `peep()` ，並設定 `setTimout` 過了十秒將 `timeUp` 改成 `true`。
```javascript=
function startGame() {
    scoreBoard.textContent = 0;
    timeUp = false;
    score = 0;
    peep();
    setTimeout(() => timeUp = true, 10000)
  }
```
6. 監聽每個 `mole` 被點擊時將 `score` +1 且渲染到畫面，然後被點擊的 `mole` 的 `parentNode` 移除跳起來的 class 。
## 筆記 Note
### <font color=#337EA9>JS Event.isTrusted</font>
* 當使用者操作觸發 Event 時，`Event.isTrusted = true` 。
* 可以避免被使用者透過程式來觸發操作。
