Spaces:

Lashtw
/

Math_Adventure_8thgrade

Running

App Files Files Community

Lashtw commited on Aug 21, 2025

Commit

c0b6856

verified ·

1 Parent(s): 8cb7f12

Upload 5 files

Browse files

Files changed (5) hide show

algebra.html +571 -0
gemstone.html +694 -0
harbor.html +654 -0
index.html +180 -19
philosophy.html +429 -0

algebra.html ADDED Viewed

	@@ -0,0 +1,571 @@

+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島 - 代數之丘</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            touch-action: none; /* 防止在觸控拖曳時滾動頁面 */
+            background-image: url('https://i.meee.com.tw/AF01kln.png');
+            background-size: cover;
+            background-position: center;
+        }
+        /* 自訂積木顏色 */
+        .block-a-squared { background-color: #fca5a5; } /* red-300 */
+        .block-b-squared { background-color: #818cf8; } /* indigo-400 */
+        .block-ab { background-color: #fcd34d; } /* amber-300 */
+        .block-distractor { background-color: #9ca3af; } /* gray-400 */
+        /* 拼圖區格線 */
+        #grid-container {
+            display: grid;
+            background-image:
+                linear-gradient(to right, #d1d5db 1px, transparent 1px),
+                linear-gradient(to bottom, #d1d5db 1px, transparent 1px);
+            background-size: var(--unit-size) var(--unit-size);
+            border: 2px solid #6b7280;
+        }
+        /* 拖曳中的複製物件 */
+        .dragging-clone {
+            position: absolute;
+            pointer-events: none; /* 讓滑鼠事件穿透複製物件 */
+            z-index: 1000;
+            opacity: 0.8;
+            border: 2px dashed #4f46e5;
+        }
+        /* 已放置在選項區的積木 */
+        .palette-block.placed {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        /* 已放置在拼圖區的積木 */
+        .placed-block {
+            position: absolute;
+            cursor: pointer;
+            border: 2px solid #1f2937;
+            transition: all 0.2s ease-in-out;
+        }
+        .placed-block:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(0,0,0,0.5);
+        }
+        /* 過關時的特別框線 */
+        .highlight-win {
+            background-color: #fef9c3; /* yellow-100 */
+            border: 2px solid #f59e0b; /* amber-500 */
+            border-radius: 8px;
+            padding: 2px 6px;
+            display: inline-block;
+        }
+        /* 隱藏滾動條，但在觸控設備上仍可滾動 */
+        #block-palette::-webkit-scrollbar {
+            display: none;
+        }
+        #block-palette {
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+    </style>
+</head>
+<body class="w-screen h-screen overflow-hidden flex items-center justify-center relative">
+    <!-- 任務說明畫面 -->
+    <div id="start-screen" class="absolute inset-0 w-screen h-screen flex items-center justify-center p-4 transition-opacity duration-500 bg-gray-900/50">
+        <div class="container mx-auto p-6 md:p-8 bg-white/90 backdrop-blur-sm rounded-xl shadow-2xl max-w-2xl text-center">
+            <h1 class="text-3xl md:text-4xl font-bold text-indigo-600 mb-6">任務說明：代數之丘</h1>
+            <p class="text-lg text-gray-700 mb-4">歡迎來到代數之丘！在這裡，我們不用死背公式，而是用雙手「拼」出數學！</p>
+            <p class="text-lg text-gray-700 mb-8">你的任務是拖曳下方的彩色積木，將左邊的灰色正方形完全填滿，親身體驗 <span class="font-mono font-bold text-indigo-700">(a+b)² = a² + 2ab + b²</span> 這個公式是如何誕生的！</p>
+            <button id="start-button" class="w-full md:w-1/2 bg-indigo-600 text-white font-bold py-3 md:py-4 px-6 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg text-lg md:text-xl">
+                開始挑戰
+            </button>
+        </div>
+    </div>
+    <!-- 遊戲主畫面 -->
+    <div id="game-container" class="flex flex-row w-full h-full max-w-screen-xl mx-auto p-4 lg:p-8 gap-8 items-start transition-opacity duration-500 opacity-0 hidden">
+        <!-- 左欄：包含拼圖區和過關訊息 -->
+        <div class="w-1/3 flex flex-col items-center justify-start gap-6">
+            <div id="grid-container" class="relative bg-gray-200/80 backdrop-blur-sm shadow-xl rounded-lg">
+                <!-- 拼圖區的積木會由 JS 動態加入這裡 -->
+            </div>
+            <!-- 過關訊息與按鈕 (已移至此處) -->
+            <div id="win-message-container" class="w-full text-center p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg hidden">
+                <p class="text-2xl font-bold text-green-600">恭喜過關！</p>
+                <p id="win-formula-explanation" class="text-lg text-gray-700 mt-2"></p>
+                <button id="next-level-button" class="mt-4 w-full bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-700 transition-colors shadow-md">
+                    挑戰下一關
+                </button>
+            </div>
+        </div>
+        <!-- 右欄：控制項 -->
+        <div id="controls-container" class="w-2/3 flex-shrink-0 flex flex-col bg-white/90 backdrop-blur-sm rounded-xl shadow-lg p-6 h-full">
+            <h1 class="text-3xl font-bold text-gray-800 text-center">代數之丘</h1>
+            <hr class="my-4">
+            <!-- 算式區 -->
+            <div class="bg-blue-50/80 p-4 rounded-lg mb-4 space-y-2">
+                <!-- 題目行 -->
+                <div class="grid grid-cols-4 items-baseline">
+                    <p class="text-lg text-gray-600 font-semibold col-span-1">題目：</p>
+                    <p id="equation-title" class="col-span-3 text-2xl font-bold text-indigo-700 text-center"></p>
+                </div>
+                <!-- 面積結果行 -->
+                <div class="grid grid-cols-4 items-baseline">
+                    <p class="text-lg text-gray-600 font-semibold col-span-1">面積結果：</p>
+                    <div id="equation-result" class="col-span-3 text-2xl font-mono text-gray-800 text-center"></div>
+                </div>
+            </div>
+            <!-- 說明文字 -->
+            <div id="instructions" class="text-center text-gray-500 mb-4 text-sm">
+                <p>請從下方拖曳積木，拼滿左邊的正方形。</p>
+                <p class="mt-1">💡 <span class="font-semibold">提示：</span>點擊已放置的積木可以將它移除。</p>
+            </div>
+            <!-- 積木選項區 (包含捲動按鈕) -->
+            <div class="relative mt-auto">
+                <div id="block-palette" class="flex flex-row flex-nowrap overflow-x-auto items-center gap-4 p-4 bg-gray-100/80 rounded-md">
+                    <!-- 積木選項會由 JS 動態加入這裡 -->
+                </div>
+                <!-- 左捲動按鈕 -->
+                <button id="scroll-left-button" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-1 shadow-md hidden transition-opacity">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                    </svg>
+                </button>
+                <!-- 右捲動按鈕 -->
+                <button id="scroll-right-button" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-1 shadow-md hidden transition-opacity">
+                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- 秘密揭曉畫面 (從 secret.html 整合進來) -->
+    <div id="secret-view" class="absolute inset-0 w-screen h-screen flex items-center justify-center p-4 opacity-0 hidden transition-opacity duration-500 bg-gray-900/50">
+        <div class="container mx-auto p-6 md:p-8 bg-white rounded-xl shadow-2xl max-w-4xl text-center">
+            <h1 class="text-3xl md:text-4xl font-bold text-indigo-600 mb-8">代數之丘最大的秘密</h1>
+            <div class="grid md:grid-cols-3 gap-6 md:gap-8 mb-8">
+                <!-- Image 1 -->
+                <div class="flex flex-col items-center p-2 border rounded-lg">
+                    <img src="https://i.meee.com.tw/Sx68qrS.png" alt="拼圖 (6+4)²" class="rounded-md shadow-md mb-4 w-full" onerror="this.onerror=null;this.src='https://placehold.co/400x400/fca5a5/ffffff?text=(6%2B4)%C2%B2';">
+                    <p class="text-lg md:text-xl font-mono font-bold">(6+4)² = 6² + <span class="highlight-win">2×6×4</span> + 4²</p>
+                </div>
+                <!-- Image 2 -->
+                <div class="flex flex-col items-center p-2 border rounded-lg">
+                    <img src="https://i.meee.com.tw/7gGAB80.png" alt="拼圖 (4+9)²" class="rounded-md shadow-md mb-4 w-full" onerror="this.onerror=null;this.src='https://placehold.co/400x400/818cf8/ffffff?text=(4%2B9)%C2%B2';">
+                    <p class="text-lg md:text-xl font-mono font-bold">(4+9)² = 4² + <span class="highlight-win">2×4×9</span> + 9²</p>
+                </div>
+                <!-- Image 3 -->
+                <div class="flex flex-col items-center p-2 border rounded-lg">
+                    <img src="https://i.meee.com.tw/0hdfRvP.png" alt="拼圖 (7+5)²" class="rounded-md shadow-md mb-4 w-full" onerror="this.onerror=null;this.src='https://placehold.co/400x400/fcd34d/ffffff?text=(7%2B5)%C2%B2';">
+                    <p class="text-lg md:text-xl font-mono font-bold">(7+5)² = 7² + <span class="highlight-win">2×7×5</span> + 5²</p>
+                </div>
+            </div>
+            <div class="text-left text-base md:text-lg text-gray-700 space-y-4 border-t-2 pt-8">
+                <p>選舉最大的祕密就是：票多的贏，票少的輸...<span class="italic text-gray-500">咳咳不是這個啦</span></p>
+                <p class="text-xl md:text-2xl font-bold text-red-600">代數之丘的最大秘密就是：(a+b)²展開後一定會有ab這項，而且還是<span class="underline decoration-wavy decoration-amber-500">2ab</span>，學會這個，這單元就已經學會一半了！</p>
+                <p class="font-semibold text-indigo-700">(請在學習單上做紀錄！)</p>
+            </div>
+            <div class="mt-12">
+                <a href="index.html" class="inline-block w-full md:w-1/2 bg-indigo-600 text-white font-bold py-3 md:py-4 px-6 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg text-lg md:text-xl">
+                    回到探險島地圖
+                </a>
+            </div>
+        </div>
+    </div>
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- 常數與設定 ---
+        const UNIT_SIZE = 30; // 每個單位格的像素大小 (px)
+        const levels = [
+            { a: 6, b: 4, distractors: [] },
+            { a: 4, b: 9, distractors: [{w: 5, h: 8}, {w: 7, h: 6}] },
+            { a: 7, b: 5, distractors: [{w: 8, h: 6}, {w: 6, h: 8}] }
+        ];
+        let currentLevel = 0;
+        // --- DOM 元素 ---
+        const startScreen = document.getElementById('start-screen');
+        const startButton = document.getElementById('start-button');
+        const gameContainer = document.getElementById('game-container');
+        const secretView = document.getElementById('secret-view');
+        const gridContainer = document.getElementById('grid-container');
+        const blockPalette = document.getElementById('block-palette');
+        const equationTitle = document.getElementById('equation-title');
+        const equationResult = document.getElementById('equation-result');
+        const winMessageContainer = document.getElementById('win-message-container');
+        const winFormulaExplanation = document.getElementById('win-formula-explanation');
+        const nextLevelButton = document.getElementById('next-level-button');
+        const scrollLeftButton = document.getElementById('scroll-left-button');
+        const scrollRightButton = document.getElementById('scroll-right-button');
+        // --- 遊戲狀態 ---
+        let gridState = []; // 2D 陣列，記錄拼圖區每個格子的佔用情況
+        let placedBlocks = new Map(); // 記錄已放置的積木 (key: placedId, value: { el, originalId, type })
+        let draggingElement = null; // 目前正在拖曳的原始積木
+        let clone = null; // 拖曳時的複製物件
+        let offset = { x: 0, y: 0 }; // 拖曳時的滑鼠偏移量
+        // --- 核心函式 ---
+        function initLevel(levelIndex) {
+            currentLevel = levelIndex;
+            const level = levels[levelIndex];
+            const totalSize = level.a + level.b;
+            gridContainer.innerHTML = '';
+            blockPalette.innerHTML = '';
+            winMessageContainer.classList.add('hidden');
+            placedBlocks.clear();
+            gridContainer.style.width = `${totalSize * UNIT_SIZE}px`;
+            gridContainer.style.height = `${totalSize * UNIT_SIZE}px`;
+            gridContainer.style.setProperty('--unit-size', `${UNIT_SIZE}px`);
+            gridState = Array(totalSize).fill(null).map(() => Array(totalSize).fill(null));
+            createBlocks(level);
+            updateEquation();
+            if (currentLevel === levels.length - 1) {
+                nextLevelButton.textContent = '查看代數的秘密';
+            } else {
+                nextLevelButton.textContent = '挑戰下一關';
+            }
+            // 延遲執行以確保 DOM 尺寸已更新
+            setTimeout(updateScrollButtonsVisibility, 100);
+        }
+        function createBlocks(level) {
+            const { a, b, distractors } = level;
+            const blocksData = [
+                { id: 'a_squared', w: a, h: a, type: 'correct', class: 'block-a-squared', label: `${a}×${a}` },
+                { id: 'b_squared', w: b, h: b, type: 'correct', class: 'block-b-squared', label: `${b}×${b}` },
+                { id: 'ab1', w: a, h: b, type: 'correct', class: 'block-ab', label: `${a}×${b}` },
+                { id: 'ab2', w: b, h: a, type: 'correct', class: 'block-ab', label: `${b}×${a}` },
+                ...distractors.map((d, i) => ({
+                    id: `distractor_${i}`, w: d.w, h: d.h, type: 'distractor', class: 'block-distractor', label: `${d.w}×${d.h}`
+                }))
+            ];
+            blocksData.sort(() => Math.random() - 0.5);
+            blocksData.forEach(data => {
+                const blockEl = document.createElement('div');
+                blockEl.id = `palette-${data.id}`;
+                blockEl.className = `palette-block flex-shrink-0 ${data.class} rounded-md shadow-sm cursor-grab flex items-center justify-center text-white font-bold text-base`;
+                blockEl.style.width = `${data.w * UNIT_SIZE}px`;
+                blockEl.style.height = `${data.h * UNIT_SIZE}px`;
+                blockEl.textContent = data.label;
+                blockEl.dataset.id = data.id;
+                blockEl.dataset.w = data.w;
+                blockEl.dataset.h = data.h;
+                blockEl.dataset.type = data.type;
+                blockEl.dataset.class = data.class;
+                blockPalette.appendChild(blockEl);
+            });
+        }
+        function updateEquation() {
+            const level = levels[currentLevel];
+            equationTitle.textContent = `(${level.a} + ${level.b})²`;
+            const placedCorrectBlocks = Array.from(placedBlocks.values()).filter(b => b.type === 'correct');
+            let parts = [];
+            if (placedCorrectBlocks.some(b => b.originalId === 'a_squared')) parts.push(`${level.a}²`);
+            if (placedCorrectBlocks.some(b => b.originalId === 'b_squared')) parts.push(`${level.b}²`);
+            const abCount = placedCorrectBlocks.filter(b => b.originalId.startsWith('ab')).length;
+            if (abCount === 1) parts.push(`(${level.a}×${level.b})`);
+            if (abCount === 2) parts.push(`2(${level.a}×${level.b})`);
+            if (parts.length > 0) {
+                equationResult.innerHTML = parts.join(' + ');
+            } else {
+                equationResult.innerHTML = '...';
+            }
+        }
+        // --- 拖曳事件處理 ---
+        function onDragStart(e) {
+            const target = e.target.closest('.palette-block');
+            if (!target || target.classList.contains('placed')) return;
+            e.preventDefault();
+            draggingElement = target;
+            const rect = target.getBoundingClientRect();
+            const pointer = getPointer(e);
+            offset.x = pointer.x - rect.left;
+            offset.y = pointer.y - rect.top;
+            clone = target.cloneNode(true);
+            clone.classList.remove('palette-block');
+            clone.classList.add('dragging-clone');
+            clone.style.width = `${target.dataset.w * UNIT_SIZE}px`;
+            clone.style.height = `${target.dataset.h * UNIT_SIZE}px`;
+            document.body.appendChild(clone);
+            moveClone(pointer.x, pointer.y);
+            document.addEventListener('mousemove', onDragMove);
+            document.addEventListener('touchmove', onDragMove, { passive: false });
+            document.addEventListener('mouseup', onDragEnd);
+            document.addEventListener('touchend', onDragEnd);
+        }
+        function onDragMove(e) {
+            if (!clone) return;
+            e.preventDefault();
+            const pointer = getPointer(e);
+            moveClone(pointer.x, pointer.y);
+        }
+        function onDragEnd(e) {
+            if (!draggingElement || !clone) return;
+            const gridRect = gridContainer.getBoundingClientRect();
+            const pointer = getPointer(e);
+            const blockTopLeftX = pointer.x - gridRect.left - offset.x;
+            const blockTopLeftY = pointer.y - gridRect.top - offset.y;
+            const gridX = Math.round(blockTopLeftX / UNIT_SIZE);
+            const gridY = Math.round(blockTopLeftY / UNIT_SIZE);
+            const w = parseInt(draggingElement.dataset.w);
+            const h = parseInt(draggingElement.dataset.h);
+            const type = draggingElement.dataset.type;
+            if (canPlace(gridX, gridY, w, h, type)) {
+                placeBlock(gridX, gridY, w, h);
+            }
+            document.body.removeChild(clone);
+            clone = null;
+            draggingElement = null;
+            document.removeEventListener('mousemove', onDragMove);
+            document.removeEventListener('touchmove', onDragMove);
+            document.removeEventListener('mouseup', onDragEnd);
+            document.removeEventListener('touchend', onDragEnd);
+        }
+        function canPlace(gridX, gridY, w, h, type) {
+            const totalSize = levels[currentLevel].a + levels[currentLevel].b;
+            if (currentLevel === 1 && type === 'distractor') {
+                return false;
+            }
+            if (gridX < 0 || gridY < 0 || gridX + w > totalSize || gridY + h > totalSize) {
+                return false;
+            }
+            for (let i = gridY; i < gridY + h; i++) {
+                for (let j = gridX; j < gridX + w; j++) {
+                    if (i >= totalSize || j >= totalSize || gridState[i][j] !== null) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        function placeBlock(gridX, gridY, w, h) {
+            const placedId = `placed-${Date.now()}`;
+            for (let i = gridY; i < gridY + h; i++) {
+                for (let j = gridX; j < gridX + w; j++) {
+                    gridState[i][j] = placedId;
+                }
+            }
+            const placedEl = document.createElement('div');
+            placedEl.id = placedId;
+            placedEl.className = `placed-block ${draggingElement.dataset.class} flex items-center justify-center text-white font-bold`;
+            placedEl.style.left = `${gridX * UNIT_SIZE}px`;
+            placedEl.style.top = `${gridY * UNIT_SIZE}px`;
+            placedEl.style.width = `${w * UNIT_SIZE}px`;
+            placedEl.style.height = `${h * UNIT_SIZE}px`;
+            placedEl.textContent = `${w}×${h}`;
+            gridContainer.appendChild(placedEl);
+            placedBlocks.set(placedId, {
+                el: placedEl,
+                originalId: draggingElement.dataset.id,
+                type: draggingElement.dataset.type,
+                gridX, gridY, w, h
+            });
+            draggingElement.classList.add('placed');
+            placedEl.addEventListener('click', () => removeBlock(placedId));
+            updateEquation();
+            checkWinCondition();
+        }
+        function removeBlock(placedId) {
+            const block = placedBlocks.get(placedId);
+            if (!block) return;
+            gridContainer.removeChild(block.el);
+            for (let i = block.gridY; i < block.gridY + block.h; i++) {
+                for (let j = block.gridX; j < block.gridX + block.w; j++) {
+                    if (gridState[i][j] === placedId) {
+                        gridState[i][j] = null;
+                    }
+                }
+            }
+            placedBlocks.delete(placedId);
+            const originalBlock = document.getElementById(`palette-${block.originalId}`);
+            if (originalBlock) {
+                originalBlock.classList.remove('placed');
+            }
+            updateEquation();
+        }
+        function checkWinCondition() {
+            const level = levels[currentLevel];
+            const totalSize = level.a + level.b;
+            const placedCorrectCount = Array.from(placedBlocks.values()).filter(b => b.type === 'correct').length;
+            if (placedCorrectCount !== 4) return;
+            let isFull = true;
+            for (let i = 0; i < totalSize; i++) {
+                for (let j = 0; j < totalSize; j++) {
+                    if (gridState[i][j] === null) {
+                        isFull = false;
+                        break;
+                    }
+                }
+                if (!isFull) break;
+            }
+            if (isFull) {
+                showWinState();
+            }
+        }
+        function showWinState() {
+            const level = levels[currentLevel];
+            const finalFormula = `(${level.a}+${level.b})² = ${level.a}² + <span class="highlight-win">2×${level.a}×${level.b}</span> + ${level.b}²`;
+            winFormulaExplanation.innerHTML = finalFormula;
+            winMessageContainer.classList.remove('hidden');
+            blockPalette.style.pointerEvents = 'none';
+            gridContainer.style.pointerEvents = 'none';
+        }
+        // --- 捲動與輔助函式 ---
+        function updateScrollButtonsVisibility() {
+            const palette = blockPalette;
+            const scrollLeft = palette.scrollLeft;
+            const scrollWidth = palette.scrollWidth;
+            const clientWidth = palette.clientWidth;
+            if (scrollWidth <= clientWidth) {
+                scrollLeftButton.classList.add('hidden');
+                scrollRightButton.classList.add('hidden');
+                return;
+            }
+            if (scrollLeft > 0) {
+                scrollLeftButton.classList.remove('hidden');
+            } else {
+                scrollLeftButton.classList.add('hidden');
+            }
+            if (scrollLeft < scrollWidth - clientWidth - 1) {
+                scrollRightButton.classList.remove('hidden');
+            } else {
+                scrollRightButton.classList.add('hidden');
+            }
+        }
+        function getPointer(e) {
+            if (e.touches && e.touches.length > 0) {
+                return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            }
+            return { x: e.clientX, y: e.clientY };
+        }
+        function moveClone(x, y) {
+            if (!clone) return;
+            clone.style.left = `${x - offset.x}px`;
+            clone.style.top = `${y - offset.y}px`;
+        }
+        // --- 事件監聽 ---
+        startButton.addEventListener('click', () => {
+            startScreen.style.opacity = '0';
+            gameContainer.classList.remove('hidden');
+            setTimeout(() => {
+                startScreen.classList.add('hidden');
+                gameContainer.style.opacity = '1';
+                initLevel(currentLevel);
+            }, 500);
+        });
+        blockPalette.addEventListener('mousedown', onDragStart);
+        blockPalette.addEventListener('touchstart', onDragStart, { passive: false });
+        blockPalette.addEventListener('scroll', updateScrollButtonsVisibility);
+        window.addEventListener('resize', updateScrollButtonsVisibility);
+        scrollLeftButton.addEventListener('click', () => {
+            blockPalette.scrollBy({ left: -200, behavior: 'smooth' });
+        });
+        scrollRightButton.addEventListener('click', () => {
+            blockPalette.scrollBy({ left: 200, behavior: 'smooth' });
+        });
+        nextLevelButton.addEventListener('click', () => {
+            if (currentLevel < levels.length - 1) {
+                initLevel(currentLevel + 1);
+                blockPalette.style.pointerEvents = 'auto';
+                gridContainer.style.pointerEvents = 'auto';
+            } else {
+                // 顯示秘密畫面
+                gameContainer.style.opacity = '0';
+                secretView.classList.remove('hidden');
+                setTimeout(() => {
+                    gameContainer.classList.add('hidden');
+                    secretView.style.opacity = '1';
+                }, 500);
+            }
+        });
+    });
+    </script>
+</body>
+</html>

gemstone.html ADDED Viewed

	@@ -0,0 +1,694 @@

+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島 - 寶石洞窟</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-image: url('https://i.meee.com.tw/pI0c5ue.png');
+            background-size: cover;
+            background-position: center;
+        }
+        canvas {
+            background-color: #2d241d;
+            display: block;
+            border-radius: 0.5rem;
+            box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
+        }
+        .action-button {
+            transition: all 0.2s ease-in-out;
+            box-shadow: 0 5px #995f00;
+        }
+        .action-button:active {
+            transform: translateY(3px);
+            box-shadow: 0 2px #995f00;
+        }
+        .move-button {
+            transition: all 0.2s ease-in-out;
+            box-shadow: 0 5px #1e3a8a;
+        }
+        .move-button:active {
+            transform: translateY(3px);
+            box-shadow: 0 2px #1e3a8a;
+        }
+        .gem-button {
+            transition: transform 0.1s ease-in-out;
+        }
+        .gem-button:active {
+            transform: scale(0.9);
+        }
+        .secret-bg {
+             background-image: url('https://i.meee.com.tw/EKZpYKI.png');
+             background-size: cover;
+             background-position: center;
+        }
+    </style>
+</head>
+<body class="flex items-center justify-center h-screen overflow-hidden">
+    <div id="container" class="w-full max-w-md mx-auto text-white p-4 flex flex-col h-full">
+        <!-- 引導畫面 -->
+        <div id="start-screen" class="flex flex-col items-center justify-center text-center p-8 bg-black bg-opacity-60 rounded-lg my-auto">
+            <h1 class="text-4xl font-bold text-amber-300 mb-4">寶石洞窟</h1>
+            <p class="text-lg text-gray-200 mb-8">這是一個已經廢棄的寶石洞窟，接下來你必須駕駛一台礦車，成功閃避障礙物來獲得璀璨寶石！</p>
+            <button id="start-button" class="action-button bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-4 px-8 rounded-lg text-2xl">
+                開始採礦
+            </button>
+        </div>
+        <!-- 遊戲畫面 -->
+        <div id="game-screen" class="hidden flex-col h-full">
+            <div id="canvas-wrapper" class="relative">
+                <canvas id="gameCanvas"></canvas>
+                <!-- 操作說明畫面 -->
+                <div id="instructions-screen" class="hidden absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center text-center p-4 rounded-lg">
+                    <h2 class="text-3xl font-bold text-amber-300 mb-6">操作說明</h2>
+                    <div class="space-y-4 text-lg">
+                        <p>點擊畫面<span class="text-blue-400 font-bold">左半邊</span>或按<span class="text-blue-400 font-bold">左方向鍵</span> ← 向左移動</p>
+                        <p>點擊畫面<span class="text-blue-400 font-bold">右半邊</span>或按<span class="text-blue-400 font-bold">右方向鍵</span> → 向右移動</p>
+                        <p class="mt-4">也可以使用下方的按鈕操作！</p>
+                    </div>
+                    <button id="play-game-button" class="action-button bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                        了解！
+                    </button>
+                </div>
+                <!-- 遊戲結束畫面 -->
+                <div id="game-over-screen" class="hidden absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center text-center p-4 rounded-lg">
+                    <h2 class="text-4xl font-bold text-red-500 mb-4">挑戰失敗！</h2>
+                    <p class="text-xl mb-6">礦車撞毀了！</p>
+                    <button id="restart-button" class="action-button bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-3 px-6 rounded-lg text-xl">
+                        重新挑戰
+                    </button>
+                </div>
+                 <!-- 遊戲獲勝畫面 -->
+                <div id="win-screen" class="hidden absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center text-center p-4 rounded-lg">
+                    <h2 class="text-4xl font-bold text-green-400 mb-4">成功！</h2>
+                    <p class="text-xl mb-2">你成功抵達了寶石區域！</p>
+                    <p id="win-perfect-dodges" class="text-2xl text-amber-300 font-bold mb-6"></p>
+                    <button id="continue-button" class="action-button bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg text-xl">
+                        繼續前進
+                    </button>
+                </div>
+            </div>
+            <!-- 移動按鈕 -->
+            <div id="controls" class="flex justify-between mt-4">
+                <button id="move-left-button" class="move-button bg-blue-600 hover:bg-blue-700 text-white font-bold p-4 rounded-lg w-24 h-16">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+                </button>
+                <button id="move-right-button" class="move-button bg-blue-600 hover:bg-blue-700 text-white font-bold p-4 rounded-lg w-24 h-16">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+                </button>
+            </div>
+        </div>
+        <!-- 寶石解謎畫面 -->
+        <div id="puzzle-screen" class="hidden flex-col h-full p-6 bg-black bg-opacity-60 rounded-lg">
+            <div class="flex-grow overflow-y-auto">
+                <h1 class="text-3xl font-bold text-amber-300 text-center mb-4">寶石組合挑戰</h1>
+                <p class="text-center mb-4">觀察大寶石，點擊下方的小寶石，組合出正確的配方！</p>
+                <div class="flex justify-center mb-4">
+                    <img id="large-gem-image" src="" class="h-40 object-contain" alt="[大寶石的Image]">
+                </div>
+                <div id="answer-slots" class="bg-gray-900/50 min-h-[80px] rounded-lg p-2 flex flex-wrap items-center justify-center gap-2 mb-4 border-2 border-amber-400"></div>
+                <div id="small-gem-options" class="flex justify-center items-center gap-4 mb-6 flex-wrap"></div>
+                <div id="puzzle-feedback" class="text-center text-xl font-bold min-h-[32px] mb-4"></div>
+            </div>
+            <div class="flex gap-4 mt-auto pt-4">
+                <button id="reset-puzzle-button" class="w-1/2 bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 rounded-lg">重置</button>
+                <button id="check-puzzle-button" class="w-1/2 bg-green-500 hover:bg-green-600 text-white font-bold py-3 rounded-lg">鑑定寶石</button>
+            </div>
+        </div>
+        <!-- 過場畫面 -->
+        <div id="intermission-screen" class="hidden flex-col text-center p-8 bg-black bg-opacity-60 rounded-lg my-auto">
+            <h1 class="text-3xl font-bold text-amber-300 mb-4">準備挑戰下一區！</h1>
+            <p class="text-lg text-gray-200 mb-8">前方的礦道更加危險，速度會更快！</p>
+            <button id="start-next-stage-button" class="action-button bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-4 px-8 rounded-lg text-2xl">
+                繼續採礦
+            </button>
+        </div>
+        <!-- 最終通關畫面 -->
+        <div id="final-win-screen" class="hidden flex-col text-center p-8 bg-black bg-opacity-60 rounded-lg my-auto">
+             <h1 class="text-4xl font-bold text-green-400 mb-4">恭喜你完成所有寶石挑戰！</h1>
+             <button id="unlock-secret-button" class="action-button bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-lg text-2xl">
+                解鎖寶石洞窟的秘密
+            </button>
+        </div>
+    </div>
+    <!-- 秘密揭曉畫面 (獨立於 container 之外) -->
+    <div id="secret-screen" class="hidden absolute inset-0 w-screen h-screen secret-bg p-8 text-white flex-col items-center justify-center">
+        <div class="w-full max-w-2xl bg-black bg-opacity-70 p-8 rounded-xl">
+            <div id="secret-question">
+                <h2 class="text-3xl font-bold text-amber-300 mb-6">你認為這個洞窟的秘密是...</h2>
+                <div class="space-y-4 text-lg">
+                    <button data-choice="A" class="secret-choice w-full text-left p-4 bg-white/10 hover:bg-white/20 rounded-lg transition-colors">A. 如何完美駕駛礦車，一次通關</button>
+                    <button data-choice="B" class="secret-choice w-full text-left p-4 bg-white/10 hover:bg-white/20 rounded-lg transition-colors">B. 如何增加完美閃避的次數</button>
+                    <button data-choice="C" class="secret-choice w-full text-left p-4 bg-white/10 hover:bg-white/20 rounded-lg transition-colors">C. 寶石分析術</button>
+                </div>
+                <p id="secret-feedback" class="mt-6 min-h-[28px] text-xl"></p>
+            </div>
+            <div id="secret-reveal" class="hidden text-left space-y-4">
+                <p class="text-lg">從最小的寶石到浩瀚的星辰，萬事萬物都由更基本的元素構成。你學會的『寶石分析術』，在數學的世界裡，它被稱為『因式分解』。</p>
+                <p class="text-2xl font-bold text-amber-300">這個洞窟的秘密就是：學會分析與拆解，就是看透事物本質的第一步。</p>
+                <p class="text-lg">無論是分析一顆寶石的成分、一道數學題的結構，還是未來你遇到的任何複雜問題，這種化繁為簡的智慧，才是你從這裡帶走、永不消失的真正寶藏。</p>
+            </div>
+             <div class="mt-12 text-center">
+                <a href="index.html" id="back-to-map-button" class="action-button inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-xl">
+                    回到探險島地圖
+                </a>
+            </div>
+        </div>
+    </div>
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- 畫面元素 ---
+        const container = document.getElementById('container');
+        const startScreen = document.getElementById('start-screen');
+        const gameScreen = document.getElementById('game-screen');
+        const puzzleScreen = document.getElementById('puzzle-screen');
+        const intermissionScreen = document.getElementById('intermission-screen');
+        const finalWinScreen = document.getElementById('final-win-screen');
+        const secretScreen = document.getElementById('secret-screen');
+        const startButton = document.getElementById('start-button');
+        const instructionsScreen = document.getElementById('instructions-screen');
+        const playGameButton = document.getElementById('play-game-button');
+        const gameOverScreen = document.getElementById('game-over-screen');
+        const winScreen = document.getElementById('win-screen');
+        const winPerfectDodges = document.getElementById('win-perfect-dodges');
+        const restartButton = document.getElementById('restart-button');
+        const continueButton = document.getElementById('continue-button');
+        const startNextStageButton = document.getElementById('start-next-stage-button');
+        const unlockSecretButton = document.getElementById('unlock-secret-button');
+        const canvas = document.getElementById('gameCanvas');
+        const canvasWrapper = document.getElementById('canvas-wrapper');
+        const moveLeftButton = document.getElementById('move-left-button');
+        const moveRightButton = document.getElementById('move-right-button');
+        const ctx = canvas.getContext('2d');
+        // --- 寶石解謎元素 ---
+        const largeGemImage = document.getElementById('large-gem-image');
+        const answerSlots = document.getElementById('answer-slots');
+        const smallGemOptions = document.getElementById('small-gem-options');
+        const puzzleFeedback = document.getElementById('puzzle-feedback');
+        const resetPuzzleButton = document.getElementById('reset-puzzle-button');
+        const checkPuzzleButton = document.getElementById('check-puzzle-button');
+        // --- 秘密揭曉元素 ---
+        const secretQuestion = document.getElementById('secret-question');
+        const secretReveal = document.getElementById('secret-reveal');
+        const secretFeedback = document.getElementById('secret-feedback');
+        const secretChoiceButtons = document.querySelectorAll('.secret-choice');
+        // --- 遊戲設定 ---
+        const LANE_COUNT = 3;
+        let laneWidth;
+        let gameInterval, timer, obstacleInterval;
+        let timeLeft;
+        let perfectDodges = 0;
+        const perfectDodgeTexts = [];
+        let keySequence = [];
+        const cheatCode = "kkkkk";
+        let currentStage = 0;
+        let currentStageSettings;
+        const gameStages = [
+            { speed: 2.5, time: 20, spawnRate: 1800 },
+            { speed: 3.5, time: 15, spawnRate: 1200 },
+            { speed: 4.0, time: 12, spawnRate: 1000 }
+        ];
+        // --- 寶石解謎設定 ---
+        const allSmallGems = [
+            { id: 1, src: 'https://i.meee.com.tw/FeaxgIn.png' },
+            { id: 2, src: 'https://i.meee.com.tw/VgnnNxo.png' },
+            { id: 3, src: 'https://i.meee.com.tw/5vu7Qk1.png' },
+            { id: 4, src: 'https://i.meee.com.tw/eoel84q.png' },
+            { id: 5, src: 'https://i.meee.com.tw/b2uL22E.png' },
+            { id: 6, src: 'https://i.meee.com.tw/HeduyDE.png' },
+            { id: 7, src: 'https://i.meee.com.tw/2gorePd.png' },
+            { id: 8, src: 'https://i.meee.com.tw/HNNEM09.png' },
+            { id: 9, src: 'https://i.meee.com.tw/cpw8ccy.png' },
+            { id: 10, src: 'https://i.meee.com.tw/Rk8hY7H.png' }
+        ];
+        const puzzleLevels = [
+            {
+                largeGemSrc: 'https://i.meee.com.tw/PU1busV.png',
+                options: [1, 2, 3],
+                answer: { 1: 1, 2: 3, 3: 1 },
+                maxGems: 5
+            },
+            {
+                largeGemSrc: 'https://i.meee.com.tw/JCK7B2S.png',
+                options: [2, 3, 4, 5, 6, 7],
+                answer: { 3: 2, 7: 2, 2: 1, 4: 1, 5: 1, 6: 1 },
+                maxGems: 8
+            },
+            {
+                largeGemSrc: 'https://i.meee.com.tw/wFJquPy.png',
+                options: [2, 3, 4, 5, 6, 8, 9, 10],
+                answer: { 8: 3, 10: 3, 5: 6, 9: 1 },
+                maxGems: 13
+            }
+        ];
+        let playerSelection = {};
+        // --- 玩家設定 ---
+        const player = {
+            x: 0, y: 0, width: 100, height: 100, lane: 1, image: new Image()
+        };
+        const normalCartSrc = 'https://i.meee.com.tw/w6krwUz.png';
+        const crashedCartSrc = 'https://i.meee.com.tw/4wSy5uX.png';
+        player.image.src = normalCartSrc;
+        player.image.onerror = () => { console.error("礦車圖片載入失敗！"); };
+        // --- 障礙物設定 ---
+        const obstacles = [];
+        const trackTies = [];
+        const obstacleImage = new Image();
+        obstacleImage.src = 'https://i.meee.com.tw/L0tV6le.png';
+        obstacleImage.onerror = () => { console.error("障礙物圖片載入失敗！"); };
+        let lastTieY = 0;
+        const TIE_SPACING = 50;
+        // --- 畫面管理 ---
+        function showScreen(screenId) {
+            ['start-screen', 'game-screen', 'puzzle-screen', 'intermission-screen', 'final-win-screen'].forEach(id => {
+                const screen = document.getElementById(id);
+                if (id === screenId) {
+                    screen.style.display = 'flex';
+                    screen.classList.remove('hidden');
+                    if(id === 'start-screen' || id === 'intermission-screen' || id === 'final-win-screen') {
+                        screen.classList.add('my-auto');
+                    } else {
+                        screen.classList.remove('my-auto');
+                    }
+                } else {
+                    screen.style.display = 'none';
+                    screen.classList.add('hidden');
+                }
+            });
+        }
+        // --- 礦車遊戲函式 ---
+        function resizeCanvas() {
+            const container = document.getElementById('container');
+            const controls = document.getElementById('controls');
+            canvas.width = container.clientWidth;
+            canvas.height = window.innerHeight * 0.9 - controls.offsetHeight - 20;
+            canvasWrapper.style.width = `${canvas.width}px`;
+            canvasWrapper.style.height = `${canvas.height}px`;
+            laneWidth = canvas.width / LANE_COUNT;
+            player.y = canvas.height - player.height - 10;
+        }
+        function getLaneCenterX(lane) {
+            return (lane * laneWidth) + (laneWidth / 2);
+        }
+        function spawnTrackTies() {
+            while (lastTieY < canvas.height + TIE_SPACING) {
+                trackTies.push({ y: lastTieY });
+                lastTieY += TIE_SPACING;
+            }
+        }
+        function drawTrack() {
+            ctx.fillStyle = '#57402c';
+            trackTies.forEach(tie => {
+                for (let i = 0; i < LANE_COUNT; i++) {
+                    const laneX = getLaneCenterX(i);
+                    const rail1X = laneX - laneWidth * 0.25;
+                    const rail2X = laneX + laneWidth * 0.25;
+                    ctx.fillRect(rail1X, tie.y, rail2X - rail1X, 10);
+                }
+            });
+            const railColor = '#858585', highlightColor = '#b0b0b0', railWidth = 8;
+            for (let i = 0; i < LANE_COUNT; i++) {
+                const laneX = getLaneCenterX(i);
+                const rail1X = laneX - laneWidth * 0.25;
+                const rail2X = laneX + laneWidth * 0.25;
+                ctx.fillStyle = railColor;
+                ctx.fillRect(rail1X - railWidth / 2, 0, railWidth, canvas.height);
+                ctx.fillRect(rail2X - railWidth / 2, 0, railWidth, canvas.height);
+                ctx.fillStyle = highlightColor;
+                ctx.fillRect(rail1X - railWidth / 2, 0, railWidth / 2, canvas.height);
+                ctx.fillRect(rail2X - railWidth / 2, 0, railWidth / 2, canvas.height);
+            }
+        }
+        function drawPlayer() {
+            player.x = getLaneCenterX(player.lane) - player.width / 2;
+            if (player.image.complete && player.image.naturalHeight !== 0) {
+                 ctx.drawImage(player.image, player.x, player.y, player.width, player.height);
+            } else {
+                ctx.fillStyle = 'blue';
+                ctx.fillRect(player.x, player.y, player.width, player.height);
+            }
+        }
+        function drawObstacles() {
+            obstacles.forEach(obstacle => {
+                if (obstacleImage.complete && obstacleImage.naturalHeight !== 0) {
+                    ctx.drawImage(obstacleImage, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
+                } else {
+                    ctx.fillStyle = '#a16207';
+                    ctx.beginPath();
+                    ctx.roundRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height, [10]);
+                    ctx.fill();
+                }
+            });
+        }
+        function drawUI() {
+            ctx.fillStyle = 'white';
+            ctx.font = 'bold 20px "Noto Sans TC"';
+            ctx.textAlign = 'center';
+            ctx.fillText(`倒數計時: ${timeLeft.toFixed(1)} 秒`, canvas.width / 2, 30);
+            ctx.textAlign = 'right';
+            ctx.fillText(`完美閃避: ${perfectDodges}`, canvas.width - 20, 30);
+            perfectDodgeTexts.forEach(text => {
+                ctx.save();
+                ctx.globalAlpha = text.alpha;
+                ctx.fillStyle = '#fde047';
+                ctx.font = 'bold 24px "Noto Sans TC"';
+                ctx.textAlign = 'center';
+                ctx.fillText(text.text, text.x, text.y);
+                ctx.restore();
+            });
+        }
+        function update() {
+            for (let i = trackTies.length - 1; i >= 0; i--) {
+                trackTies[i].y += currentStageSettings.speed;
+                if (trackTies[i].y > canvas.height) {
+                    trackTies.splice(i, 1);
+                    trackTies.unshift({ y: (trackTies[0]?.y || 0) - TIE_SPACING });
+                }
+            }
+            for (let i = obstacles.length - 1; i >= 0; i--) {
+                obstacles[i].y += currentStageSettings.speed;
+                if (obstacles[i].y > canvas.height) obstacles.splice(i, 1);
+            }
+            for (let i = perfectDodgeTexts.length - 1; i >= 0; i--) {
+                perfectDodgeTexts[i].y -= 1;
+                perfectDodgeTexts[i].alpha -= 0.02;
+                if (perfectDodgeTexts[i].alpha <= 0) perfectDodgeTexts.splice(i, 1);
+            }
+            obstacles.forEach(obstacle => {
+                if (player.lane === obstacle.lane && player.y < obstacle.y + obstacle.height && player.y + player.height > obstacle.y) {
+                    gameOver();
+                }
+            });
+        }
+        function draw() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawTrack();
+            drawObstacles();
+            drawPlayer();
+            drawUI();
+        }
+        function spawnObstacle() {
+            const lane = Math.floor(Math.random() * LANE_COUNT);
+            const size = laneWidth * 0.5;
+            const x = getLaneCenterX(lane) - size / 2;
+            obstacles.push({ x, y: -size, width: size, height: size, lane, dodged: false });
+        }
+        function gameLoop() {
+            update();
+            draw();
+            gameInterval = requestAnimationFrame(gameLoop);
+        }
+        function stopGame() {
+            if (gameInterval) cancelAnimationFrame(gameInterval);
+            if (timer) clearInterval(timer);
+            if (obstacleInterval) clearInterval(obstacleInterval);
+            gameInterval = timer = obstacleInterval = null;
+        }
+        function startGame(stageIndex) {
+            currentStage = stageIndex;
+            currentStageSettings = gameStages[stageIndex];
+            player.image.src = normalCartSrc; // Reset to normal cart image
+            stopGame();
+            instructionsScreen.classList.add('hidden');
+            gameOverScreen.classList.add('hidden');
+            winScreen.classList.add('hidden');
+            resizeCanvas();
+            obstacles.length = 0;
+            trackTies.length = 0;
+            perfectDodgeTexts.length = 0;
+            perfectDodges = 0;
+            lastTieY = 0;
+            spawnTrackTies();
+            player.lane = 1;
+            timeLeft = currentStageSettings.time;
+            timer = setInterval(() => {
+                timeLeft -= 0.1;
+                if (timeLeft <= 0) {
+                    timeLeft = 0;
+                    winGame();
+                }
+            }, 100);
+            obstacleInterval = setInterval(spawnObstacle, currentStageSettings.spawnRate);
+            gameLoop();
+        }
+        function gameOver() {
+            stopGame();
+            player.image.src = crashedCartSrc; // Change to crashed cart image
+            draw(); // Redraw canvas one last time with the new image
+            gameOverScreen.classList.remove('hidden');
+        }
+        function winGame() {
+            stopGame();
+            winPerfectDodges.textContent = `完美閃避: ${perfectDodges} 次`;
+            winScreen.classList.remove('hidden');
+        }
+        function handleMove(direction) {
+            if (!gameInterval) return;
+            const oldLane = player.lane;
+            let newLane = player.lane;
+            if (direction === 'left') newLane = Math.max(0, player.lane - 1);
+            else if (direction === 'right') newLane = Math.min(LANE_COUNT - 1, player.lane + 1);
+            if (oldLane !== newLane) {
+                player.lane = newLane;
+                checkPerfectDodge(oldLane);
+            }
+        }
+        function checkPerfectDodge(fromLane) {
+            const perfectDodgeZoneTop = player.y - player.height / 2;
+            const perfectDodgeZoneBottom = player.y + player.height;
+            obstacles.forEach(obstacle => {
+                if (obstacle.lane === fromLane && !obstacle.dodged) {
+                    if (obstacle.y + obstacle.height > perfectDodgeZoneTop && obstacle.y < perfectDodgeZoneBottom) {
+                        perfectDodges++;
+                        obstacle.dodged = true;
+                        perfectDodgeTexts.push({ text: '完美！', x: getLaneCenterX(fromLane), y: player.y, alpha: 1 });
+                    }
+                }
+            });
+        }
+        // --- 寶石解謎函式 ---
+        function showPuzzleScreen() {
+            showScreen('puzzle-screen');
+            loadPuzzleLevel(currentStage);
+        }
+        function loadPuzzleLevel(levelIndex) {
+            const level = puzzleLevels[levelIndex];
+            largeGemImage.src = level.largeGemSrc;
+            smallGemOptions.innerHTML = '';
+            level.options.forEach(gemId => {
+                const gemData = allSmallGems.find(g => g.id === gemId);
+                if (gemData) {
+                    const gemBtn = document.createElement('button');
+                    gemBtn.className = 'gem-button';
+                    gemBtn.innerHTML = `<img src="${gemData.src}" alt="小寶石 ${gemData.id}" class="h-16 w-16 object-contain">`;
+                    gemBtn.onclick = () => addGemToSelection(gemData);
+                    smallGemOptions.appendChild(gemBtn);
+                }
+            });
+            resetPuzzle();
+        }
+        function addGemToSelection(gem) {
+            const currentTotal = Object.values(playerSelection).reduce((sum, count) => sum + count, 0);
+            const level = puzzleLevels[currentStage];
+            if (currentTotal >= level.maxGems) {
+                puzzleFeedback.textContent = '數量太多了喔！';
+                puzzleFeedback.className = 'text-center text-xl font-bold min-h-[32px] mb-4 text-yellow-400';
+                setTimeout(() => {
+                    if(puzzleFeedback.textContent === '數量太多了喔！') {
+                       puzzleFeedback.textContent = '';
+                    }
+                }, 2000);
+                return;
+            }
+            playerSelection[gem.id] = (playerSelection[gem.id] || 0) + 1;
+            renderSelection();
+        }
+        function removeGemFromSelection(gemId) {
+            if (playerSelection[gemId]) {
+                playerSelection[gemId]--;
+                if (playerSelection[gemId] === 0) {
+                    delete playerSelection[gemId];
+                }
+            }
+            renderSelection();
+        }
+        function renderSelection() {
+            answerSlots.innerHTML = '';
+            puzzleLevels[currentStage].options.forEach(gemId => {
+                 const gemData = allSmallGems.find(g => g.id === gemId);
+                if (playerSelection[gemId]) {
+                    const count = playerSelection[gemId];
+                    for (let i = 0; i < count; i++) {
+                        const img = document.createElement('img');
+                        img.src = gemData.src;
+                        img.alt = `[已選擇的小寶石 ${gemData.id}]`;
+                        img.className = 'h-12 w-12 object-contain cursor-pointer';
+                        img.onclick = () => removeGemFromSelection(gemId);
+                        answerSlots.appendChild(img);
+                    }
+                }
+            });
+        }
+        function resetPuzzle() {
+            playerSelection = {};
+            answerSlots.innerHTML = '';
+            puzzleFeedback.textContent = '';
+        }
+        function checkPuzzleAnswer() {
+            const level = puzzleLevels[currentStage];
+            if (!level) return;
+            const answer = level.answer;
+            let correct = true;
+            if (Object.keys(playerSelection).length !== Object.keys(answer).length) {
+                correct = false;
+            } else {
+                for (const gemId in answer) {
+                    if (playerSelection[gemId] !== answer[gemId]) {
+                        correct = false;
+                        break;
+                    }
+                }
+            }
+            if (correct) {
+                puzzleFeedback.textContent = '組合正確！你獲得了大寶石！';
+                puzzleFeedback.className = 'text-center text-xl font-bold min-h-[32px] mb-4 text-green-400';
+                setTimeout(() => {
+                    const nextStage = currentStage + 1;
+                    if (nextStage < puzzleLevels.length) {
+                         showScreen('intermission-screen');
+                    } else {
+                        showScreen('final-win-screen');
+                    }
+                }, 1500);
+            } else {
+                puzzleFeedback.textContent = '組合不對喔，再試一次！';
+                puzzleFeedback.className = 'text-center text-xl font-bold min-h-[32px] mb-4 text-red-500';
+            }
+        }
+        // --- 事件監聽 ---
+        startButton.addEventListener('click', () => {
+            showScreen('game-screen');
+            resizeCanvas();
+            instructionsScreen.classList.remove('hidden');
+        });
+        playGameButton.addEventListener('click', () => startGame(0));
+        restartButton.addEventListener('click', () => startGame(currentStage));
+        continueButton.addEventListener('click', showPuzzleScreen);
+        startNextStageButton.addEventListener('click', () => {
+            showScreen('game-screen');
+            startGame(currentStage + 1);
+        });
+        resetPuzzleButton.addEventListener('click', resetPuzzle);
+        checkPuzzleButton.addEventListener('click', checkPuzzleAnswer);
+        unlockSecretButton.addEventListener('click', () => {
+            container.style.display = 'none';
+            secretScreen.style.display = 'flex';
+        });
+        secretChoiceButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const choice = button.dataset.choice;
+                secretFeedback.classList.remove('text-yellow-400', 'text-green-400');
+                if (choice === 'C') {
+                    secretFeedback.textContent = '';
+                    secretQuestion.style.display = 'none';
+                    secretReveal.style.display = 'block';
+                } else if (choice === 'A') {
+                    secretFeedback.textContent = '駕駛技術固然重要，但那只是過程喔！';
+                    secretFeedback.classList.add('text-yellow-400');
+                } else {
+                    secretFeedback.textContent = '閃避只是手段，不是目的呀！';
+                    secretFeedback.classList.add('text-yellow-400');
+                }
+            });
+        });
+        window.addEventListener('resize', resizeCanvas);
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') handleMove('left');
+            else if (e.key === 'ArrowRight') handleMove('right');
+            if (gameInterval) {
+                keySequence.push(e.key);
+                keySequence = keySequence.slice(-cheatCode.length);
+                if (keySequence.join('') === cheatCode) {
+                    winGame();
+                }
+            }
+        });
+        canvas.addEventListener('click', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const clickX = e.clientX - rect.left;
+            if (clickX < canvas.width / 2) handleMove('left');
+            else handleMove('right');
+        });
+        moveLeftButton.addEventListener('click', () => handleMove('left'));
+        moveRightButton.addEventListener('click', () => handleMove('right'));
+        // --- 初始啟動 ---
+        showScreen('start-screen');
+    });
+    </script>
+</body>
+</html>

