打地鼠 Whac-a-Mole – 任務說明

# 🎯 **打地鼠 Whac-a-Mole – 任務說明** 你要做一個超簡單的小遊戲： **打地鼠！點到地鼠就得分。** --- ## **遊戲規則** 1. 有一個 3×3 的格子（總共 9 格）。 2. 每秒會隨機挑出一格「出現地鼠」。 3. 該格會變成黃色（或出現 “🐹”）。 4. 玩家用滑鼠點地鼠 → **分數 +1**。 5. 遊戲時間 20 秒，最後顯示總分。 --- ## **你必須完成：** * 隨機挑出一格當作地鼠 * 點擊地鼠時加分 * 每秒換一格新的地鼠 * 顯示分數（更新 DOM） * 20 秒後遊戲結束如果你做完以上功能 → **恭喜！你完成一個真正的小遊戲 🎉** --- ## **加分挑戰（可選、好玩）** * 避免同一格連續兩次出現（增加難度） * 地鼠出現時顯示 emoji（🐹） * 玩家點錯格 → 扣分 * 倒數計時器 * 結束後顯示「遊戲結束」畫面 --- ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Whac-a-Mole</title> <style> body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 40px; } #score { font-size: 24px; margin-bottom: 20px; } .grid { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cell { width: 100%; height: 100%; background: #eee; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 30px; user-select: none; } .mole { background: #ffcc00; } </style> </head> <body> <div id="score">Score: 0</div> <div class="grid"> <div class="cell" id="c1"></div> <div class="cell" id="c2"></div> <div class="cell" id="c3"></div> <div class="cell" id="c4"></div> <div class="cell" id="c5"></div> <div class="cell" id="c6"></div> <div class="cell" id="c7"></div> <div class="cell" id="c8"></div> <div class="cell" id="c9"></div> </div> <script src="app.js"></script> </body> </html> ``` 在 `index.html` 引入 `app.js` 有幾種方式，但最標準、最適合初學者的方式如下。 --- # ✅ **如何在 `index.html` 引入 `app.js`** ## **方式一：放在 `body` 最後（建議）** 這樣可以確保 HTML 先被載入，再執行 JS（避免抓不到 DOM） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Whac-a-Mole</title> </head> <body> <h1>打地鼠</h1> <div class="game"></div>  <script src="app.js"></script> </body> </html> ``` --- ## **方式二：放在 `<head>` 使用 `defer`** `defer` 讓 JS 等 DOM 完成後再執行，也很常用。 ```html <head> ... <script src="app.js" defer></script> </head> ``` 📌 **適合較大型專案或多人協作時使用** --- # 📁 你的檔案結構應該像這樣： ``` whac-a-mole/ ├── index.html ├── style.css └── app.js ``` 只要 `index.html` 能找到 `app.js` 就會成功執行。 --- 需要我幫你把「打地鼠」完整模板（HTML/CSS/JS）一次生成嗎？