Whack A Mole Game


Posted by wayne201299 on 2023-10-04

打地鼠

實作

  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,後悔之前沒有好好打下基礎,不然會學得更快,接下來繼續前進吧!!


#javascript







Related Posts

SQL Injection 的攻擊原理和防範方法

SQL Injection 的攻擊原理和防範方法

JS30 Day 10 筆記

JS30 Day 10 筆記

WSL2: Linux/Ubuntu

WSL2: Linux/Ubuntu


Comments