Zuma online

專案總覽

本專案是一個功能完整的網頁版祖瑪 (Zuma) 風格遊戲。完全使用 HTML、CSS 和原生 JavaScript 從零開始打造，這個遊戲原型展示了一個完整的遊戲循環、物理模擬、動態 UI 界面，以及一個強大的自訂關卡編輯器。

點擊這裡，立即體驗線上 Demo！

---

核心功能

• 經典祖瑪玩法: 完美復刻了瞄準、發射、彈珠插入、三色消除等所有核心機制。
• 多樣化關卡: 內建 4 個精心設計的關卡，其路徑由不同的數學公式（如阿基米德螺線、心形線等）動態生成。
• 自訂關卡編輯器: 一個強大的內建編輯器，允許玩家透過輸入 X 和 Y 座標的參數方程來創建自己的專屬關卡，可能性無窮！
• 動態遊戲配置: 玩家可以為每個關卡自訂彈珠的顏色種類、總數量和移動速度，從而自由調整遊戲難度。
• 完善的 UI/UX 流程: 遊戲包含了一套完整的用戶流程：
  • 初始歡迎畫面
  • 帶有持久高亮效果的關卡選擇菜單
  • 包含計時器和「返回」按鈕的遊戲內 UI
  • 帶有「重新開始」和「返回主選單」選項的遊戲結束畫面
  • 為關卡編輯器提供彈出式幫助說明。
• 流暢的動畫效果: 包含平滑的彈珠移動、帶有動畫的彈珠交換，以及令人滿足的彈珠消除動畫。
• 響應式設計: 遊戲畫布和 UI 元素能夠良好地適應不同的螢幕尺寸。

---

技術棧

• 前端: HTML5, CSS3, 原生 JavaScript (ES6+)
• 圖形渲染: HTML5 Canvas API
• 開發工具: Cursor

---

如何遊玩

1. 開始: 在您的瀏覽器中打開 index.html 檔案，或訪問上方的線上 Demo 連結。
2. 歡迎畫面: 點擊任意處進入主菜單。
3. 選擇關卡:
   • 選擇一個預設的關卡。
   • 在下方出現的設定面板中，調整遊戲參數（顏色種類、彈珠總量、移動速度）。
   • 點擊「開始遊戲」。
4. 自訂關卡:
   • 點擊「自訂關卡」按鈕。
   • 關卡編輯器和設定面板會同時出現。
   • 使用 t 作為變數，輸入您的參數方程。可以點擊 ? 按鈕獲取幫助和公式範例。
   • 調整下方的遊戲參數。
   • 點擊「開始遊戲」。
5. 遊戲內操作:
   • 瞄準: 移動滑鼠。
   • 發射: 點擊滑鼠左鍵。
   • 交換彈珠: 按下 空白鍵 來交換當前待發和下一顆備用彈珠。
   • 返回: 隨時點擊左上角的「返回」按鈕以回到主菜單。

---

本地安裝與運行

若要在本地端運行此專案，只需複製本倉庫，然後在現代瀏覽器中打開 index.html 即可。

git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git
cd YOUR_REPOSITORY_NAME
# 在瀏覽器中打開 index.html

---