06｜讀懂遊戲流程

畫布座標：往右 x 增加，往下 y 增加

原遊戲畫布寬 360、高 640，左上角是 (0, 0)。我方子彈 vy = -520，表示往上移動；敵方子彈 vy = 230，表示往下移動。

canvasX() 用畫布在頁面上的位置及縮放比例，把滑鼠座標換成畫布座標。觸控的 e.touches[0] 是第一個接觸點；passive: false 允許處理函式取消預設捲動。

const r = canvas.getBoundingClientRect();
return (clientX - r.left) * (W / r.width);

時間差 dt：速度乘以時間才是位移

performance.now() 提供毫秒時間。除以 1000 轉成秒，乘上每秒速度得到移動距離。若速度 320、dt 是 0.016 秒，就移動約 5.12 個畫布單位。

原遊戲將 dt 上限設為 0.05 秒，避免停頓後突然跳很遠；這會捨棄超過上限的時間，不是補跑所有落後時間。

const dt = Math.min((now - last) / 1000, 0.05);
last = now;
cannon.x += cannon.speed * dt;

基本繪圖指令

Math.PI × 2 是一整圈的弧度。Math.sin、Math.cos 在爆炸特效中把方向角度轉成水平、垂直速度，先理解用途即可。

主迴圈：資料與畫面分開

init 先建立資料。requestAnimationFrame 登記下一次畫面更新前要呼叫的函式；瀏覽器會傳入時間 now。每次 loop 都先 update 再 draw，最後再登記下一次，不保證固定每秒 60 次。

function loop(now) {
  const dt = Math.min((now - last) / 1000, 0.05);
  last = now;
  update(dt); // 移動、碰撞、勝負
  draw();     // 依照目前資料繪圖
  requestAnimationFrame(loop);
}
init();
requestAnimationFrame(loop);

操作看看：速度 × 時間

按開始後可調整速度，抵達右側後從左側繼續。

動手修改

讓敵機下降速度從每秒 14 改成每秒 25。

en.y += 25 * dt;