04｜函式與事件

函式：把一段工作取名字

參數是傳入的資料；return 可回傳結果並結束函式。rand(0.8, 2) 產生大於等於 0.8、小於 2 的隨機數。

function rand(a, b) {
  return a + Math.random() * (b - a);
}
const delay = rand(0.8, 2);

箭頭函式是另一種寫法

此處的短寫法和下方一般函式，在這個計算用途上效果相同。只有一個參數可省略外層小括號；單一運算式可省略大括號與 return。加上大括號後，要回傳值就需寫 return。

p => p.life > 0
// 在這個用途可讀成：
function (p) { return p.life > 0; }
// 常見錯誤：p => { p.life > 0; } 沒有回傳結果

事件與事件物件 e

e 是事件資料，名稱可自訂。e.key 是按鍵名稱；e.clientX 是滑鼠在視窗中的水平位置。preventDefault() 取消預設行為，例如空白鍵捲動頁面。

addEventListener('keydown', e => {
  keys[e.key] = true;
  if (e.key === ' ') {
    e.preventDefault();
    fire();
  }
});
addEventListener('keyup', e => keys[e.key] = false);

fire 和 fire() 差在哪？

事件需要一個稍後執行的函式，通常傳 fire。寫成 fire() 會立即呼叫，再把回傳值交給事件處理設定。

onclick = init 設定按鈕的點擊處理函式。若要帶參數，先包一個函式，例如 () => explode(100, 200)。

canvas.addEventListener('mousedown', fire);
document.getElementById('restart').onclick = init;

操作看看

等待操作。

動手修改

把重新開始按鈕接到 init 函式。

document.getElementById('restart').addEventListener('click', init);