「JS30紀錄＆心得」30 - Whack A Mole

發表於 | 分類於 |

主題

JS30的最終篇啦！這次要來做一個打地鼠的小遊戲:D

[DEMO]｜ [GitHub] ｜[JavaScript30全列表]

步驟

Step1. 取得頁面元素並設定預設變數

1
2
3
4
5
6
7
8
9
/**  取得頁面元素 */
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');

/** 預設變數設定 */
let lastHole; // 最後一次出現的地鼠洞
let timeUP = false; // 遊戲時間是否結束戳記
let score = 0; // 分數

Step2. 亂數決定地鼠出現後存在的時間&地鼠出現的洞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/** 地鼠出現後存在時間，傳入最小&最大值，回傳一個區間亂數 */
function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

/** 地鼠出現的洞 */
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;
}

Step3. 地鼠出現的主程式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**  地鼠出現 */
function peep() {
  // 取得存在時間
  const time = randomTime(300, 1000);
  // 取得出現的洞
  const hole = randomHole(holes);
  // 移除已槌標記
  hole.querySelector('.mole').classList.remove('bonked');
  // 增加出現的動畫class
  hole.classList.add('up');
  // 設定存在時間到的時候移除出現動畫，且若遊戲時間未結束就繼續跑下一run
  setTimeout(() => {
    hole.classList.remove('up');
    if (!timeUP) peep();
  }, time)
}

Step4. 打地鼠

1
2
3
4
5
6
7
8
9
10
11
12
13
/** 打地鼠 */
function bonk(e) {
  // isTrusted防止腳本操作，class有bonked代表已被搥過，若符合上述兩者則不進行
  if(!e.isTrusted || this.classList.contains('bonked')) return;
  // 替被打到的地鼠加上bonked的樣式避免連續點擊得分
  this.classList.add('bonked'); 
  // 打到就移除出現的動畫
  this.classList.remove('up');
  // 加分
  score++;
  // 更新顯示分數
  scoreBoard.textContent = score;
}

Step5. 開始遊戲設定，並綁定打地鼠動作到每個地鼠身上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** 開始遊戲 */
function startGame() {
  // 時間重置
  timeUP = false;
  // 分數歸零
  scoreBoard.textContent = 0;
  score = 0;
  // 執行地鼠出現函式
  peep();
  // 設定十秒後把時間押為結束
  setTimeout(() => timeUP = true, 10000);
}

// 替每個地鼠加上click事件綁定bonk（打地鼠）
moles.forEach(mole => mole.addEventListener('click', bonk));

程式備註

Event.isTrusted
可以透過此屬性來判斷事件物件是否由使用者操作來產生，而非透過程式觸發的操作。

參閱：MDN-Event.isTrusted

探索

寫在上面了，原本可以連續點擊得分，加上個class做標記來防止連續點擊得分:D

其他

終於把這系列練習完了！接著這週找時間整理全系列文章在丟回作者的github連結內:D!!