# [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` 。 * 可以避免被使用者透過程式來觸發操作。
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up