學習合法遊戲素材獲取，導入 2D 精靈圖切割動畫與音效系統，完成遊戲風格化換皮。

遊戲素材導入與風格化

雖然『機制與手感決定遊戲好不好玩』；但在商業與玩家體驗層面，『素材決定了遊戲能不能讓人走進去、留下來』。幾何方塊能驗證物理邏輯，但無法傳遞世界觀；只有精準的精靈圖（Sprite Sheet）、視差背景與動態打擊音效，才能將單純的程式代碼昇華為具有情緒張力的完整作品。

💡 核心觀念：2D 素材的工程意義與規格

一、為什麼需要素材？三大工程價值

瞬時認知 (Visual Readability)：幾何方塊無法讓人在第一時間分辨是敵機、岩漿還是補包；替換為具象徵特徵的 2D 精靈圖後，大腦可在 0.05 秒內完成危險判別，大幅降低操作認知負荷。
動作質量與蓄力感 (Anticipation & Weight)：單純座標位移缺乏重量感。透過精靈圖分鏡呈現出招前的頓挫蓄力與落地緩衝，能賦予角色明確的動能與生命力。
聽覺反饋閉環 (Audio Feedback Loop)：人耳對聽覺刺激的反應快於視覺。關鍵操作（跳躍、揮砍、得分）搭配短促有力的音效，才能在操作瞬間給予大腦明確的反饋確認。

二、2D 遊戲素材規格與技術名詞

技術資產類型	常見格式	定義與工程用途
精靈圖 (Sprite Sheet)	PNG（含透明通道）	將角色待機、奔跑、受傷動作幀依固定網格排列在單張大圖中，透過計算座標偏移量進行動畫播放，大幅降低瀏覽器請求次數。
圖塊地圖 (Tileset)	PNG (16x16 / 32x32)	以固定像素為單位的地形切片，可像積木般在 Canvas 上拼接出無限延伸的地圖結構。
視差背景 (Parallax)	多層透明 PNG	拆分為遠景、中景與近景圖層，以不同捲動速度向後移動，營造 2D 畫面中的空間深度。
打擊音效 (SFX)	WAV / OGG / MP3	長度通常在 0.1 至 1.5 秒之間的短促音訊，用於操作確認、碰撞與攻擊反饋。
背景音樂 (BGM)	OGG / MP3	無縫循環樂曲，首尾相接無爆音卡頓，負責建立遊戲場景的氛圍節奏。

🛠️ 今日任務：4 步驟為遊戲注入靈魂

步驟 1：確立風格並下載合法 2D 資產

【步驟目的】 確立統一美術風格，從世界級免費素材庫挑選具備 CC0 / 免版稅授權的優質資產。

確立主題風格：素材是降低玩家認知負荷的視覺語言，請在「8-bit 復古像素」、「科幻太空」、「地牢冒險」或「手繪水彩」中擇一，切忌將不同解析度與風格的素材雜亂拼貼。
推薦世界級免費免版稅素材庫：
- 圖像與角色動作庫 (Sprites, Characters & Tilesets)：
  - Kenney.nl（CC0 公共領域，完全免費！被譽為獨立遊戲界「素材之神」，風格高度一致）。
  - OpenGameArt.org（全球最大開源遊戲藝術社群，搜尋「Sprite Sheet」或「Tileset」）。
  - Itch.io Free Game Assets（獨立開發者大本營，擁有極高水準的手繪風與復古像素動作包）。
  - The Spriters Resource（經典商業遊戲原版精靈圖庫，適合拆解與學習經典遊戲的幀數動態）。
  - CraftPix Freebies（專業美術團隊釋出的免費專區，包含高完整度角色動作序列與背景）。
- 打擊音效與背景音樂庫 (Audio & Music)：
  - Bfxr（網頁端即時合成！點擊按鈕隨機生成雷射、爆炸、金幣音效並一鍵匯出 WAV）。
  - Freesound.org（全球最大協同音效庫，建議搜尋 hit, jump, laser, explosion）。
  - Kenney Audio（CC0 成套 UI 點擊、打擊與復古音效包，免轉檔）。
  - Incompetech（知名作曲家 Kevin MacLeod 創立，遵循 CC-BY 標註作者姓名即可免費使用）。
  - Free Music Archive（匯聚大量獨立音樂人作品，適合尋找風格強烈的背景音樂）。
準備好以下必要資產檔案：
- 角色動作精靈圖（player.png，Sprite Sheet，至少包含待機 Idle 與移動/攻擊 Run/Attack 幀動態）。
- 背景圖或圖塊磚（background.png 或 Tileset，包含地面、障礙物或背景圖）。
- 核心音效（SFX，包含操作回饋、擊中/得分 point.mp3、失敗死亡 hit.mp3）。
- 循環背景音樂（bgm.mp3，符合遊戲節奏之樂曲）。

步驟 2：將素材放進遊戲工作區的專屬資料夾

【步驟目的】 按照遊戲業界標準目錄放置素材，讓萬能助手可以直接讀取並套用。

打開桌面上的 你的學號+game 資料夾，將下載並解壓縮後的素材檔案歸類放入：

圖片放到：assets/images/（放 player.png、background.png 等圖檔）
音訊放到：assets/audio/（放 hit.mp3、point.mp3、bgm.mp3 等音訊檔）

