Whack A Mole Game

打地鼠

實作

1. 首先實作亂數的時間，讓地鼠可以隨機出現

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

2. 隨機選擇要出來的地洞

    function randomHole(holes) {
        const idx = Math.floor(Math.random() * holes.length);
        const hole = holes[idx];
   
        // 避免同一個洞出現兩次
        if (hole === lastHole) {
            return randomHole(holes);
        }
        lastHole = hole;
        return hole;
    }
   

3. 讓地鼠在隨機時間、隨機地洞探出頭來

    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. 敲打地鼠，要先監聽點擊事件

    moles.forEach((mole) => mole.addEventListener("click", bonk));
   
    function bonk(e) {
        console.log(this);
        // 如果有人嘗試改屬性，則不會觸發
        if (!e.isTrusted) return;
        score++;
        scoreBoard.textContent = score;
        this.parentElement.classList.remove("up");
    }
   

   這邊因為點擊到的是地鼠element，而不是地洞，up 的class是綁在地洞，所以需要透過parentElement改變上層屬性

5. 啟動遊戲

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

總結

JavaScript 30 課程結束了，實際上跟著課程做也才花了兩個禮拜，做完後對於JavaScript比較熟悉了，發覺跟目前用的Angular其實很多觀念是相通的，像是eventListener在Angular中就會是使用RxJS的訂閱方式來處理，又或者是querySelector則是用ViewChild，後悔之前沒有好好打下基礎，不然會學得更快，接下來繼續前進吧!!