MatchstickmanWebGame

火柴人激戰：一款網頁生存射擊遊戲

網站內容介紹：

「火柴人激戰」是一款基於 HTML、CSS 和 JavaScript 技術打造的網頁版火柴人主題生存射擊遊戲。玩家將操控一名火柴人角色，在限定時間內（每回合2分鐘）努力生存，擊退不斷來襲的敵人。成功生存並完成關卡後，玩家將獲得分數和金錢獎勵。金錢可以用於在遊戲內的商店購買更強大的武器，或升級角色的各項能力，如生命值、移動速度和武器性能，以應對後續更具挑戰性的關卡（共三關）。

遊戲核心玩法：

• 生存挑戰：在每關卡2分鐘內，抵禦敵人攻擊並保持存活。
• 射擊戰鬥：使用滑鼠（或鍵盤）控制火柴人移動和射擊，消滅敵人。
• 經濟系統：擊敗敵人、完成關卡可獲得金錢。
• 武器商店：使用金錢購買不同特性的武器，如手槍、散彈槍、衝鋒槍、狙擊槍。
• 角色升級：消耗金錢提升角色屬性，增強生存和戰鬥能力。
• 關卡推進：遊戲設有多個關卡，難度逐漸提升，敵人種類和數量也會增加。

優點與特點：

1. 即時可玩性：作為一款網頁遊戲，無需下載安裝，直接在瀏覽器中即可開始遊戲，方便快捷。
2. 經典火柴人風格：採用簡潔明了的火柴人美術風格，視覺清晰，專注於遊戲玩法本身。
3. 動態難度調整：隨著關卡的推進，敵人的血量、速度和數量會增加，並會出現更強大的「菁英怪」，保持遊戲的挑戰性。
4. 豐富的武器與升級系統：提供多樣化的武器選擇和角色升級路徑，玩家可以根據自己的遊戲風格定制角色。
5. 即時反饋與獎勵：擊殺敵人、完成關卡均有即時的分數和金錢反饋，增強玩家的成就感。
6. 完整的遊戲循環：包含開始介面、遊戲進行、關卡完成、遊戲結束、商店、升級等完整的遊戲流程。
7. 視覺效果增強：加入了如槍口火焰、敵人死亡粒子爆炸等簡單的視覺效果，提升了遊戲的觀感。
8. 操作直觀：採用常見的鍵盤控制移動和射擊（WASD/方向鍵移動，空格/K鍵射擊），易於上手。
9. 可擴展性：目前的程式碼結構清晰，方便後續添加更多關卡、武器、敵人種類或遊戲機制。

目標使用者族群：

• 休閒遊戲玩家：尋求快速、輕鬆上手並能獲得即時樂趣的玩家。
• 喜愛火柴人題材的玩家：對火柴人動畫或遊戲感興趣的用戶。
• 網頁遊戲愛好者：喜歡在瀏覽器中直接體驗遊戲的玩家。
• 初級程式學習者：對網頁遊戲開發感興趣，可以通過分析此遊戲的程式碼學習 HTML、CSS 和 JavaScript 的綜合應用。
• 尋求短時娛樂的用戶：遊戲每回合時間固定，適合在零碎時間進行遊戲。

程式碼原理邏輯與運用方法：

本遊戲主要運用了以下網頁前端技術和程式設計原理：

1. HTML (結構層)：

   • index.html：負責搭建遊戲的基本骨架。
   • `` 元素：作為遊戲的主要繪圖區域，所有的遊戲角色、子彈、背景等都在此元素上通過 JavaScript 繪製。
   • UI 元素：使用 , , , 等標籤構建遊戲的使用者介面，如計時器、分數、金錢、血條、商店面板、升級面板、遊戲結束畫面等。
   • CSS 連結：通過 `` 引入樣式表。
   • JavaScript 連結：通過 `` 在 HTML 文檔末尾引入遊戲邏輯腳本，確保 HTML 結構加載完畢後再執行腳本。

2. CSS (表現層)：

   • style.css：負責遊戲界面的美化和佈局。
   • 基本佈局：使用 Flexbox (display: flex) 將遊戲容器居中顯示。
   • Canvas 樣式：設定畫布的邊框、背景色（雖然實際背景由 JS 繪製）。
   • UI 樣式：為計時器、分數、商店面板等 UI 元素設定位置（絕對定位 position: absolute）、背景色、字體、邊框、圓角等，提升視覺效果。
   • 響應式與過渡效果：可以添加 CSS 過渡 (transition) 使 UI 元素的顯隱或變化更平滑。
   • 偽類與狀態：使用 :hover 等偽類為按鈕等互動元素添加懸停效果。

