「JavaScript 30」學習筆記（三十）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

製作一個「打鼴鼠」的小遊戲。

筆記

選取所有洞穴。

const holes = document.querySelectorAll('.hole');

選取分數看板。

const scoreBoard = document.querySelector('.score');

選取鼴鼠。

const moles = document.querySelectorAll('.mole');

最後洞穴標記。

let lastHole;

結束時間標記。

let timeUp = false;

初始分數。

let score = 0;

---

建立一個 randTime() 方法，以產生亂數。

function randTime(min, max) {
    // 回傳亂數
    return Math.round(Math.random() * (max - min) + min);
}

---

建立一個 randomHole() 方法，以隨機選取洞穴。

function randomHole(holes) {
    // 隨機選取洞穴並取得索引
    const idx = Math.floor(Math.random() * holes.length);
    // 利用索引取得洞穴
    const hole = holes[idx];
    // 如果洞穴重複，則再一次執行 randomHole() 方法並回傳
    if (hole === lastHole) {
        console.log('Ah nah thats the same one bud');
        return randomHole(holes);
    }
    // 更改最後洞穴標記
    lastHole = hole;
    // 回傳隨機洞穴
    return hole;
}

---

建立一個 peep() 方法，以在隨機時間內更改洞穴樣式。

function peep() {
    // 取得隨機時間
    const time = randTime(200, 1000);
    // 取得隨機洞穴
    const hole = randomHole(holes);
    // 新增洞穴 up 樣式
    hole.classList.add('up');
    // 設定在隨機時間內只執行一次
    setTimeout(() => {
        // 刪除洞穴 up 樣式
        hole.classList.remove('up');
        // 如果結束時間標記為 false 就執行 peep() 方法
        if (!timeUp) peep();
    }, time);
}

---

建立一個 startGame() 方法，以開始遊戲。

function startGame() {
    // 將初始分數設為 0
    scoreBoard.textContent = 0;
    // 將結束時間標記設為 false
    timeUp = false;
    // 初始分數設為 0
    scores = 0;
    // 執行 peep() 方法
    peep();
    // 設定時間 10 秒後結束遊戲
    setTimeout(() => timeUp = true, 10000);
}

---

建立一個 bonk() 方法，以計分。

function bonk(e) {
    // 如果事件非由使用者所操作，則停止程序
    if(!e.isTrusted) return;
    // 加一分
    score++;
    // 刪除洞穴 up 樣式
    this.classList.remove('up');
    // 將分數看板設為當前分數
    scoreBoard.textContent = score;
}

---

監聽每個洞穴，當發生 click 事件時，執行 bonk() 方法。

moles.forEach(mole => mole.addEventListener('click', bonk));