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';
});