Spaces:
Running
Running
| <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-6"> | |
| <!-- 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> | |
| <!-- Image Zoom Modal --> | |
| <div id="zoom-modal" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 cursor-pointer"> | |
| <img id="zoomed-image" src="" alt="放大的統計圖表" class="max-w-full max-h-full rounded-lg shadow-2xl"> | |
| </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 zoomModal = document.getElementById('zoom-modal'); | |
| const zoomedImage = document.getElementById('zoomed-image'); | |
| // --- 遊戲設定 --- | |
| 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 = ''; | |
| const marketOrder = ['A', 'B', 'C']; | |
| marketOrder.forEach(key => { | |
| const src = marketLevel.images[key]; | |
| const choiceContainer = document.createElement('div'); | |
| choiceContainer.className = 'market-choice relative p-2 rounded-lg border-4 border-transparent cursor-pointer transition-all duration-200'; | |
| choiceContainer.dataset.market = key; | |
| const img = document.createElement('img'); | |
| img.src = src; | |
| img.alt = `[統計圖表]`; | |
| img.className = 'w-full h-auto rounded-lg shadow-lg'; | |
| const zoomIcon = document.createElement('button'); | |
| zoomIcon.className = 'absolute top-2 right-2 bg-black/50 p-2 rounded-full text-white hover:bg-black/80 transition-colors z-10'; | |
| zoomIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8zm8-3a1 1 0 011 1v2h2a1 1 0 110 2h-2v2a1 1 0 11-2 0v-2H5a1 1 0 110-2h2V6a1 1 0 011-1z" clip-rule="evenodd" /></svg>`; | |
| zoomIcon.onclick = (e) => { | |
| e.stopPropagation(); | |
| showEnlargedImage(src); | |
| }; | |
| choiceContainer.appendChild(img); | |
| choiceContainer.appendChild(zoomIcon); | |
| choiceContainer.addEventListener('click', handleMarketChoice); | |
| marketImagesContainer.appendChild(choiceContainer); | |
| }); | |
| marketFeedback.textContent = ''; | |
| nextLevelButton.classList.add('hidden'); | |
| firstChoice = null; | |
| } | |
| function handleMarketChoice(e) { | |
| const choiceContainer = e.target.closest('.market-choice'); | |
| if (!choiceContainer) return; | |
| const choice = choiceContainer.dataset.market; | |
| const marketLevel = marketLevels[currentLevel]; | |
| document.querySelectorAll('.market-choice').forEach(div => div.classList.remove('selected')); | |
| if (currentLevel === 0) { | |
| if (choice === marketLevel.correctAnswer) { | |
| choiceContainer.classList.add('selected'); | |
| 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) { | |
| choiceContainer.classList.add('selected'); | |
| 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; | |
| choiceContainer.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) { | |
| choiceContainer.classList.add('selected'); | |
| 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'; | |
| } | |
| } | |
| } | |
| function showEnlargedImage(src) { | |
| zoomedImage.src = src; | |
| zoomModal.classList.remove('hidden'); | |
| } | |
| function hideEnlargedImage() { | |
| zoomModal.classList.add('hidden'); | |
| zoomedImage.src = ''; | |
| } | |
| // --- 事件監聽 --- | |
| 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'); | |
| // FIX: Update the fish name immediately when showing the market screen instructions. | |
| document.querySelectorAll('.market-fish-name').forEach(el => el.textContent = levels[currentLevel].targetFish); | |
| 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; | |
| }); | |
| zoomModal.addEventListener('click', () => { | |
| hideEnlargedImage(); | |
| }); | |
| // --- 初始啟動 --- | |
| showScreen('start-screen'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |