用 JavaScript 實現《魂斗羅》類遊戲：鍵盤事件與動畫幀

核心技術點

1. 遊戲循環：requestAnimationFrame 驅動更新與渲染。
2. 鍵盤狀態管理：監聽 keydown/keyup 維護按鍵映射表。
3. 實體類：玩家、敵人、子彈封裝位置、速度、狀態、碰撞箱。
4. 碰撞檢測：AABB（軸對齊包圍盒）或像素級碰撞。
5. 精靈圖動畫：drawImage 切割 Sprite Sheet，按幀率切換。

鍵盤處理示例

const keys = {};
window.addEventListener('keydown', e => keys[e.code] = true);
window.addEventListener('keyup', e => keys[e.code] = false);

// 更新邏輯
function updatePlayer() {
    if (keys['ArrowLeft']) player.vx = -SPEED;
    else if (keys['ArrowRight']) player.vx = SPEED;
    else player.vx = 0;
    if (keys['ArrowUp'] && player.onGround) { player.vy = -JUMP_FORCE; player.onGround = false; }
    if (keys['KeyZ']) player.shoot();
}

學習資源推薦

• 《HTML5 Canvas 核心技術》
• MDN Game development
• Phaser、PixiJS 等成熟引擎源碼學習

建議

先從簡單的「移動方塊」開始，逐步加入動畫、碰撞、關卡，結合 HTML5 Canvas + CSS 效果更佳。