3. JavaScript (行為層)：

   • script.js：包含遊戲的所有核心邏輯。
   • 物件導向程式設計 (OOP)：
     • Player 物件：封裝玩家的屬性（位置、速度、生命值、武器等）和行為（移動、跳躍、射擊）。
     • Enemy 類別：定義敵人的模板，包含屬性（位置、速度、生命值、類型）和方法（繪製、更新位置、碰撞檢測）。
     • Bullet 類別：定義子彈的模板，包含屬性（位置、方向、速度、傷害）和方法（繪製、更新位置、碰撞檢測）。
     • Particle 類別：用於創建簡單的粒子效果（如爆炸）。
   • 遊戲循環 (Game Loop)：
     • 使用 requestAnimationFrame(gameLoop) 創建一個不斷重複執行的循環，以平滑地更新遊戲狀態和重繪畫面。
     • 在每一幀中，會執行：清除畫布 -> 更新遊戲元素位置 -> 處理碰撞 -> 繪製遊戲元素。
   • 狀態管理：
     • isGamePaused：布林變數，用於控制遊戲的暫停與繼續。
     • player.isAlive：判斷玩家是否存活。
     • currentLevel：追蹤當前關卡。
     • time, score, money：記錄遊戲的核心數據。
   • 事件處理 (Event Handling)：
     • document.addEventListener('keydown', handleKeyDown) 和 document.addEventListener('keyup', handleKeyUp)：監聽鍵盤按下和釋放事件，以控制玩家的移動和射擊。
     • 為 UI 按鈕（如開始遊戲、打開商店、購買武器等）添加 click 事件監聽器，觸發相應的遊戲邏輯。
   • Canvas 繪圖 API：
     • canvas.getContext('2d')：獲取 2D 繪圖上下文。
     • ctx.fillRect(), ctx.arc(), ctx.stroke(), ctx.beginPath(), ctx.moveTo(), ctx.lineTo()：用於繪製火柴人、子彈、背景等圖形。
     • ctx.clearRect()：在每一幀開始時清除畫布。
     • ctx.fillStyle, ctx.strokeStyle, ctx.lineWidth：設定繪圖樣式。
   • 碰撞檢測 (Collision Detection)：
     • 主要使用距離比較法（Math.hypot 計算兩點間距離）或簡單的矩形重疊檢測，判斷子彈與敵人、玩家與敵人之間是否發生碰撞。
   • DOM 操作：
     • document.getElementById()：獲取 HTML 元素。
     • element.innerText 或 element.textContent：更新 UI 上顯示的文本（如分數、時間）。
     • element.style.display：控制 UI 面板（如商店、遊戲結束畫面）的顯示與隱藏。
     • element.innerHTML 或 document.createElement(), element.appendChild()：動態生成商店和升級列表的內容。
   • 計時器 (Timers)：
     • setInterval(updateTimer, 1000)：每秒更新遊戲倒數計時器。
     • setInterval(spawnEnemy, spawnInterval)：定時生成敵人。
     • clearInterval()：清除計時器。
   • 陣列操作：
     • enemies, bullets, particles 陣列：用於存儲和管理多個遊戲對象。
     • push()：添加新對象。
     • forEach()：遍歷陣列以更新或繪製每個對象。
     • filter() 或 splice()：移除不再活動的對象（如被擊敗的敵人、擊中目標的子彈）。
   • 數學與物理模擬：
     • Math.random()：用於隨機生成敵人位置、類型等。
     • Math.cos(), Math.sin(), Math.tan()：用於計算散彈槍的散射角度等。
     • GRAVITY, JUMP_FORCE：模擬簡單的重力和跳躍物理效果。
   • JSON 操作（雖然在這個版本中事件委託減少了其直接使用，但在早期版本或類似場景中）：
     • JSON.stringify() 和 JSON.parse()：在將複雜物件數據存儲到 HTML data- 屬性並取回時使用。

運用方法與學習：

開發者或學習者可以通過以下方式運用和學習此程式碼：

1. 理解核心遊戲邏輯：分析 gameLoop、各種物件的 update 和 draw 方法，以及狀態管理機制。
2. 學習 Canvas 繪圖：研究如何在 `` 上繪製圖形、動畫以及如何組織繪圖代碼。
3. 掌握事件處理：理解鍵盤事件和滑鼠點擊事件如何觸發遊戲行為。
4. 實踐 OOP 思想：學習如何將遊戲中的元素抽象成物件和類別，使程式碼更易於管理和擴展。
5. 修改與擴展：
   • 增加新武器/升級：在 weapons 和 upgrades 陣列中添加新項目，並實現其特殊效果。
   • 設計新敵人：創建新的敵人子類別，賦予其獨特的行為模式或攻擊方式。
   • 添加新關卡：修改關卡推進邏輯，增加更多關卡和對應的難度設定。
   • 優化美術與音效：替換火柴人圖形為更精緻的圖片，添加背景音樂和射擊、爆炸音效。
   • 引入更複雜的物理引擎：如果需要更真實的物理效果。
   • 實現存檔/讀檔功能：使用 localStorage 保存遊戲進度。
6. 調試技巧：學會使用瀏覽器的開發者工具（尤其是控制台 console.log）來調試 JavaScript 程式碼，追蹤變數狀態和錯誤訊息。

通過對這款「火柴人激戰」遊戲的分析和實踐，可以很好地掌握網頁前端遊戲開發的基礎知識和常用技巧。

---