[JS作品]JS30系列30 – Whack A Mole

  //地鼠隨機出現的時間
  function randomTime(min,max){
    return Math.round(Math.random() * (max-min) + min);
  }

    //所有的洞
  const holes = document.querySelectorAll('.hole');
//紀錄最後的隨機的地洞
  let lastHole;
  //隨機出現地鼠的地洞
  function randomHole(holes){
     // holes 是陣列，由 0 開始，所以利用 random 直接設定 random 範圍 ;Math.floor是無條件捨去
    const idx = Math.floor(Math.random() * holes.length);
    const hole = holes[idx];
    // 隨機有可能重複的地洞，所以建立變數排除重複
    if(hole===lastHole){
      console.log("地鼠跑到一個同樣的洞，所以換洞跑");
      return randomHole(holes);
    }
    lastHole = hole;
    return hole;
  }

// 遊戲時間是否已經到達
 let timeUp = false;
//地鼠出現的樣式
function peep(){
    // 地鼠出現的隨機時間
    const time = randomTime(200,1000);
    // 地鼠出現的隨機地洞
    const hole = randomHole(holes);
    // 變更該地洞的地鼠樣式，讓其顯示
    hole.classList.add('up');
    // 地鼠出現的時間
    setTimeout(()=>{
      hole.classList.remove('up');
      // 讓地鼠出現連續，遊戲時間到則停止
      if(!timeUp) peep();
    },time);
}

// 遊戲得分
 let score = 0;
//遊戲開始
function startGame(){
  // 初始分數版歸 0
  scoreBoard.textContent = 0;
  // 遊戲時間標示
  timeUp = false;
  // 遊戲得分歸 0
  score = 0;
  // 地鼠開始出現
  peep();
  // 遊戲截止時間
  setTimeout(() =>  timeUp = true
  , 30000);
}

//打擊地鼠後得分
function bonk(e){
  // 判斷是否真的使用者點擊
  if(!e.isTrusted) return;// cheater!
  // 分數 + 1
  score++;
  //移除地鼠顯示
  this.parentNode.classList.remove('up');//用滑鼠按地鼠圖片 up的class是在hold標籤,hold 是 mole的父(上層)標籤，所以要取消上層標籤的up Class
  // 顯示得分
  scoreBoard.textContent = score;
}
//每個洞都增加事件監聽
moles.forEach(mole => mole.addEventListener('click',bonk));