harbor.html ADDED Viewed

	@@ -0,0 +1,654 @@

+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島 - 海風港灣</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- MathJax for rendering formulas -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            overflow: hidden;
+            background-image: url('https://i.meee.com.tw/TDC4EZE.png');
+            background-size: cover;
+            background-position: center;
+        }
+        #game-container-bg {
+             background-image: url('https://i.meee.com.tw/vT2QeZF.png');
+            background-size: cover;
+            background-position: center;
+        }
+        .seaweed {
+            position: absolute;
+            bottom: -10px;
+            pointer-events: none;
+            filter: brightness(0.9);
+        }
+        .fish {
+            position: absolute;
+            cursor: pointer;
+            transition: transform 0.2s ease, opacity 0.15s ease;
+        }
+        .fish:hover {
+            transform: scale(1.1);
+        }
+        .catch-feedback {
+            position: absolute;
+            font-size: 2rem;
+            font-weight: bold;
+            pointer-events: none;
+            animation: fadeUp 1s forwards;
+            text-shadow: 1px 1px 2px black;
+        }
+        @keyframes fadeUp {
+            from { opacity: 1; transform: translateY(0); }
+            to { opacity: 0; transform: translateY(-50px); }
+        }
+        .loader {
+            border: 8px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 8px solid #3498db;
+            width: 60px;
+            height: 60px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .market-choice.selected {
+            border-color: #facc15; /* yellow-400 */
+            box-shadow: 0 0 15px #facc15;
+        }
+        .secret-bg {
+             background-image: url('https://i.meee.com.tw/EKZpYKI.png');
+             background-size: cover;
+             background-position: center;
+        }
+    </style>
+</head>
+<body class="flex items-center justify-center h-screen">
+    <div id="container" class="w-full max-w-4xl mx-auto text-white p-4 flex flex-col h-[90vh] max-h-[800px] relative">
+        <!-- 引導畫面 -->
+        <div id="start-screen" class="flex flex-col items-center justify-center text-center p-8 bg-black bg-opacity-70 rounded-lg my-auto">
+            <h1 class="text-5xl font-bold text-cyan-300 mb-4" style="text-shadow: 2px 2px 4px #000;">海風港灣</h1>
+            <p class="text-xl text-gray-200 mb-8 max-w-2xl">歡迎來到海風港灣！這次的任務是捕捉指定的魚種，並到市場賣出。有了捕捉的技術，真正要賺大錢還得靠數學呢！請你在捕捉完漁獲後，根據市場需求，將漁獲賣到最適合的市場！</p>
+            <button id="start-button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-8 rounded-lg text-2xl">
+                開始抓魚
+            </button>
+        </div>
+        <!-- 載入畫面 -->
+        <div id="loading-screen" class="hidden flex-col items-center justify-center text-center p-8 bg-black bg-opacity-70 rounded-lg my-auto">
+            <div class="loader mb-6"></div>
+            <p id="loading-text" class="text-2xl text-gray-200">正在準備海底世界...</p>
+        </div>
+        <!-- 遊戲畫面 -->
+        <div id="game-screen" class="hidden flex-col h-full w-full">
+            <div class="flex justify-between items-center p-2 bg-black/50 rounded-t-lg">
+                <div>
+                    <p class="text-lg">目標: <span id="goal-text" class="font-bold text-yellow-400"></span></p>
+                    <p class="text-lg">已捕捉: <span id="score" class="font-bold text-xl">0</span> / <span id="goal-count"></span></p>
+                </div>
+                 <p class="text-sm text-cyan-200">請適度捕撈，維持海洋永續</p>
+                <div>
+                    <p class="text-lg">時間</p>
+                    <p id="timer" class="font-bold text-3xl">20</p>
+                </div>
+            </div>
+            <div id="game-container-bg" class="relative flex-grow rounded-b-lg overflow-hidden border-4 border-black/50">
+                <div id="game-container" class="absolute inset-0">
+                    <img src="https://i.meee.com.tw/XE9mkQQ.gif" class="seaweed" style="left: 0%; height: 45%; transform: scaleX(-1);" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/cTBZUgx.gif" class="seaweed" style="left: 20%; height: 35%;" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/KyN2GaF.gif" class="seaweed" style="left: 45%; height: 30%;" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/XE9mkQQ.gif" class="seaweed" style="right: 25%; height: 48%;" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/cTBZUgx.gif" class="seaweed" style="right: 10%; height: 55%; transform: scaleX(-1);" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/KyN2GaF.gif" class="seaweed" style="right: -2%; height: 38%;" alt="[海草的Image]">
+                </div>
+            </div>
+        </div>
+        <!-- 疊加畫面 (操作說明, 成功/失敗) -->
+        <div id="overlay-container" class="hidden absolute inset-0 flex-col items-center justify-center z-10">
+             <div id="instructions-screen" class="hidden bg-black bg-opacity-80 w-full h-full flex-col items-center justify-center text-center p-4">
+                <div id="instructions-content" class="bg-slate-800 p-8 rounded-lg">
+                    <!-- JS will fill this -->
+                </div>
+            </div>
+            <div id="game-over-screen" class="hidden bg-black bg-opacity-70 w-full h-full flex-col items-center justify-center text-center p-4">
+                <h2 class="text-4xl font-bold text-red-500 mb-4">挑戰失敗！</h2>
+                <button id="restart-button" class="bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-3 px-6 rounded-lg text-xl">
+                    重新挑戰
+                </button>
+            </div>
+            <div id="win-screen" class="hidden bg-black bg-opacity-70 w-full h-full flex-col items-center justify-center text-center p-4">
+                <h2 class="text-4xl font-bold text-green-400 mb-4">成功！</h2>
+                <p class="text-xl mb-6">你抓到足夠的漁獲了！</p>
+                <button id="continue-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg text-xl">
+                    繼續前進
+                </button>
+            </div>
+        </div>
+        <!-- 市場選擇畫面 -->
+        <div id="market-screen" class="hidden flex-col h-full w-full p-6 bg-black bg-opacity-70 rounded-lg">
+            <div id="market-instructions" class="text-center my-auto">
+                 <h2 class="text-3xl font-bold text-amber-300 mb-6">任務說明：選擇市場</h2>
+                 <p class="text-lg">每個地點對<span class="market-fish-name text-yellow-300 font-bold"></span>的需求都不同，需求<span class="text-yellow-300 font-bold">比例</span>越高的市場，就能賣到越好的價格！</p>
+                 <p class="text-lg mt-2">仔細觀察下方的統計圖，找出最賺錢的市場吧！</p>
+                 <button id="show-market-choices-button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                    了解，前往選擇
+                </button>
+            </div>
+            <div id="market-choices" class="hidden flex-col">
+                <h2 class="text-3xl font-bold text-amber-300 text-center mb-4">你要把<span class="market-fish-name"></span>賣到哪裡？</h2>
+                <div id="market-images-container" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <!-- Market images will be inserted here by JS -->
+                </div>
+                <p id="market-feedback" class="text-center text-xl font-bold min-h-[32px] mt-4"></p>
+                <button id="next-level-button" class="hidden bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg text-xl w-full max-w-xs mx-auto mt-4">
+                    <!-- Button text will be set by JS -->
+                </button>
+            </div>
+        </div>
+        <!-- 攻略畫面 -->
+        <div id="strategy-screen" class="hidden flex-col h-full w-full p-6 bg-black bg-opacity-80 rounded-lg text-left overflow-y-auto">
+            <h1 class="text-3xl font-bold text-amber-300 text-center mb-4">經營之神的攻略</h1>
+            <p class="text-lg mb-4">在真實世界中，不同地點的調查所收到的資料不一定會一樣多，總人數不一樣的時候，我們很難用肉眼就判斷出比例的高低，因此需要「相對次數」這樣的統計數據。</p>
+            <div class="text-center bg-gray-900 p-3 rounded-lg text-xl mb-4">
+                $$\text{相對次數} = \frac{\text{需求(人)}}{\text{總人數}} \times 100\%$$
+            </div>
+            <img src="https://i.meee.com.tw/i67LLqV.png" class="rounded-lg mx-auto my-4 w-full max-w-md" alt="[包含相對次數的統計圖表]">
+            <p class="text-lg mb-6 text-center">有了相對次數，會不會更好判斷呢？用下一關的挑戰來試試吧！</p>
+            <button id="start-final-stage-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl w-full max-w-xs mx-auto mt-4">
+                挑戰最終關卡
+            </button>
+        </div>
+        <!-- 最終秘密畫面 -->
+        <div id="final-secret-screen" class="hidden flex-col h-full w-full p-6 bg-black bg-opacity-80 rounded-lg text-left overflow-y-auto">
+            <h1 class="text-3xl font-bold text-amber-300 text-center mb-6">海風港灣的秘密</h1>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <img src="https://i.meee.com.tw/rmcY2Vc.png" class="rounded-lg border-4 border-amber-400" alt="[代數之丘的統計圖表]">
+                <img src="https://i.meee.com.tw/qV8QrUI.png" class="rounded-lg" alt="[哲學之塔的統計圖表]">
+                <img src="https://i.meee.com.tw/i67LLqV.png" class="rounded-lg" alt="[寶石洞窟的統計圖表]">
+            </div>
+            <p class="text-lg mb-4">恭喜你，完成了所有挑戰！你學會了捕魚，也學會了如何分析數據來做出最好的商業決策。</p>
+            <p class="text-2xl font-bold text-cyan-300 mb-4">這個港灣的秘密就是：<br>「數字」本身有時候會騙人，「比例」才能揭露真相。</p>
+            <p class="text-lg mb-4">單看數字，哲學之塔似乎是更好的市場。但當你把「總人數」也考慮進來，計算出「相對次數」（也就是需求比例），你才會發現代數之丘的需求比例，是超過哲學之塔的。</p>
+            <p class="text-lg">這個智慧，不只適用於賣魚。未來在你看新聞、分析報告，甚至做人生重大決定時，記得問自己：「這個數字背後的『分母』是什麼？」看透比例，你就能做出更聰明的選擇。</p>
+            <a href="index.html" id="back-to-map-button" class="inline-block text-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-xl w-full max-w-xs mx-auto mt-8">
+                回到探險島地圖
+            </a>
+        </div>
+    </div>
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- 畫面元素 ---
+        const startScreen = document.getElementById('start-screen');
+        const loadingScreen = document.getElementById('loading-screen');
+        const loadingText = document.getElementById('loading-text');
+        const gameScreen = document.getElementById('game-screen');
+        const startButton = document.getElementById('start-button');
+        const gameContainer = document.getElementById('game-container');
+        const scoreDisplay = document.getElementById('score');
+        const timerDisplay = document.getElementById('timer');
+        const instructionsScreen = document.getElementById('instructions-screen');
+        const instructionsContent = document.getElementById('instructions-content');
+        const goalText = document.getElementById('goal-text');
+        const goalCount = document.getElementById('goal-count');
+        const overlayContainer = document.getElementById('overlay-container');
+        const gameOverScreen = document.getElementById('game-over-screen');
+        const winScreen = document.getElementById('win-screen');
+        const restartButton = document.getElementById('restart-button');
+        const continueButton = document.getElementById('continue-button');
+        const marketScreen = document.getElementById('market-screen');
+        const marketInstructions = document.getElementById('market-instructions');
+        const marketChoices = document.getElementById('market-choices');
+        const showMarketChoicesButton = document.getElementById('show-market-choices-button');
+        const marketImagesContainer = document.getElementById('market-images-container');
+        const marketFeedback = document.getElementById('market-feedback');
+        const nextLevelButton = document.getElementById('next-level-button');
+        const startFinalStageButton = document.getElementById('start-final-stage-button');
+        const finalSecretScreen = document.getElementById('final-secret-screen');
+        // --- 遊戲設定 ---
+        const MAX_FISH_ON_SCREEN = 8;
+        let score = 0, timeLeft = 0;
+        let gameInterval, timerInterval, fishSpawnInterval;
+        let currentLevel = 0;
+        let currentLevelSettings;
+        const levels = [
+            { goal: 10, time: 20, targetFish: '小丑魚', speedMultiplier: 1.0, spawnRate: 1200, fishSet: ['小丑魚', '螃蟹'] },
+            { goal: 10, time: 20, targetFish: '水母', speedMultiplier: 1.5, spawnRate: 1000, fishSet: ['水母', '章魚'] },
+            { goal: 10, time: 20, targetFish: '水母', speedMultiplier: 1.8, spawnRate: 800, fishSet: ['水母', '鯊魚'] }
+        ];
+        const fishTypes = [
+            { name: '小丑魚', src: 'https://i.meee.com.tw/7tfldTT.gif', width: 160, height: 120 },
+            { name: '鯊魚', src: 'https://i.meee.com.tw/KCQk7C6.gif', width: 270, height: 270 },
+            { name: '章魚', src: 'https://i.meee.com.tw/lBWJmMy.gif', width: 160, height: 130 },
+            { name: '海馬', src: 'https://i.meee.com.tw/sMehyty.gif', width: 150, height: 150 },
+            { name: '螃蟹', src: 'https://i.meee.com.tw/zx9Vg0B.gif', width: 150, height: 110 },
+            { name: '水母', src: 'https://i.meee.com.tw/81gncdG.gif', width: 160, height: 160 },
+        ];
+        const marketLevels = [
+            {
+                images: { A: 'https://i.meee.com.tw/jQ3A90u.png', B: 'https://i.meee.com.tw/HEx1GWE.png', C: 'https://i.meee.com.tw/199bHzA.png' },
+                correctAnswer: 'B',
+                feedback: { correct: "答對了！哲學之塔的需求比例最高，要賺大錢還是得靠數學，不能蠻幹阿！", wrong: "每個地點的調查人數都一樣多，需求數量越多，即表示需求比例越高！" }
+            },
+            {
+                // A: 代數之丘(左), B: 哲學之塔(中), C: 寶石洞窟(右)
+                images: { A: 'https://i.meee.com.tw/lTXgvxv.png', B: 'https://i.meee.com.tw/FKPNhKh.png', C: 'https://i.meee.com.tw/zdv5MtZ.png' },
+                correctAnswer: 'A', // 正確答案是代數之丘
+                feedback: {
+                    firstClick: {
+                        C: "你確定嗎？其他兩個地方的需求人數比較多喔！若是確定請再點選一次",
+                        B: "你確定嗎？雖然哲學之塔的需求人數最多，但他的總人數也最多喔！你確定他是比例最高的嗎？",
+                        A: "你確定嗎？哲學之塔的需求人數比較多喔！"
+                    },
+                    correct: "你做出了正確的決定！但到底是運氣好，還是數學好呢，如果是運氣好的話，可沒有辦法長久經營阿~",
+                    wrong: "商品買賣，不是越多人買越賺錢，不是喔！因為你長期的決策錯誤，導致買賣虧損，最後造成店家倒閉..."
+                }
+            },
+            {
+                // A: 代數之丘, B: 哲學之塔, C: 寶石洞窟
+                images: { A: 'https://i.meee.com.tw/rmcY2Vc.png', B: 'https://i.meee.com.tw/qV8QrUI.png', C: 'https://i.meee.com.tw/i67LLqV.png' },
+                correctAnswer: 'A', // 正確答案是代數之丘
+                feedback: { correct: "有了相對次數這項統計數據，是不是就更容易做選擇了呢~", wrong: "再仔細看看，哪個市場的需求比例最高呢？" }
+            }
+        ];
+        let firstChoice = null;
+        const fishesOnScreen = [];
+        // --- 畫面管理 ---
+        function showScreen(screenId) {
+            ['start-screen', 'game-screen', 'market-screen', 'loading-screen', 'strategy-screen', 'final-secret-screen'].forEach(id => {
+                document.getElementById(id).style.display = (id === screenId) ? 'flex' : 'none';
+            });
+        }
+        function showOverlay(overlayId) {
+            overlayContainer.style.display = 'flex';
+            ['instructions-screen', 'game-over-screen', 'win-screen'].forEach(id => {
+                document.getElementById(id).style.display = (id === overlayId) ? 'flex' : 'none';
+            });
+        }
+        function hideOverlay() {
+            overlayContainer.style.display = 'none';
+        }
+        // --- 預載入函式 ---
+        function preloadImages(urls, onProgress) {
+            return new Promise((resolve) => {
+                let loadedCount = 0;
+                const totalImages = urls.length;
+                if (totalImages === 0) resolve();
+                urls.forEach(url => {
+                    const img = new Image();
+                    img.src = url;
+                    const onFinish = () => {
+                        loadedCount++;
+                        onProgress(loadedCount, totalImages);
+                        if (loadedCount === totalImages) resolve();
+                    };
+                    img.onload = onFinish;
+                    img.onerror = () => { console.error(`圖片載入失敗: ${url}`); onFinish(); };
+                });
+            });
+        }
+        function startGame(levelIndex) {
+            currentLevel = levelIndex;
+            currentLevelSettings = levels[currentLevel];
+            score = 0;
+            timeLeft = currentLevelSettings.time;
+            updateUI();
+            fishesOnScreen.forEach(fish => fish.element.remove());
+            fishesOnScreen.length = 0;
+            fishSpawnInterval = setInterval(spawnFish, currentLevelSettings.spawnRate);
+            timerInterval = setInterval(() => {
+                timeLeft--;
+                updateUI();
+                if (timeLeft <= 0) endGame(false);
+            }, 1000);
+            gameInterval = setInterval(updateGame, 1000 / 60);
+        }
+        function spawnFish() {
+            if (fishesOnScreen.length >= MAX_FISH_ON_SCREEN) return;
+            let fishData;
+            const fishSet = currentLevelSettings.fishSet.map(name => fishTypes.find(f => f.name === name));
+            const targetFish = fishSet.find(f => f.name === currentLevelSettings.targetFish);
+            const otherFish = fishSet.filter(f => f.name !== currentLevelSettings.targetFish);
+            const activeDistractor = otherFish.length > 0 ? otherFish[0] : targetFish;
+            if (Math.random() < 0.75) {
+                fishData = targetFish;
+            } else {
+                fishData = activeDistractor;
+            }
+            const fishElement = document.createElement('img');
+            fishElement.src = fishData.src;
+            fishElement.className = 'fish';
+            const direction = Math.random() < 0.5 ? 'left' : 'right';
+            const speed = (Math.random() * 2 + 1.5) * currentLevelSettings.speedMultiplier;
+            const startY = Math.random() * (gameContainer.clientHeight - fishData.height);
+            fishElement.style.width = `${fishData.width}px`;
+            fishElement.style.height = `${fishData.height}px`;
+            fishElement.style.top = `${startY}px`;
+            if (direction === 'left') {
+                fishElement.style.left = `${gameContainer.clientWidth}px`;
+                fishElement.style.transform = 'scaleX(-1)';
+            } else {
+                fishElement.style.left = `-${fishData.width}px`;
+            }
+            const fishObject = { element: fishElement, data: fishData, speed, direction, vy: (Math.random() - 0.5) * 2, lastVyChange: Date.now() };
+            if (currentLevel === 2 && fishData.name === '水母') {
+                fishObject.health = 2;
+            } else {
+                fishObject.health = 1;
+            }
+            fishElement.onclick = () => catchFish(fishObject);
+            fishesOnScreen.push(fishObject);
+            gameContainer.appendChild(fishObject.element);
+        }
+        function updateGame() {
+            for (let i = fishesOnScreen.length - 1; i >= 0; i--) {
+                const fish = fishesOnScreen[i];
+                let currentX = parseFloat(fish.element.style.left);
+                let currentY = parseFloat(fish.element.style.top);
+                if (fish.direction === 'left') {
+                    currentX -= fish.speed;
+                    if (currentX < -fish.data.width) {
+                        fish.element.remove();
+                        fishesOnScreen.splice(i, 1);
+                        continue;
+                    }
+                } else {
+                    currentX += fish.speed;
+                    if (currentX > gameContainer.clientWidth) {
+                        fish.element.remove();
+                        fishesOnScreen.splice(i, 1);
+                        continue;
+                    }
+                }
+                fish.element.style.left = `${currentX}px`;
+                if (currentLevel > 0) {
+                    if (Date.now() - fish.lastVyChange > 1000) {
+                        fish.vy = (Math.random() - 0.5) * 6;
+                        fish.lastVyChange = Date.now();
+                    }
+                    currentY += fish.vy;
+                    if (currentY < 0 || currentY > gameContainer.clientHeight - fish.data.height) {
+                        fish.vy *= -1;
+                    }
+                    fish.element.style.top = `${currentY}px`;
+                }
+            }
+        }
+        function catchFish(fishObject) {
+            fishObject.health--;
+            if (fishObject.health > 0) {
+                showCatchFeedback('!', fishObject.element, false);
+                fishObject.element.style.opacity = '0.5';
+                setTimeout(() => {
+                    if (fishObject.element) {
+                         fishObject.element.style.opacity = '1';
+                    }
+                }, 150);
+                return;
+            }
+            if (fishObject.data.name === currentLevelSettings.targetFish) {
+                score++;
+                showCatchFeedback('+1', fishObject.element, true);
+            } else {
+                score = Math.max(0, score - 1);
+                showCatchFeedback('-1', fishObject.element, false);
+            }
+            fishObject.element.remove();
+            const index = fishesOnScreen.indexOf(fishObject);
+            if (index > -1) fishesOnScreen.splice(index, 1);
+            updateUI();
+            if (score >= currentLevelSettings.goal) endGame(true);
+        }
+        function showCatchFeedback(text, fishElement, isCorrect) {
+            const feedback = document.createElement('div');
+            feedback.className = 'catch-feedback';
+            feedback.textContent = text;
+            feedback.style.color = isCorrect ? '#4ade80' : '#f87171';
+            const rect = fishElement.getBoundingClientRect();
+            const containerRect = gameContainer.getBoundingClientRect();
+            feedback.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
+            feedback.style.top = `${rect.top - containerRect.top + rect.height / 2}px`;
+            gameContainer.appendChild(feedback);
+            setTimeout(() => feedback.remove(), 1000);
+        }
+        function updateUI() {
+            scoreDisplay.textContent = score;
+            timerDisplay.textContent = timeLeft;
+        }
+        function endGame(isWin) {
+            clearInterval(gameInterval);
+            clearInterval(timerInterval);
+            clearInterval(fishSpawnInterval);
+            gameInterval = timerInterval = fishSpawnInterval = null;
+            if (isWin) {
+                showOverlay('win-screen');
+            } else {
+                showOverlay('game-over-screen');
+            }
+        }
+        function setupMarketScreen() {
+            const marketLevel = marketLevels[currentLevel];
+            document.querySelectorAll('.market-fish-name').forEach(el => el.textContent = levels[currentLevel].targetFish);
+            marketImagesContainer.innerHTML = '';
+            // A, B, C keys correspond to left, middle, right images
+            const marketOrder = ['A', 'B', 'C'];
+            marketOrder.forEach(key => {
+                const src = marketLevel.images[key];
+                const img = document.createElement('img');
+                img.src = src;
+                img.dataset.market = key;
+                img.alt = `[${key}市場的統計圖表]`;
+                img.className = 'market-choice cursor-pointer rounded-lg border-4 border-transparent hover:border-yellow-400';
+                img.addEventListener('click', handleMarketChoice);
+                marketImagesContainer.appendChild(img);
+            });
+            marketFeedback.textContent = '';
+            nextLevelButton.classList.add('hidden');
+            firstChoice = null;
+        }
+        function handleMarketChoice(e) {
+            const choice = e.target.dataset.market;
+            const marketLevel = marketLevels[currentLevel];
+            document.querySelectorAll('.market-choice').forEach(img => img.classList.remove('selected'));
+            if (currentLevel === 0) {
+                if (choice === marketLevel.correctAnswer) {
+                    marketFeedback.textContent = marketLevel.feedback.correct;
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
+                    nextLevelButton.textContent = "前往第二關";
+                    nextLevelButton.classList.remove('hidden');
+                } else {
+                    marketFeedback.textContent = marketLevel.feedback.wrong;
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-yellow-400';
+                }
+            } else if (currentLevel === 1) {
+                if (firstChoice === choice) {
+                    if (choice === marketLevel.correctAnswer) {
+                        marketFeedback.textContent = marketLevel.feedback.correct;
+                        marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
+                        nextLevelButton.textContent = "經營之神的攻略";
+                        nextLevelButton.classList.remove('hidden');
+                    } else {
+                        marketFeedback.textContent = marketLevel.feedback.wrong;
+                        marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-red-500';
+                    }
+                    firstChoice = null;
+                } else {
+                    firstChoice = choice;
+                    e.target.classList.add('selected');
+                    marketFeedback.textContent = marketLevel.feedback.firstClick[choice];
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-cyan-300';
+                }
+            } else if (currentLevel === 2) {
+                 if (choice === marketLevel.correctAnswer) {
+                    marketFeedback.textContent = marketLevel.feedback.correct;
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
+                    nextLevelButton.textContent = "查看海風港灣的秘密";
+                    nextLevelButton.classList.remove('hidden');
+                } else {
+                    marketFeedback.textContent = marketLevel.feedback.wrong;
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-red-500';
+                }
+            }
+        }
+        // --- 事件監聽 ---
+        startButton.addEventListener('click', async () => {
+             showScreen('loading-screen');
+             const imageUrls = [
+                ...fishTypes.map(fish => fish.src),
+                ...Object.values(marketLevels[0].images),
+                ...Object.values(marketLevels[1].images),
+                ...Object.values(marketLevels[2].images),
+                'https://i.meee.com.tw/i67LLqV.png'
+             ];
+             await preloadImages(imageUrls, (loaded, total) => {
+                loadingText.textContent = `正在準備海底世界... (${loaded}/${total})`;
+             });
+             showScreen('game-screen');
+             instructionsContent.innerHTML = `
+                <h2 class="text-3xl font-bold text-amber-300 mb-6">第一關任務</h2>
+                <div class="space-y-4 text-lg">
+                    <p>在 <span class="text-yellow-400 font-bold">${levels[0].time}</span> 秒內，捕捉 <span class="text-yellow-400 font-bold">${levels[0].goal}</span> 隻${levels[0].targetFish}！</p>
+                    <p>點擊<span class="text-green-400 font-bold">正確的魚</span>來加分。</p>
+                    <p>注意！抓到<span class="text-red-400 font-bold">錯誤的魚</span>會扣分喔！</p>
+                </div>
+                <button id="play-game-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                    了解！
+                </button>`;
+            document.getElementById('play-game-button').onclick = () => { hideOverlay(); startGame(0); };
+            showOverlay('instructions-screen');
+            goalText.textContent = `抓 ${levels[0].goal} 隻${levels[0].targetFish}`;
+            goalCount.textContent = levels[0].goal;
+        });
+        restartButton.addEventListener('click', () => {
+            hideOverlay();
+            startGame(currentLevel);
+        });
+        continueButton.addEventListener('click', () => {
+            hideOverlay();
+            showScreen('market-screen');
+            marketInstructions.style.display = 'block';
+            marketChoices.style.display = 'none';
+        });
+        showMarketChoicesButton.addEventListener('click', () => {
+            marketInstructions.style.display = 'none';
+            marketChoices.style.display = 'flex';
+            setupMarketScreen();
+        });
+        nextLevelButton.addEventListener('click', () => {
+            if (currentLevel === 0) {
+                const nextLevel = currentLevel + 1;
+                const levelSettings = levels[nextLevel];
+                showScreen('game-screen');
+                instructionsContent.innerHTML = `
+                    <h2 class="text-3xl font-bold text-amber-300 mb-6">第 ${nextLevel + 1} 關任務</h2>
+                    <div class="space-y-4 text-lg">
+                        <p>在 <span class="text-yellow-400 font-bold">${levelSettings.time}</span> 秒內，捕捉 <span class="text-yellow-400 font-bold">${levelSettings.goal}</span> 隻${levelSettings.targetFish}！</p>
+                        <p>海洋生物的移動方式不一樣了，小心！</p>
+                    </div>
+                    <button id="play-next-level-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                        挑戰！
+                    </button>`;
+                document.getElementById('play-next-level-button').onclick = () => { hideOverlay(); startGame(nextLevel); };
+                showOverlay('instructions-screen');
+                goalText.textContent = `抓 ${levelSettings.goal} 隻${levelSettings.targetFish}`;
+                goalCount.textContent = levelSettings.goal;
+            } else if (currentLevel === 1) {
+                showScreen('strategy-screen');
+            } else if (currentLevel === 2) {
+                showScreen('final-secret-screen');
+            }
+        });
+        startFinalStageButton.addEventListener('click', () => {
+            const nextLevel = currentLevel + 1;
+            const levelSettings = levels[nextLevel];
+            showScreen('game-screen');
+            instructionsContent.innerHTML = `
+                <h2 class="text-3xl font-bold text-amber-300 mb-6">最終挑戰！</h2>
+                <div class="space-y-4 text-lg">
+                    <p>在 <span class="text-yellow-400 font-bold">${levelSettings.time}</span> 秒內，捕捉 <span class="text-yellow-400 font-bold">${levelSettings.goal}</span> 隻${levelSettings.targetFish}！</p>
+                    <p class="text-cyan-300">注意！這次的${levelSettings.targetFish}比��頑強，需要點擊兩下才能捕捉！</p>
+                </div>
+                <button id="play-final-level-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                    挑戰！
+                </button>`;
+            document.getElementById('play-final-level-button').onclick = () => { hideOverlay(); startGame(nextLevel); };
+            showOverlay('instructions-screen');
+            goalText.textContent = `抓 ${levelSettings.goal} 隻${levelSettings.targetFish}`;
+            goalCount.textContent = levelSettings.goal;
+        });
+        // --- 初始啟動 ---
+        showScreen('start-screen');
+    });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,180 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-color: #333;
+            overflow: hidden; /* 隱藏滾動條 */
+        }
+        #map-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background-image: url('https://i.meee.com.tw/emt8qds.png');
+            background-size: cover; /* 填滿整個容器 */
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        .main-title {
+            position: relative; /* 確保標題在最上層 */
+            z-index: 20;
+            animation: fadeOutTitle 5s forwards;
+            animation-delay: 2s; /* 2秒後開始淡出 */
+        }
+        @keyframes fadeOutTitle {
+            0% { opacity: 1; }
+            100% { opacity: 0; pointer-events: none; }
+        }
+        .location-link {
+            position: absolute;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+            cursor: pointer;
+            z-index: 10;
+        }
+        .location-link::before {
+            content: '';
+            position: absolute;
+            width: 80px; /* 縮小光圈的尺寸 */
+            height: 80px;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            transform: scale(0); /* 預設隱藏 */
+            opacity: 0;
+        }
+        .location-link:hover::before {
+            transform: scale(1); /* 滑鼠移入時顯示 */
+            opacity: 1;
+            background-color: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 20px 7px rgba(255, 235, 59, 0.6);
+        }
+        .location-link .label {
+            opacity: 0;
+            color: white;
+            font-size: 1.5rem;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
+            transition: opacity 0.3s ease;
+            background-color: rgba(0,0,0,0.5);
+            padding: 0.5rem 1rem;
+            border-radius: 999px;
+            position: relative; /* 確保文字在光圈之上 */
+            z-index: 5;
+        }
+        .location-link:hover .label {
+            opacity: 1;
+        }
+        /* 最終調整後的地點位置 */
+        #algebra-hill {
+            top: 28%;
+            left: 88%;
+            width: 25%;
+            height: 35%;
+        }
+        #philosophy-tower {
+            top: 35%;
+            left: 37%; /* 再次偏左 */
+            width: 22%;
+            height: 40%;
+        }
+        #gemstone-cave {
+            top: 58%;
+            left: 88%;
+            width: 20%;
+            height: 25%;
+        }
+        #harbor-bay {
+            top: 75%;
+            left: 25%;
+            width: 35%;
+            height: 35%;
+        }
+        /* 風的痕跡 SVG 樣式 */
+        #footprints-svg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none; /* 讓 SVG 不會擋到滑鼠點擊 */
+            z-index: 5;
+        }
+        .footprint-path {
+            stroke: rgba(255, 255, 255, 0.4);
+            stroke-width: 2.5px;
+            fill: none;
+            stroke-linecap: round;
+            stroke-dasharray: 150 400; /* 150px長的痕跡, 400px的間隔 */
+            stroke-dashoffset: 550;
+            animation: flow 15s linear infinite;
+        }
+        /* 讓每個路徑的動畫錯開，看起來更自然 */
+        .footprint-path:nth-child(2) { animation-delay: -3s; }
+        .footprint-path:nth-child(3) { animation-delay: -7s; }
+        .footprint-path:nth-child(4) { animation-delay: -10s; }
+        @keyframes flow {
+            from {
+                stroke-dashoffset: 550; /* 從路徑外開始 */
+            }
+            to {
+                stroke-dashoffset: -550; /* 移動到路徑的另一端外 */
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 flex items-center justify-center min-h-screen p-4">
+    <div id="map-container">
+        <!-- 動態痕跡 SVG -->
+        <svg id="footprints-svg" viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid meet">
+            <!-- 重新設計的、更不規則的曲線路徑 -->
+            <path class="footprint-path" d="M600 900 C 500 880, 350 800, 300 675" />
+            <path class="footprint-path" d="M600 900 C 600 700, 380 550, 444 315" />
+            <path class="footprint-path" d="M600 900 C 750 850, 950 700, 1056 522" />
+            <path class="footprint-path" d="M600 900 C 700 750, 980 500, 1056 252" />
+        </svg>
+        <!-- 地點連結 -->
+        <a id="algebra-hill" href="algebra.html" class="location-link">
+            <span class="label">代數之丘</span>
+        </a>
+        <a id="philosophy-tower" href="philosophy.html" class="location-link">
+            <span class="label">哲學之塔</span>
+        </a>
+        <a id="gemstone-cave" href="gemstone.html" class="location-link">
+            <span class="label">寶石洞窟</span>
+        </a>
+        <a id="harbor-bay" href="harbor.html" class="location-link">
+            <span class="label">海風港灣</span>
+        </a>
+    </div>
+    <h1 class="main-title text-4xl md:text-5xl font-bold text-white text-center" style="text-shadow: 3px 3px 5px rgba(0,0,0,0.5);">歡迎來到數學探險島</h1>
+    <!-- 設計者資訊 -->
+    <div class="absolute bottom-4 right-4 text-right text-white text-sm opacity-80 z-10" style="text-shadow: 1px 1px 3px rgba(0,0,0,0.7);">
+        <p>遊戲設計者：新竹縣精華國中藍星宇</p>
+        <p>FB教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank" class="underline hover:text-yellow-300 transition-colors">萬物皆數</a></p>
+    </div>
+</body>
+</html>

philosophy.html ADDED Viewed

	@@ -0,0 +1,429 @@

+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島 - 哲學之塔</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-image: url('https://i.meee.com.tw/wCWCOGx.png');
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+        }
+        .tower-bg {
+            background-image: url('https://www.transparenttextures.com/patterns/stone-wall.png');
+            background-color: #e2e8f0;
+        }
+        /* 自訂拉桿樣式 */
+        input[type=range] {
+            -webkit-appearance: none;
+            width: 100%;
+            background: transparent;
+        }
+        input[type=range]:focus {
+            outline: none;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 12px;
+            cursor: pointer;
+            background: #93c5fd;
+            border-radius: 5px;
+            border: 1px solid #60a5fa;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            border: 2px solid #3b82f6;
+            height: 30px;
+            width: 30px;
+            border-radius: 50%;
+            background: #eff6ff;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -10px;
+        }
+        /* 成功時的閃爍動畫 */
+        @keyframes flash {
+            0%, 100% { box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.7); }
+            50% { box-shadow: 0 0 5px 0px rgba(34, 197, 94, 0.2); }
+        }
+        .success-flash {
+            animation: flash 1.5s ease-in-out;
+        }
+        /* 測驗選項樣式 */
+        .quiz-option {
+            display: block;
+            padding: 0.75rem 1rem;
+            border: 2px solid #e5e7eb;
+            border-radius: 0.5rem;
+            margin-bottom: 0.5rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .quiz-option:hover {
+            background-color: #f3f4f6;
+        }
+        input[type="radio"]:checked + .quiz-option {
+            background-color: #dbeafe;
+            border-color: #60a5fa;
+        }
+        .question-container.incorrect {
+            border: 2px solid #ef4444;
+            border-radius: 0.75rem;
+            padding: 1rem;
+            background-color: #fee2e2;
+        }
+    </style>
+</head>
+<body class="flex items-center justify-center min-h-screen p-4">
+    <div id="main-container" class="container mx-auto max-w-5xl">
+        <!-- 故事引導畫面 -->
+        <div id="story-view" class="bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8 text-center">
+            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-6">前情提要：西帕索斯的悲劇</h1>
+            <div class="border rounded-lg shadow-inner bg-gray-100 p-12 flex flex-col items-center justify-center" style="height: 50vh;">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-indigo-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v11.494m-9-5.747h18" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v11.494m-9-5.747h18" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 18h16" />
+                </svg>
+                <p class="text-xl text-gray-600">故事即將展開...</p>
+                <p class="mt-4 text-lg text-indigo-600 font-semibold">點擊下方按鈕，在新分頁閱讀故事前情提要！</p>
+            </div>
+            <a href="https://g.co/gemini/share/d181055c5aa2" target="_blank" id="story-link-button" class="mt-8 inline-block w-full md:w-auto bg-blue-500 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-600 transition-colors shadow-lg text-lg">
+                閱讀故事
+            </a>
+            <button id="start-quiz-button" class="mt-4 w-full md:w-auto bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg text-lg">
+                開始挑戰！
+            </button>
+        </div>
+        <!-- 閱讀測驗畫面 (新增) -->
+        <div id="quiz-view" class="hidden bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8">
+            <h1 class="text-3xl font-bold text-gray-800 text-center mb-6">閱讀測��：西帕索斯的考驗</h1>
+            <div class="space-y-6 text-left">
+                <!-- 問題 1 -->
+                <div id="question-container-0" class="question-container">
+                    <p class="font-semibold mb-2">1. 根據故事內容，西帕索斯為什麼被畢達哥拉斯囚禁在哲學之塔？</p>
+                    <div class="space-y-2">
+                        <label><input type="radio" name="q0" value="A" class="hidden"> <span class="quiz-option">(A) 因為他試圖偷取畢達哥拉斯的數學理論。</span></label>
+                        <label><input type="radio" name="q0" value="B" class="hidden"> <span class="quiz-option">(B) 因為他在公開場合侮辱了畢達哥拉斯本人。</span></label>
+                        <label><input type="radio" name="q0" value="C" class="hidden"> <span class="quiz-option">(C) 因為他發現了一個無法用分數或小數表示的數字，這與畢達哥拉斯學派的信念相衝突。</span></label>
+                        <label><input type="radio" name="q0" value="D" class="hidden"> <span class="quiz-option">(D) 因為他沒能成功計算出一個正方形的面積。</span></label>
+                    </div>
+                </div>
+                <!-- 問題 2 -->
+                <div id="question-container-1" class="question-container">
+                    <p class="font-semibold mb-2">2. 故事中，那個動搖了畢達哥拉斯學派信念的「神秘數字」，最初是源自於什麼？</p>
+                    <div class="space-y-2">
+                        <label><input type="radio" name="q1" value="A" class="hidden"> <span class="quiz-option">(A) 一個面積為3的圓形半徑。</span></label>
+                        <label><input type="radio" name="q1" value="B" class="hidden"> <span class="quiz-option">(B) 一個面積為2的正方形邊長。</span></label>
+                        <label><input type="radio" name="q1" value="C" class="hidden"> <span class="quiz-option">(C) 一個從未有人見過的全新立體圖形。</span></label>
+                        <label><input type="radio" name="q1" value="D" class="hidden"> <span class="quiz-option">(D) 一個畢達哥拉斯自己提出的數學謎題。</span></label>
+                    </div>
+                </div>
+                <!-- 問題 3 -->
+                <div id="question-container-2" class="question-container">
+                    <p class="font-semibold mb-2">3. 在故事的結尾，你（讀者）被賦予的主要任務是什麼？</p>
+                    <div class="space-y-2">
+                        <label><input type="radio" name="q2" value="A" class="hidden"> <span class="quiz-option">(A) 找到一把萬能鑰匙，趁半夜把西帕索斯從監獄裡救出來。</span></label>
+                        <label><input type="radio" name="q2" value="B" class="hidden"> <span class="quiz-option">(B) 回到未來，尋找歷史文獻來證明西帕索斯是對的。</span></label>
+                        <label><input type="radio" name="q2" value="C" class="hidden"> <span class="quiz-option">(C) 成為畢達哥拉斯的學徒，從內部瓦解他的學派。</span></label>
+                        <label><input type="radio" name="q2" value="D" class="hidden"> <span class="quiz-option">(D) 找出幾個「神秘數字」的近似值，用具體的證據去說服畢達哥拉斯。</span></label>
+                    </div>
+                </div>
+            </div>
+            <div id="quiz-feedback" class="text-center font-semibold mt-6 min-h-[24px]"></div>
+            <div class="flex flex-col md:flex-row gap-4 mt-6">
+                <button id="reread-story-button" class="w-full md:w-1/2 bg-gray-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-gray-600 transition-colors">再看一次故事</button>
+                <button id="submit-quiz-button" class="w-full md:w-1/2 bg-green-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-green-600 transition-colors">提交答案</button>
+            </div>
+        </div>
+        <!-- 遊戲畫面 (預設隱藏) -->
+        <div id="game-view" class="hidden bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8 tower-bg">
+            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-2">哲學之塔</h1>
+            <p class="text-center text-gray-600 mb-6">幫助被囚禁的西帕索斯，找出正方形的神秘邊長！</p>
+            <div class="grid md:grid-cols-2 gap-8 items-center">
+                <!-- 左側：正方形展示區 -->
+                <div class="flex flex-col items-center justify-center bg-white/70 p-6 rounded-lg shadow-inner">
+                    <div id="square-display" class="w-48 h-48 bg-blue-300 border-4 border-blue-500 flex items-center justify-center relative transition-transform duration-500">
+                        <p class="text-2xl font-bold text-white">面積 = <span id="target-area-text">2</span></p>
+                    </div>
+                    <p class="mt-4 text-2xl font-mono text-gray-700">邊長 = <span id="target-sqrt-text">√2</span></p>
+                </div>
+                <!-- 右側：互動操作區 -->
+                <div class="flex flex-col space-y-6">
+                    <div class="bg-white/80 p-4 rounded-lg text-center">
+                        <p class="text-lg">你的猜測邊長 <span id="guess-sqrt-text" class="font-mono">√2</span> ≒ <span id="current-value" class="font-bold text-2xl text-indigo-600">1.50</span></p>
+                        <p class="text-lg">邊長的平方(正方形面積)：<span id="current-squared-value" class="font-bold text-2xl text-red-500">2.25</span></p>
+                    </div>
+                    <input type="range" id="value-slider" min="1" max="2" value="1.5" step="0.01" class="w-full">
+                    <button id="check-button" class="w-full bg-green-500 text-white font-bold py-3 px-4 rounded-lg hover:bg-green-600 transition-colors shadow-md text-xl">
+                        確定答案
+                    </button>
+                    <div id="feedback-box" class="text-center text-xl font-semibold min-h-[32px]"></div>
+                    <button id="next-level-button" class="w-full bg-indigo-500 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-600 transition-colors shadow-md text-xl hidden">
+                        挑戰下一關
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- 生活應用畫面 (預設隱藏) -->
+        <div id="application-view" class="hidden bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-green-600 mb-4 text-center">恭喜你，成功解救了西帕索斯！</h1>
+            <p class="text-lg text-gray-700 mb-8 text-center">你們玩遊戲的時候，有沒有想過，為什麼角色撞到怪物就會扣血？為什麼子彈會正好打到你？這不是靠神奇的第六感，是靠數學──而且關鍵數學招式就是平方根！</p>
+            <div class="bg-blue-50 p-6 rounded-lg text-left">
+                <h2 class="text-2xl font-bold text-indigo-600 mb-4 text-center">🎮 遊戲物理引擎裡的平方根魔法</h2>
+                <div class="space-y-6">
+                    <div>
+                        <h3 class="font-semibold text-xl mb-2">判斷「有沒有撞到」</h3>
+                        <p>遊戲世界是由座標組成的（就像地圖上的 X、Y 點）。當角色和怪物在不同位置，遊戲必須算兩者的距離，來判斷是不是近到可以碰撞。</p>
+                        <p class="mt-2 p-3 bg-gray-200 rounded-md text-center font-mono text-lg">距離 = √((x₁ - x₂)² + (y₁ - y₂)²)</p>
+                        <p class="mt-2">最後那個開根號，就是讓距離變回「真實長度」。沒有平方根，遊戲根本不知道你到底是不是碰到牆、怪物、寶箱。</p>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-xl mb-2">算出移動的真速度</h3>
+                        <p>在 3D 遊戲中，速度不只有一個方向。例如你同時向前（X 軸）+ 向右（Y 軸）移動，總速度不是單純相加，而是：</p>
+                        <p class="mt-2 p-3 bg-gray-200 rounded-md text-center font-mono text-lg">總速度 = √(水平速度² + 垂直速度²)</p>
+                        <p class="mt-2">這樣遊戲才能正確決定動畫快慢、物理反應強度。</p>
+                    </div>
+                     <div>
+                        <h3 class="font-semibold text-xl mb-2">模擬「真實的碰撞反應」</h3>
+                        <p>角色被怪物推一下，會往斜方向飛。遊戲會算推力向量的大小（也就是「合力長度」）來決定你飛多遠，這裡也要平方根。</p>
+                    </div>
+                </div>
+                <div class="mt-6 pt-6 border-t">
+                     <p class="text-xl text-center"><span class="font-bold">💡 簡單比喻：</span>「平方根在遊戲引擎裡，就像一把『距離測量尺』，沒有它，遊戲世界就不知道東西有多近、有多快，甚至不會知道你到底撞到沒。」</p>
+                </div>
+            </div>
+             <div class="mt-12 text-center">
+                <a href="index.html" class="inline-block w-full md:w-1/2 bg-indigo-600 text-white font-bold py-3 md:py-4 px-6 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg text-lg md:text-xl">
+                    回到探險島地圖
+                </a>
+            </div>
+        </div>
+    </div>
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- 關卡設定 ---
+        const levels = [
+            { target: 2, min: 1, max: 2, tolerance: 0.05, type: 'manual' },
+            { target: 3, min: 1, max: 2, tolerance: 0.05, type: 'auto', speed: 0.007 },
+            { target: 5, min: 2, max: 3, tolerance: 0.05, type: 'auto', speed: 0.011 }
+        ];
+        let currentLevel = 0;
+        const quizQuestions = [
+            { answer: 'C' },
+            { answer: 'B' },
+            { answer: 'D' }
+        ];
+        // --- DOM 元素 ---
+        const storyView = document.getElementById('story-view');
+        const startQuizButton = document.getElementById('start-quiz-button');
+        const quizView = document.getElementById('quiz-view');
+        const submitQuizButton = document.getElementById('submit-quiz-button');
+        const rereadStoryButton = document.getElementById('reread-story-button');
+        const quizFeedback = document.getElementById('quiz-feedback');
+        const gameView = document.getElementById('game-view');
+        const applicationView = document.getElementById('application-view');
+        const squareDisplay = document.getElementById('square-display');
+        const targetAreaText = document.getElementById('target-area-text');
+        const targetSqrtText = document.getElementById('target-sqrt-text');
+        const guessSqrtText = document.getElementById('guess-sqrt-text');
+        const currentValue = document.getElementById('current-value');
+        const currentSquaredValue = document.getElementById('current-squared-value');
+        const valueSlider = document.getElementById('value-slider');
+        const checkButton = document.getElementById('check-button');
+        const feedbackBox = document.getElementById('feedback-box');
+        const nextLevelButton = document.getElementById('next-level-button');
+        // --- 遊戲狀態 ---
+        let sliderAnimationId = null;
+        let sliderDirection = 1;
+        // --- 核心函式 ---
+        function initLevel(levelIndex) {
+            const level = levels[levelIndex];
+            if (sliderAnimationId) {
+                cancelAnimationFrame(sliderAnimationId);
+                sliderAnimationId = null;
+            }
+            targetAreaText.textContent = level.target;
+            targetSqrtText.innerHTML = `√${level.target}`;
+            guessSqrtText.innerHTML = `√${level.target}`;
+            valueSlider.min = level.min;
+            valueSlider.max = level.max;
+            valueSlider.value = (level.min + level.max) / 2;
+            valueSlider.step = 0.01;
+            updateSliderDisplay();
+            feedbackBox.textContent = '';
+            feedbackBox.className = 'text-center text-xl font-semibold min-h-[32px]';
+            checkButton.disabled = false;
+            nextLevelButton.classList.add('hidden');
+            squareDisplay.classList.remove('success-flash');
+            if (level.type === 'manual') {
+                valueSlider.style.pointerEvents = 'auto';
+                checkButton.textContent = '確定答案';
+            } else {
+                valueSlider.style.pointerEvents = 'none';
+                checkButton.textContent = '按下鎖定！';
+                sliderDirection = 1;
+                startSliderAnimation();
+            }
+            if (levelIndex === levels.length - 1) {
+                nextLevelButton.textContent = '查看生活應用';
+            } else {
+                nextLevelButton.textContent = '挑戰下一關';
+            }
+        }
+        function startSliderAnimation() {
+            const level = levels[currentLevel];
+            let val = parseFloat(valueSlider.value);
+            val += sliderDirection * level.speed;
+            if (val >= level.max || val <= level.min) {
+                sliderDirection *= -1;
+                val = Math.max(level.min, Math.min(level.max, val));
+            }
+            valueSlider.value = val;
+            updateSliderDisplay();
+            sliderAnimationId = requestAnimationFrame(startSliderAnimation);
+        }
+        function updateSliderDisplay() {
+            const val = parseFloat(valueSlider.value);
+            const squaredVal = val * val;
+            currentValue.textContent = val.toFixed(2);
+            currentSquaredValue.textContent = squaredVal.toFixed(2);
+        }
+        function checkAnswer() {
+            const level = levels[currentLevel];
+            if (level.type === 'auto' && sliderAnimationId) {
+                cancelAnimationFrame(sliderAnimationId);
+                sliderAnimationId = null;
+            }
+            checkButton.disabled = true;
+            const val = parseFloat(valueSlider.value);
+            const squaredVal = val * val;
+            const difference = Math.abs(squaredVal - level.target);
+            feedbackBox.textContent = '';
+            if (difference <= level.tolerance) {
+                feedbackBox.textContent = '太棒了！你找到了！';
+                feedbackBox.className = 'text-center text-xl font-semibold text-green-600';
+                nextLevelButton.classList.remove('hidden');
+                squareDisplay.classList.add('success-flash');
+            } else {
+                const hint = squaredVal < level.target ? '太小了' : '太大了';
+                feedbackBox.textContent = `喔喔！${hint}，再試一次！`;
+                feedbackBox.className = 'text-center text-xl font-semibold text-red-600';
+                if (level.type === 'auto') {
+                    setTimeout(() => {
+                        initLevel(currentLevel);
+                    }, 2000);
+                } else {
+                    checkButton.disabled = false;
+                }
+            }
+        }
+        function loadNext() {
+            currentLevel++;
+            if (currentLevel < levels.length) {
+                initLevel(currentLevel);
+            } else {
+                gameView.classList.add('hidden');
+                applicationView.classList.remove('hidden');
+            }
+        }
+        function checkQuiz() {
+            let allCorrect = true;
+            quizFeedback.textContent = '';
+            quizFeedback.classList.remove('text-red-500', 'text-green-600');
+            quizQuestions.forEach((question, index) => {
+                const container = document.getElementById(`question-container-${index}`);
+                const selected = document.querySelector(`input[name="q${index}"]:checked`);
+                container.classList.remove('incorrect');
+                if (!selected || selected.value !== question.answer) {
+                    allCorrect = false;
+                    container.classList.add('incorrect');
+                }
+            });
+            if (allCorrect) {
+                quizFeedback.textContent = '太棒了！你很用心在看故事喔！';
+                quizFeedback.classList.add('text-green-600');
+                submitQuizButton.disabled = true;
+                rereadStoryButton.disabled = true;
+                setTimeout(() => {
+                    quizView.classList.add('hidden');
+                    gameView.classList.remove('hidden');
+                }, 2000);
+            } else {
+                quizFeedback.textContent = '有題目答錯了，再檢查看看或重讀一次故事吧！';
+                quizFeedback.classList.add('text-red-500');
+            }
+        }
+        // --- 事件監聽 ---
+        startQuizButton.addEventListener('click', () => {
+            storyView.classList.add('hidden');
+            quizView.classList.remove('hidden');
+            submitQuizButton.disabled = false;
+            rereadStoryButton.disabled = false;
+            quizFeedback.textContent = '';
+            quizQuestions.forEach((_, index) => {
+                 document.getElementById(`question-container-${index}`).classList.remove('incorrect');
+            });
+        });
+        rereadStoryButton.addEventListener('click', () => {
+            quizView.classList.add('hidden');
+            storyView.classList.remove('hidden');
+        });
+        submitQuizButton.addEventListener('click', checkQuiz);
+        valueSlider.addEventListener('input', updateSliderDisplay);
+        checkButton.addEventListener('click', checkAnswer);
+        nextLevelButton.addEventListener('click', loadNext);
+        // --- 初始啟動 ---
+        initLevel(currentLevel);
+    });
+    </script>
+</body>
+</html>