🧩 方塊探險家 (Tile Explorer: Tiles Clear!)
一款層次感豐富的拼圖消除類網頁遊戲，具備精美的視覺效果、流暢的動畫以及循序漸進的難度設計。
遊戲概覽
玩家點擊層疊棋盤上顯露的方塊，將其收集到下方的 7 個槽位收納欄中。當收納欄中集齊 3 個相同的方塊時，它們將被消除。遊戲目標是清除棋盤上的所有方塊。如果收納欄填滿（達 7 個方塊）且無法消除，則遊戲結束。
預計變更
核心架構 — 單頁 HTML5 遊戲
所有遊戲文件將創建於 c:\TilesClear\：
[新增] index.html
- 具備行動裝置響應式視窗（Viewport）的主 HTML 入口SEO 元標記與結構化標記用於遊戲渲染的 Canvas/DOM 容器加載介面與 UI 疊加元素整合 Google Fonts (Outfit 字體系列)
[新增] style.css
- 高級深色主題 UI 設計系統面板與彈窗的「毛玻璃」特效 (Glassmorphism)具備 3D 深度、陰影與層次感的方塊樣式流暢的 CSS 動畫（方塊拾取、匹配消除、震動、跳動）行動裝置優先的響應式佈局（針對直向模式優化）背景主題系統（根據不同世界變換漸層背景）帶有插槽指示器的收納欄樣式道具按鈕樣式及冷卻狀態顯示
[新增] game.js
包含以下內容的核心遊戲引擎：
1. 方塊系統
- 使用高品質表情符號（Emoji）圖標的 12+ 種方塊類型：🌸🌺🌻🌷🌹🍎🍊🍋🍇🍓🍒🥝🍑🌿🦋🐝每個方塊包含屬性：{ id, 類型, x, y, z (層次), 寬度, 高度, 是否被遮擋, 元素 }遮擋邏輯：若上方圖層有方塊與其重疊，則該方塊被遮擋僅有未被遮擋（暴露）的方塊可被點擊
2. 棋盤與關卡系統
- 關卡定義方塊在多個層次 (z-index) 的位置初始 10 個關卡，難度遞增：第 1-3 關：簡單佈局（2 層，24-36 個方塊，4-6 種方塊類型）第 4-6 關：中等佈局（3 層，40-54 個方塊，6-8 種方塊類型）第 7-9 關：複雜圖案（3-4 層，60-72 個方塊，8-10 種方塊類型）第 10 關：魔王關（4 層，90 個方塊，排列成地標形狀）關卡呈現具辨識度的形狀（金字塔、星星、愛心、鋸齒、螺旋等）方塊類型的分配始終為 3 的倍數（確保關卡必有解）
3. 收納欄機制
- 底部設有 7 個插槽的收納欄點擊的方塊會以動畫形式從棋盤移動至收納欄新方塊會自動插入至收納欄中相同類型的方塊旁（智慧排序）當 3 個相同方塊相鄰時，觸發動畫並消除若收納欄達到 7 個方塊且未觸發消除 → 遊戲失敗
4. 道具（底部 3 個按鈕）
- 撤銷 (Undo) (↩️)：將最後放置的方塊移回棋盤隨機 (Shuffle) (🔀)：隨機重新分配棋盤上的方塊類型（保持 3 個一組的比例）移除 (Remove) (🗑️)：直接從收納欄中移除任意 1 個方塊每個道具在每關的使用次數有限（顯示為數字標籤）
5. 評分與星星
- 每次匹配基礎分：100 分連擊加成：2 秒內連續匹配可獲得倍數分（x2, x3, x4...）過關獎勵：剩餘道具數量 × 200 分時間獎勵：通關越快，獎勵越多關卡星級：⭐ (過關) ⭐⭐ (達到分數門檻) ⭐⭐⭐ (完美 + 快速)
6. 遊戲流程
主選單 → 關卡選擇 → 遊戲過程 → 勝利/失敗 → 關卡選擇
7. 視覺效果與動畫
- 點擊方塊：縮小彈簧效果移至收納欄：流暢的貝茲曲線動畫匹配消除：發光 + 放大 + 粒子噴發關卡完成：五彩碎紙慶祝效果遊戲結束：方塊震動 + 灰階淡出點擊被遮擋方塊：細微震動反饋背景視差效果（隨手機陀螺儀傾斜）
8. 主題 / 世界
- 🏛️ 古老遺跡 (第 1-3 關)：沙地漸層，金字塔氛圍🌸 櫻花花園 (第 4-6 關)：粉白花卉主題🌊 深海世界 (第 7-9 關)：深藍水底主題🌋 火山神廟 (第 10 關)：震撼的橘紅主題
9. 數據持久化 (localStorage)
- 儲存關卡進度與星級儲存最高分儲存已解鎖關卡儲存道具庫存
技術設計細節
方塊堆疊與遮擋算法
JavaScript對於棋盤上的每個方塊 T： T.blocked = false 對於每個層次 U.z > T.z 的方塊 U： 如果 矩形重疊(T, U)： T.blocked = true 跳出循環
只有當上方圖層沒有方塊與其區域重疊時，方塊才處於「暴露」狀態。重疊檢查使用 AABB (軸對齊邊界框) 相交算法。
智慧收納欄插入
當方塊加入收納欄時：
- 檢查欄內是否存在同類型方塊。若有，則將新方塊插入至其旁邊（將其他方塊擠開）。若插入後出現 3 個相鄰的同類型方塊，觸發消除動畫。若插入後欄位達到 7 個且未消除，則判定遊戲結束。
關卡數據格式
JavaScript{ level: 1, theme: 'ruins', tileTypes: ['🌸', '🌺', '🌻', '🌷'], layout: [ // 每一項為：[網格X, 網格Y, 圖層] [2, 0, 0], [3, 0, 0], [4, 0, 0], [2, 1, 0], [3, 1, 0], [4, 1, 0], [3, 0, 1], [3, 1, 1], // 第 1 層遮擋了第 0 層的部分方塊 ], powerUps: { undo: 3, shuffle: 1, remove: 1 } }
需用戶確認事項
[!IMPORTANT]行動裝置優先設計：本遊戲主要針對手機直向螢幕設計。
桌機瀏覽器雖可運行，但佈局優化以手機體驗為主。
[!NOTE]無外部依賴：整個遊戲採用原生 HTML/CSS/JS 開發，並使用 Emoji 作為方塊圖案。
無需構建工具、框架或下載額外素材，確保遊戲輕量且可即時開啟。
驗證計畫
自動化測試
- 使用瀏覽器工具開啟遊戲。確認主選單正常加載。進入關卡選擇並開啟第 1 關。
- 驗證方塊渲染層次正確。
- 測試點擊方塊、收納欄收集與 3 連消除功能。測試道具功能。
- 測試勝利與失敗判定條件。測試關卡遞進流程。
手動驗證
- 視覺審查 UI 美感、動畫流暢度與響應式表現。
- 透過調整瀏覽器視窗模擬行動裝置響應式檢查。
