document.addEventListener('DOMContentLoaded', function() { // 檢查是否有玩家資料 const currentPlayerId = localStorage.getItem('currentPlayerId'); // 如果沒有玩家資料,重定向到首頁 if (!currentPlayerId) { alert('請先登入遊戲!'); window.location.href = 'index.html'; return; } // 獲取DOM元素 const storySection = document.getElementById('story-section'); const quizSection = document.getElementById('quiz-section'); const completionSection = document.getElementById('completion-section'); const startChallengeBtn = document.getElementById('start-challenge'); const questionText = document.getElementById('question-text'); const optionsContainer = document.getElementById('options-container'); const nextQuestionBtn = document.getElementById('next-question'); const backToMapBtn = document.getElementById('back-to-map'); const progressCount = document.getElementById('progress-count'); const progressFill = document.getElementById('progress-fill'); const scoreDisplay = document.getElementById('score-display'); const finalScore = document.getElementById('final-score'); const starsDisplay = document.getElementById('stars-display'); // 遊戲狀態 let currentQuestionIndex = 0; let score = 0; let totalQuestions = 6; // 改為6題 let questions = []; let startTime = Date.now(); // 生成平方題目 - 使用固定題目 function generateQuestions() { questions = [ { question: "8 的平方是多少?", options: [56, 64, 72, 81], correctAnswer: 64 }, { question: "哪個數的平方是 121?", options: [10, 11, 12, 13], correctAnswer: 11 }, { question: "5 的平方是多少?", options: [20, 30, 25, 35], correctAnswer: 25 }, { question: "哪個數的平方是 36?", options: [6, 7, 5, 8], correctAnswer: 6 }, { question: "12 的平方是多少?", options: [124, 132, 144, 154], correctAnswer: 144 }, { question: "哪個數的平方是 49?", options: [6, 8, 7, 9], correctAnswer: 7 } ]; } // 顯示當前題目 function showQuestion() { if (currentQuestionIndex >= questions.length) { showCompletion(); return; } const question = questions[currentQuestionIndex]; questionText.textContent = question.question; // 清空選項容器 optionsContainer.innerHTML = ''; // 創建選項按鈕 question.options.forEach((option, index) => { const button = document.createElement('button'); button.textContent = option; button.className = 'option-btn'; button.addEventListener('click', () => selectAnswer(option, button)); optionsContainer.appendChild(button); }); // 更新進度 updateProgress(); // 隱藏下一題按鈕 if (nextQuestionBtn) { nextQuestionBtn.style.display = 'none'; } } // 選擇答案 function selectAnswer(selectedAnswer, buttonElement) { const question = questions[currentQuestionIndex]; const isCorrect = selectedAnswer === question.correctAnswer; // 禁用所有選項按鈕 const allButtons = optionsContainer.querySelectorAll('.option-btn'); allButtons.forEach(btn => btn.disabled = true); // 標記正確和錯誤答案 allButtons.forEach(btn => { if (parseInt(btn.textContent) === question.correctAnswer) { btn.classList.add('correct'); btn.style.backgroundColor = '#4CAF50'; btn.style.color = 'white'; } else if (btn === buttonElement && !isCorrect) { btn.classList.add('incorrect'); btn.style.backgroundColor = '#f44336'; btn.style.color = 'white'; } }); if (isCorrect) { score++; // 播放正確音效 const correctAudio = new Audio('bingo.mp3'); correctAudio.play().catch(e => console.log('音效播放失敗:', e)); } else { // 播放錯誤音效 const wrongAudio = new Audio('wrong.mp3'); wrongAudio.play().catch(e => console.log('音效播放失敗:', e)); } // 更新分數顯示 updateScore(); // 顯示下一題按鈕 if (nextQuestionBtn) { nextQuestionBtn.style.display = 'block'; } } // 更新進度 function updateProgress() { const progress = ((currentQuestionIndex + 1) / totalQuestions) * 100; if (progressFill) { progressFill.style.width = progress + '%'; } if (progressCount) { progressCount.textContent = currentQuestionIndex + 1; } } // 更新分數 function updateScore() { if (scoreDisplay) { scoreDisplay.textContent = `分數:${score}/${currentQuestionIndex + 1}`; } } // 下一題 function nextQuestion() { currentQuestionIndex++; showQuestion(); } // 顯示完成畫面 function showCompletion() { const endTime = Date.now(); const completionTime = Math.round((endTime - startTime) / 1000); if (quizSection) quizSection.style.display = 'none'; if (completionSection) completionSection.style.display = 'block'; // 計算星級 const percentage = (score / totalQuestions) * 100; let stars = 0; if (percentage >= 90) stars = 3; else if (percentage >= 70) stars = 2; else if (percentage >= 50) stars = 1; // 顯示最終分數和星級 if (finalScore) { finalScore.textContent = `最終分數:${score}/${totalQuestions} (${percentage.toFixed(1)}%)`; } // 顯示星星 if (starsDisplay) { let starsHTML = ''; for (let i = 0; i < 3; i++) { if (i < stars) { starsHTML += ''; } else { starsHTML += ''; } } starsDisplay.innerHTML = starsHTML; } // 保存進度 saveProgress(stars, score, completionTime); // 檢查成就 if (window.achievementSystem) { const gameState = { currentTrial: 'spring', totalStars: stars, completedTrials: { spring: { score: score, stars: stars, challengesCompleted: 1, noErrors: score === totalQuestions, completionTime: completionTime, firstAttemptAllThreeStars: stars === 3 } } }; window.achievementSystem.checkAllAchievements(gameState); } } // 保存進度 function saveProgress(stars, score, completionTime) { const currentPlayerId = localStorage.getItem('currentPlayerId'); if (!currentPlayerId) return; // 獲取現有進度 let gameProgress = JSON.parse(localStorage.getItem(`gameProgress_${currentPlayerId}`)) || {}; // 更新平方之泉進度 if (!gameProgress.spring || gameProgress.spring.stars < stars) { gameProgress.spring = { completed: true, stars: stars, score: score, completionTime: completionTime, completedAt: new Date().toISOString() }; } // 保存進度 localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress)); console.log('平方之泉進度已保存:', gameProgress.spring); } // 開始挑戰按鈕事件 if (startChallengeBtn) { startChallengeBtn.addEventListener('click', function() { console.log('開始平方之泉挑戰'); if (storySection) storySection.style.display = 'none'; if (quizSection) quizSection.style.display = 'block'; // 生成題目並開始 generateQuestions(); currentQuestionIndex = 0; score = 0; startTime = Date.now(); showQuestion(); }); } // 下一題按鈕事件 if (nextQuestionBtn) { nextQuestionBtn.addEventListener('click', nextQuestion); } // 返回地圖按鈕事件 if (backToMapBtn) { backToMapBtn.addEventListener('click', function() { window.location.href = 'kingdom_map.html'; }); } // 前往下一試煉按鈕事件 const nextTrialBtn = document.getElementById('next-trial'); if (nextTrialBtn) { nextTrialBtn.addEventListener('click', function() { window.location.href = 'valley.html'; }); } // 音樂控制 const bgmAudio = document.getElementById('bgm'); const toggleBgmBtn = document.getElementById('toggle-bgm'); if (bgmAudio && toggleBgmBtn) { // 檢查是否有保存的音樂狀態 const musicPlaying = localStorage.getItem('musicPlaying') === 'true'; const musicTime = parseFloat(localStorage.getItem('musicTime') || '0'); if (musicPlaying) { bgmAudio.currentTime = musicTime; bgmAudio.play().catch(e => console.log('自動播放被阻止:', e)); toggleBgmBtn.textContent = '音樂關'; } else { toggleBgmBtn.textContent = '音樂開'; } // 音樂開關按鈕 toggleBgmBtn.addEventListener('click', function() { if (bgmAudio.paused) { bgmAudio.play().then(() => { toggleBgmBtn.textContent = '音樂關'; localStorage.setItem('musicPlaying', 'true'); }).catch(e => console.log('播放失敗:', e)); } else { bgmAudio.pause(); toggleBgmBtn.textContent = '音樂開'; localStorage.setItem('musicPlaying', 'false'); } }); // 保存音樂播放時間 bgmAudio.addEventListener('timeupdate', function() { localStorage.setItem('musicTime', bgmAudio.currentTime.toString()); }); } // 初始化顯示 if (storySection) storySection.style.display = 'block'; if (quizSection) quizSection.style.display = 'none'; if (completionSection) completionSection.style.display = 'none'; });