步驟 3：讓 Antigravity 自動升級為精靈圖動畫與音效系統

【步驟目的】 讓 AI 工程助理將原本繪製幾何方塊的 Canvas 繪圖邏輯，升級為 drawImage() 動態精靈圖切割播放與音訊管理系統。

在 Antigravity 中開啟你的專案資料夾。
複製以下指令貼給萬能助手：

你是負責處理問題與實作的工程助理，我是遊戲製作人。
我已授予你在此工作區的完整權限：凡是能寫程式、修改檔案、安裝套件解決的問題，請優先直接動手完成，不需向我反覆請示，完成後向我報告結果即可。

我已經將下載解壓縮後的遊戲素材放進 assets/ 目錄中，請幫我將原本繪製幾何方塊的 Canvas 繪圖邏輯，升級為「drawImage() 動態精靈圖切割播放與音訊管理系統」：

【資產清單】
- 角色動作精靈圖：assets/images/player.png（請以 drawImage() 實作多幀切分播放，至少包含待機 Idle 與移動/攻擊 Run/Attack 幀動態，並支援移動時左右轉向鏡像反轉）
- 背景圖或圖塊磚：assets/images/background.png（填滿遊戲畫布背景或圖塊平鋪）
- 核心音效：assets/audio/ 內的 SFX 音效檔（透過 Web Audio API 或 Audio 物件，在操作回饋、擊中/得分、失敗死亡等事件觸發時精準播放）
- 循環背景音樂：assets/audio/bgm.mp3（設定循環播放，畫面右上角提供音效與音樂靜音切換按鈕）

執行要求（完成任務優先，嚴禁偷懶）：
1. 嚴禁只出嘴不幹事！請直接在現有模組化結構（js/ 目錄各模組）中修改與擴充代碼，完整實現精靈圖切割與音效播放邏輯，嚴禁使用 TODO 註解省略任何代碼。
2. 資源預加載與載入防護：建立資源預加載邏輯，確保圖片與音訊載入完成後才啟動主循環繪製，避免畫面閃爍或因未載入完成報錯。
3. 嚴格維持原有物理手感：請維持既有的物理移動數值與碰撞判定範圍，切勿因更換素材貼圖導致碰撞箱（Hitbox）與手感失準。
4. 關鍵路徑防錯：所有圖片與音訊載入路徑一律使用【相對路徑】（如 `./assets/images/player.png`、`./assets/audio/bgm.mp3`），嚴禁使用以 `/` 開頭的根目錄絕對路徑，確保 GitHub Pages 雲端部署後資源載入正常！
5. 解決現代瀏覽器音訊限制（Autoplay Policy）：背景音樂（BGM）請設計為在玩家「首次點擊畫面或按鍵開始」後再啟動播放，避免被瀏覽器靜音或跳出錯誤。
6. 原本遊戲的所有核心玩法、手感與判定邏輯必須 100% 完整保留，且在遊戲畫面左下角或右上角清楚標註：「製作人：[你的學號/姓名]」。
7. 確保在預覽中能正常遊玩、動畫流暢無延遲、音畫同步無報錯！

完成後點擊右上方 Preview 預覽視窗試玩，確認手感與動畫流暢無延遲，且音效播放正常！

步驟 4：讓助手一鍵推送更新到 GitHub

【步驟目的】 讓助手在背景直接執行 Git 指令推送到雲端，更新你的 GitHub Pages 線上遊戲。

在 Antigravity 對話框中，直接發送以下指令：

你是負責處理問題與實作的工程助理，我是遊戲製作人。
素材換皮與測試已完成，請直接呼叫終端機工具，將本次新增的素材與代碼推送到我的 GitHub 倉庫。

執行要求（完成任務優先，嚴禁甩鍋）：
1. 我已授予你使用終端機執行 Git 的完整權限。嚴禁只給我文字教學或叫我自己輸入指令！請直接在背景依序執行 git add .、git commit -m "feat: reskin with sprite sheets and audio"，並推送至遠端 main 分支（git push origin main）。
2. 若遇到權限問題或畫面上跳出 GitHub 登入驗證視窗，請主動在對話中提醒並清楚引導我授權；其餘障礙直接自動排除。
3. 推送完成後，請回報我的 GitHub Pages 公開遊玩網址，並提醒我：GitHub Pages 需約 1~2 分鐘更新，若剛更新點開仍是舊版，稍候 2 分鐘並按 Ctrl+F5 強制重新整理即可！

📤 本週成果繳交 (Checkpoint 4)

繳交內容：你的 「完成 2D 素材換皮與音效整合之 GitHub Pages 遊戲公開遊玩網址」（格式如：https://你的帳號.github.io/my-game/）。
檢核重點：
- 遊戲畫面擺脫單純方塊，成功套用 2D 精靈圖（包含待機/移動等動態幀）與背景圖/圖塊。
- 遊戲內必須包含循環背景音樂（BGM）與操作/碰撞核心音效（SFX），無瀏覽器阻擋錯誤。
- 遊戲畫面中必須清楚標註作者（製作人姓名or稱號）。
- 點擊公開網址即可在手機與電腦順暢遊玩。

第 4 課：遊戲素材導入與風格化