Spaces:
Running
Running
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>數學魔法王國：成就系統測試頁</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| margin: 0; | |
| padding: 20px; | |
| background-color: #f0f0f0; | |
| } | |
| .test-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #ff8c00; | |
| } | |
| .test-section { | |
| margin-bottom: 30px; | |
| padding: 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| } | |
| .test-section h2 { | |
| margin-top: 0; | |
| color: #333; | |
| } | |
| .test-buttons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| button { | |
| padding: 8px 15px; | |
| background-color: #4e9af1; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #3a7bc8; | |
| } | |
| button.journey { | |
| background-color: #4e9af1; | |
| } | |
| button.trial { | |
| background-color: #f1c232; | |
| } | |
| button.secret { | |
| background-color: #9c59b6; | |
| } | |
| .test-result { | |
| margin-top: 15px; | |
| padding: 10px; | |
| background-color: #f9f9f9; | |
| border-left: 4px solid #4e9af1; | |
| font-family: monospace; | |
| white-space: pre-wrap; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .navigation { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 30px; | |
| } | |
| .toast-container { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="test-container"> | |
| <h1>數學魔法王國：成就系統測試頁</h1> | |
| <div class="test-section"> | |
| <h2>1. 成就系統導航</h2> | |
| <p>測試成就系統頁面導航和基本功能</p> | |
| <div class="test-buttons"> | |
| <button onclick="window.location.href='achievements.html'">開啟成就圖鑑</button> | |
| <button onclick="window.location.href='achievements.html?debug=true'">開啟成就圖鑑（調試模式）</button> | |
| </div> | |
| </div> | |
| <div class="test-section"> | |
| <h2>2. 成就解鎖測試</h2> | |
| <p>測試解鎖特定成就並顯示通知</p> | |
| <div class="test-buttons"> | |
| <button class="journey" onclick="unlockAchievement('journey_1')">解鎖：初次啟程</button> | |
| <button class="journey" onclick="unlockAchievement('journey_2')">解鎖：魔法學徒</button> | |
| <button class="trial" onclick="unlockAchievement('trial_1')">解鎖：泉水初體驗</button> | |
| <button class="trial" onclick="unlockAchievement('trial_2')">解鎖：泉水專家</button> | |
| <button class="secret" onclick="unlockAchievement('secret_1')">解鎖：永不放棄</button> | |
| <button class="secret" onclick="unlockAchievement('secret_2')">解鎖：夜間學習者</button> | |
| </div> | |
| </div> | |
| <div class="test-section"> | |
| <h2>3. 遊戲狀態更新測試</h2> | |
| <p>測試遊戲狀態更新並檢查成就條件</p> | |
| <div class="test-buttons"> | |
| <button onclick="simulateLogin()">模擬登入</button> | |
| <button onclick="simulateCompletePrologue()">模擬完成序章</button> | |
| <button onclick="simulateCompleteTrial('平方之泉', 3, 0)">模擬完成平方之泉（3星）</button> | |
| <button onclick="simulateCompleteTrial('變換山谷', 2, 1)">模擬完成變換山谷（2星）</button> | |
| <button onclick="simulateCompleteTrial('展開之塔', 1, 2)">模擬完成展開之塔（1星）</button> | |
| </div> | |
| </div> | |
| <div class="test-section"> | |
| <h2>4. 資料儲存測試</h2> | |
| <p>測試成就資料儲存和讀取</p> | |
| <div class="test-buttons"> | |
| <button onclick="viewUserProgress()">查看使用者進度</button> | |
| <button onclick="clearUserProgress()">清除使用者進度</button> | |
| <button onclick="simulateDataUpdate()">模擬資料更新</button> | |
| </div> | |
| <div class="test-result" id="data-result"></div> | |
| </div> | |
| <div class="test-section"> | |
| <h2>5. 多成就解鎖測試</h2> | |
| <p>測試同時解鎖多個成就時的通知隊列</p> | |
| <div class="test-buttons"> | |
| <button onclick="unlockMultipleAchievements()">解鎖多個成就</button> | |
| </div> | |
| </div> | |
| <div class="navigation"> | |
| <button onclick="window.location.href='index.html'">返回遊戲主頁</button> | |
| </div> | |
| </div> | |
| <div class="toast-container" id="toast-container"></div> | |
| <script> | |
| // 初始化成就系統 | |
| function initAchievementSystem() { | |
| if (!window.achievementSystem) { | |
| const script = document.createElement('script'); | |
| script.src = 'achievements.js'; | |
| script.onload = function() { | |
| console.log('成就系統腳本加載完成'); | |
| }; | |
| document.head.appendChild(script); | |
| } | |
| } | |
| // 解鎖成就 | |
| function unlockAchievement(id) { | |
| if (window.achievementSystem) { | |
| window.achievementSystem.unlockAchievement(id); | |
| } else { | |
| alert('成就系統尚未初始化，請稍後再試'); | |
| } | |
| } | |
| // 模擬登入 | |
| function simulateLogin() { | |
| // 獲取當前遊戲數據 | |
| const gameData = JSON.parse(localStorage.getItem('gameData') || '{}'); | |
| // 更新登入次數 | |
| gameData.loginCount = (gameData.loginCount || 0) + 1; | |
| // 更新最後登入日期 | |
| gameData.lastLoginDate = new Date().toISOString(); | |
| // 儲存更新後的遊戲數據 | |
| localStorage.setItem('gameData', JSON.stringify(gameData)); | |
| // 檢查成就 | |
| checkAchievements(); | |
| alert(`模擬登入成功！當前登入次數: ${gameData.loginCount}`); | |
| } | |
| // 模擬完成序章 | |
| function simulateCompletePrologue() { | |
| // 獲取當前遊戲數據 | |
| const gameData = JSON.parse(localStorage.getItem('gameData') || '{}'); | |
| // 更新序章完成狀態 | |
| gameData.prologueCompleted = true; | |
| // 儲存更新後的遊戲數據 | |
| localStorage.setItem('gameData', JSON.stringify(gameData)); | |
| // 檢查成就 | |
| checkAchievements(); | |
| alert('模擬完成序章成功！'); | |
| } | |
| // 模擬完成試煉 | |
| function simulateCompleteTrial(trialName, stars, errors) { | |
| // 獲取當前遊戲數據 | |
| const gameData = JSON.parse(localStorage.getItem('gameData') || '{}'); | |
| // 初始化試煉數據結構（如果不存在） | |
| if (!gameData.completedTrials) { | |
| gameData.completedTrials = {}; | |
| } | |
| // 初始化已訪問試煉列表（如果不存在） | |
| if (!gameData.visitedTrials) { | |
| gameData.visitedTrials = []; | |
| } | |
| // 添加到已訪問試煉列表（如果尚未添加） | |
| if (!gameData.visitedTrials.includes(trialName)) { | |
| gameData.visitedTrials.push(trialName); | |
| } | |
| // 更新試煉完成數據 | |
| gameData.completedTrials[trialName] = { | |
| completed: true, | |
| stars: Math.max(stars, gameData.completedTrials[trialName]?.stars || 0), // 保留最高星數 | |
| noErrors: errors === 0 || gameData.completedTrials[trialName]?.noErrors || false, | |
| lastCompletionTime: new Date().toISOString() | |
| }; | |
| // 儲存更新後的遊戲數據 | |
| localStorage.setItem('gameData', JSON.stringify(gameData)); | |
| // 檢查成就 | |
| checkAchievements(); | |
| alert(`模擬完成試煉 ${trialName} 成功！星數: ${stars}, 錯誤數: ${errors}`); | |
| } | |
| // 查看使用者進度 | |
| function viewUserProgress() { | |
| const userAchievements = JSON.parse(localStorage.getItem('userAchievements') || '{}'); | |
| const gameData = JSON.parse(localStorage.getItem('gameData') || '{}'); | |
| const resultElement = document.getElementById('data-result'); | |
| resultElement.textContent = '使用者成就進度:\n' + JSON.stringify(userAchievements, null, 2) + | |
| '\n\n遊戲數據:\n' + JSON.stringify(gameData, null, 2); | |
| } | |
| // 清除使用者進度 | |
| function clearUserProgress() { | |
| if (confirm('確定要清除所有使用者進度嗎？此操作無法撤銷。')) { | |
| localStorage.removeItem('userAchievements'); | |
| localStorage.removeItem('gameData'); | |
| const resultElement = document.getElementById('data-result'); | |
| resultElement.textContent = '使用者進度已清除'; | |
| alert('使用者進度已清除'); | |
| // 重新載入頁面以重置成就系統 | |
| location.reload(); | |
| } | |
| } | |
| // 模擬資料更新 | |
| function simulateDataUpdate() { | |
| // 獲取當前使用者成就進度 | |
| const userAchievements = JSON.parse(localStorage.getItem('userAchievements') || '{}'); | |
| // 模擬新增一個成就 | |
| const newAchievement = { | |
| "id": "new_achievement", | |
| "title": "新增的成就", | |
| "type": "secret", | |
| "description": "這是一個模擬新增的成就", | |
| "unlocked": false, | |
| "condition": { | |
| "type": "special", | |
| "value": true | |
| } | |
| }; | |
| // 將新成就添加到成就系統 | |
| if (window.achievementSystem) { | |
| window.achievementSystem.achievements.push(newAchievement); | |
| // 重新渲染成就列表 | |
| const activeTab = document.querySelector('.tab-button.active')?.dataset.type || 'all'; | |
| window.achievementSystem.renderAchievements(activeTab); | |
| // 更新成就統計 | |
| window.achievementSystem.updateStats(); | |
| const resultElement = document.getElementById('data-result'); | |
| resultElement.textContent = '模擬資料更新成功，新增成就:\n' + JSON.stringify(newAchievement, null, 2) + | |
| '\n\n使用者成就進度保持不變:\n' + JSON.stringify(userAchievements, null, 2); | |
| } else { | |
| alert('成就系統尚未初始化，請稍後再試'); | |
| } | |
| } | |
| // 解鎖多個成就 | |
| function unlockMultipleAchievements() { | |
| if (window.achievementSystem) { | |
| // 解鎖多個成就 | |
| window.achievementSystem.unlockAchievement('journey_3'); | |
| setTimeout(() => window.achievementSystem.unlockAchievement('trial_3'), 500); | |
| setTimeout(() => window.achievementSystem.unlockAchievement('secret_3'), 1000); | |
| alert('正在解鎖多個成就，請觀察右上角的通知'); | |
| } else { | |
| alert('成就系統尚未初始化，請稍後再試'); | |
| } | |
| } | |
| // 檢查成就 | |
| function checkAchievements() { | |
| if (window.achievementSystem) { | |
| // 獲取當前遊戲數據 | |
| const gameData = JSON.parse(localStorage.getItem('gameData') || '{}'); | |
| // 構建遊戲狀態 | |
| const gameState = { | |
| // 基本信息 | |
| loginCount: gameData.loginCount || 0, | |
| prologueCompleted: gameData.prologueCompleted || false, | |
| // 試煉相關 | |
| visitedTrials: gameData.visitedTrials || [], | |
| completedTrials: gameData.completedTrials || {}, | |
| // 其他統計 | |
| maxCorrectStreak: gameData.maxCorrectStreak || 0, | |
| fastestTrialTime: gameData.fastestTrialTime || 999, | |
| fastestQuestionTime: gameData.fastestQuestionTime || 999, | |
| retriesAfterFailure: gameData.retriesAfterFailure || 0, | |
| lastTrialCompletionTime: gameData.lastTrialCompletionTime ? new Date(gameData.lastTrialCompletionTime) : null, | |
| lastTrialStartTime: gameData.lastTrialStartTime ? new Date(gameData.lastTrialStartTime) : null, | |
| // 特殊條件 | |
| allThreeStarsSameDay: gameData.allThreeStarsSameDay || false, | |
| firstAttemptAllThreeStars: gameData.firstAttemptAllThreeStars || false, | |
| musicEnabledAllTrials: gameData.musicEnabledAllTrials || false, | |
| musicDisabledAllTrials: gameData.musicDisabledAllTrials || false | |
| }; | |
| // 檢查成就 | |
| window.achievementSystem.checkAllAchievements(gameState); | |
| } | |
| } | |
| // 當頁面載入完成後初始化成就系統 | |
| document.addEventListener('DOMContentLoaded', initAchievementSystem); | |
| </script> | |
| </body> | |
| </html> | |