Spaces:

Lashtw
/

math-kingdom-game

Running

App Files Files Community

Lashtw commited on May 31, 2025

Commit

e86d811

verified ·

1 Parent(s): d2fdd72

Upload 15 files

Browse files

Files changed (9) hide show

.gitattributes +1 -0
bgm.mp3 +3 -0
bingo.mp3 +0 -0
index.html +12 -0
script.js +96 -69
spring.html +20 -7
spring.js +36 -8
style.css +35 -44
wrong.mp3 +0 -0

.gitattributes CHANGED Viewed

@@ -36,3 +36,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 Theme.jpg filter=lfs diff=lfs merge=lfs -text
 palace.jpg filter=lfs diff=lfs merge=lfs -text
 guadian.jpg filter=lfs diff=lfs merge=lfs -text

 Theme.jpg filter=lfs diff=lfs merge=lfs -text
 palace.jpg filter=lfs diff=lfs merge=lfs -text
 guadian.jpg filter=lfs diff=lfs merge=lfs -text
+bgm.mp3 filter=lfs diff=lfs merge=lfs -text

bgm.mp3 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:c4f837975450c437d063adc17950d6392e02a1127445b4fd9ee8998d25bb1569
+size 2483949

bingo.mp3 ADDED Viewed

Binary file (25.5 kB). View file

index.html CHANGED Viewed

@@ -7,6 +7,11 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body class="home-page">
     <div class="game-container">
         <h1 class="game-title">《數學魔法王國：平方之旅》</h1>
@@ -15,6 +20,13 @@
             <button id="load-btn" class="menu-btn">讀取進度</button>
             <button id="exit-btn" class="menu-btn">遊戲結束</button>
         </div>
     </div>
     <!-- ID輸入彈窗 -->

     <link rel="stylesheet" href="style.css">
 </head>
 <body class="home-page">
+    <!-- 音效元素 -->
+    <audio id="bgm" loop>
+        <source src="bgm.mp3" type="audio/mpeg">
+    </audio>
     <div class="game-container">
         <h1 class="game-title">《數學魔法王國：平方之旅》</h1>
             <button id="load-btn" class="menu-btn">讀取進度</button>
             <button id="exit-btn" class="menu-btn">遊戲結束</button>
         </div>
+        <!-- 音樂來源註記 -->
+        <div class="music-credit">
+            <p>背景音樂：샛별 - Level Up</p>
+            <p>推廣：J&B無版權音樂庫 <a href="https://bit.ly/2YfWIhw" target="_blank">https://bit.ly/2YfWIhw</a></p>
+            <button id="toggle-bgm" class="small-btn">音樂開/關</button>
+        </div>
     </div>
     <!-- ID輸入彈窗 -->

script.js CHANGED Viewed

@@ -1,36 +1,3 @@
-// 玩家資料
-let playerData = [];
-// 載入CSV檔案
-async function loadPlayerData() {
-    try {
-        const response = await fetch('ID.csv');
-        const data = await response.text();
-        // 解析CSV
-        const rows = data.split('\n');
-        const headers = rows[0].split(',');
-        // 跳過標題行，處理每一行資料
-        for (let i = 1; i < rows.length; i++) {
-            if (rows[i].trim() === '') continue;
-            const values = rows[i].split(',');
-            const player = {
-                id: values[0].trim(),
-                name: values[1].trim(),
-                profession: values[2].trim()
-            };
-            playerData.push(player);
-        }
-        console.log('玩家資料載入成功:', playerData);
-    } catch (error) {
-        console.error('載入玩家資料失敗:', error);
-    }
-}
-// 頁面載入時執行
 document.addEventListener('DOMContentLoaded', function() {
     loadPlayerData();
@@ -47,6 +14,34 @@ document.addEventListener('DOMContentLoaded', function() {
     const idError = document.getElementById('id-error');
     const welcomeMessage = document.getElementById('welcome-message');
     const startAdventureBtn = document.getElementById('start-adventure');
     // 開始冒險按鈕點擊事件
     startBtn.addEventListener('click', function() {
@@ -176,43 +171,75 @@ document.addEventListener('DOMContentLoaded', function() {
             alert('感謝遊玩《數學魔法王國：平方之旅》！');
         }
     });
-    // 支援跨裝置存檔的功能
-    function generateSaveCode(playerId) {
-        const progress = localStorage.getItem(`gameProgress_${playerId}`);
-        if (progress) {
-            // 將遊戲進度轉為Base64編碼
-            return btoa(JSON.stringify({
-                id: playerId,
-                progress: JSON.parse(progress)
-            }));
         }
-        return null;
     }
-    function loadFromSaveCode(saveCode) {
-        try {
-            // 解碼並解析存檔數據
-            const data = JSON.parse(atob(saveCode));
-            const playerId = data.id;
-            const progress = data.progress;
-            // 檢查ID是否存在
-            const player = playerData.find(p => p.id === playerId);
-            if (!player) {
-                return { success: false, message: '無效的玩家ID' };
-            }
-            // 儲存進度
-            localStorage.setItem(`gameProgress_${playerId}`, JSON.stringify(progress));
-            localStorage.setItem('currentPlayerId', playerId);
-            localStorage.setItem('playerName', player.name);
-            localStorage.setItem('playerProfession', player.profession);
-            return { success: true, player: player };
-        } catch (e) {
-            console.error("無效的存檔碼", e);
-            return { success: false, message: '無效的存檔碼格式' };
         }
     }
-});

 document.addEventListener('DOMContentLoaded', function() {
     loadPlayerData();
     const idError = document.getElementById('id-error');
     const welcomeMessage = document.getElementById('welcome-message');
     const startAdventureBtn = document.getElementById('start-adventure');
+    const bgmAudio = document.getElementById('bgm');
+    const toggleBgmBtn = document.getElementById('toggle-bgm');
+    // 音樂控制
+    let isBgmPlaying = false;
+    // 播放背景音樂
+    function playBgm() {
+        bgmAudio.volume = 0.3; // 設置音量
+        bgmAudio.play().catch(e => console.log('自動播放被阻止:', e));
+        isBgmPlaying = true;
+    }
+    // 嘗試自動播放背景音樂（大多數瀏覽器會阻止）
+    playBgm();
+    // 音樂開關按鈕
+    toggleBgmBtn.addEventListener('click', function() {
+        if (isBgmPlaying) {
+            bgmAudio.pause();
+            isBgmPlaying = false;
+            toggleBgmBtn.textContent = '音樂開';
+        } else {
+            bgmAudio.play();
+            isBgmPlaying = true;
+            toggleBgmBtn.textContent = '音樂關';
+        }
+    });
     // 開始冒險按鈕點擊事件
     startBtn.addEventListener('click', function() {
             alert('感謝遊玩《數學魔法王國：平方之旅》！');
         }
     });
+});
+// 玩家資料
+let playerData = [];
+// 載入CSV檔案
+async function loadPlayerData() {
+    try {
+        const response = await fetch('ID.csv');
+        const data = await response.text();
+        // 解析CSV
+        const rows = data.split('\n');
+        const headers = rows[0].split(',');
+        // 跳過標題行，處理每一行資料
+        for (let i = 1; i < rows.length; i++) {
+            if (rows[i].trim() === '') continue;
+            const values = rows[i].split(',');
+            const player = {
+                id: values[0].trim(),
+                name: values[1].trim(),
+                profession: values[2].trim()
+            };
+            playerData.push(player);
         }
+        console.log('玩家資料載入成功:', playerData);
+    } catch (error) {
+        console.error('載入玩家資料失敗:', error);
     }
+}
+// 支援跨裝置存檔的功能
+function generateSaveCode(playerId) {
+    const progress = localStorage.getItem(`gameProgress_${playerId}`);
+    if (progress) {
+        // 將遊戲進度轉為Base64編碼
+        return btoa(JSON.stringify({
+            id: playerId,
+            progress: JSON.parse(progress)
+        }));
+    }
+    return null;
+}
+function loadFromSaveCode(saveCode) {
+    try {
+        // 解碼並解析存檔數據
+        const data = JSON.parse(atob(saveCode));
+        const playerId = data.id;
+        const progress = data.progress;
+        // 檢查ID是否存在
+        const player = playerData.find(p => p.id === playerId);
+        if (!player) {
+            return { success: false, message: '無效的玩家ID' };
         }
+        // 儲存進度
+        localStorage.setItem(`gameProgress_${playerId}`, JSON.stringify(progress));
+        localStorage.setItem('currentPlayerId', playerId);
+        localStorage.setItem('playerName', player.name);
+        localStorage.setItem('playerProfession', player.profession);
+        return { success: true, player: player };
+    } catch (e) {
+        console.error("無效的存檔碼", e);
+        return { success: false, message: '無效的存檔碼格式' };
     }
+}

spring.html CHANGED Viewed

@@ -7,6 +7,17 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body class="spring-page">
     <div class="game-container">
         <div class="spring-container">
             <h1 class="spring-title">第一試煉：平方之泉</h1>
@@ -16,7 +27,7 @@
                 <p>守泉獸說道：「1 的平方是 1、2 的平方是 4……你真的記得它們嗎？若你能感受到數字膨脹的力量，你將能邁出第一步。」</p>
-                <p>守泉獸設下了六道考驗，測試你對平方數的直覺感知能力。每答對一題，泉水就會閃爍一次；全部答對，泉水將賦予你「直覺感知」的力量。</p>
                 <div class="start-challenge-container">
                     <button id="start-challenge" class="action-btn">開始考驗</button>
@@ -35,11 +46,6 @@
                     <!-- 答題結果反饋將在這裡顯示 -->
                 </div>
-                <div class="spring-animation" id="spring-animation">
-                    <!-- 泉水閃爍動畫區域 -->
-                    <div class="water-ripple"></div>
-                </div>
                 <div class="progress-container">
                     <div class="progress-text">進度：<span id="progress-count">0</span>/6</div>
                     <div class="progress-bar">
@@ -50,7 +56,7 @@
             <div class="completion-message" id="completion-section" style="display: none;">
                 <h2>恭喜你完成第一試煉！</h2>
-                <p>泉水閃爍著明亮的光芒，你感受到一股力量流入體內...</p>
                 <p>你已獲得「直覺感知」的能力！</p>
                 <p>守泉獸欣慰地說：「你已經掌握了平方的基本感知，但這只是開始。真正的勇者需要學會轉換的藝術。前往變換山谷吧，那裡的山谷之靈會教導你下一階段的力量。」</p>
@@ -59,6 +65,13 @@
                     <button id="next-trial" class="nav-btn">前往下一試煉</button>
                 </div>
             </div>
         </div>
     </div>

     <link rel="stylesheet" href="style.css">
 </head>
 <body class="spring-page">
+    <!-- 音效元素 -->
+    <audio id="bgm" loop>
+        <source src="bgm.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="correct-sound">
+        <source src="bingo.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="wrong-sound">
+        <source src="wrong.mp3" type="audio/mpeg">
+    </audio>
     <div class="game-container">
         <div class="spring-container">
             <h1 class="spring-title">第一試煉：平方之泉</h1>
                 <p>守泉獸說道：「1 的平方是 1、2 的平方是 4……你真的記得它們嗎？若你能感受到數字膨脹的力量，你將能邁出第一步。」</p>
+                <p>守泉獸設下了六道考驗，測試你對平方數的直覺感知能力。每答對一題，你將更接近獲得「直覺感知」的力量。</p>
                 <div class="start-challenge-container">
                     <button id="start-challenge" class="action-btn">開始考驗</button>
                     <!-- 答題結果反饋將在這裡顯示 -->
                 </div>
                 <div class="progress-container">
                     <div class="progress-text">進度：<span id="progress-count">0</span>/6</div>
                     <div class="progress-bar">
             <div class="completion-message" id="completion-section" style="display: none;">
                 <h2>恭喜你完成第一試煉！</h2>
+                <p>你感受到一股力量流入體內...</p>
                 <p>你已獲得「直覺感知」的能力！</p>
                 <p>守泉獸欣慰地說：「你已經掌握了平方的基本感知，但這只是開始。真正的勇者需要學會轉換的藝術。前往變換山谷吧，那裡的山谷之靈會教導你下一階段的力量。」</p>
                     <button id="next-trial" class="nav-btn">前往下一試煉</button>
                 </div>
             </div>
+            <!-- 音樂來源註記 -->
+            <div class="music-credit">
+                <p>背景音樂：샛별 - Level Up</p>
+                <p>推廣：J&B無版權音樂庫 <a href="https://bit.ly/2YfWIhw" target="_blank">https://bit.ly/2YfWIhw</a></p>
+                <button id="toggle-bgm" class="small-btn">音樂開/關</button>
+            </div>
         </div>
     </div>

spring.js CHANGED Viewed

@@ -19,12 +19,40 @@ document.addEventListener('DOMContentLoaded', function() {
     const questionText = document.getElementById('question-text');
     const optionsContainer = document.getElementById('options-container');
     const resultFeedback = document.getElementById('result-feedback');
-    const springAnimation = document.getElementById('spring-animation');
-    const waterRipple = document.querySelector('.water-ripple');
     const progressCount = document.getElementById('progress-count');
     const progressFill = document.getElementById('progress-fill');
     const backToPrologueBtn = document.getElementById('back-to-prologue');
     const nextTrialBtn = document.getElementById('next-trial');
     // 問題集
     const questions = [
@@ -113,15 +141,15 @@ document.addEventListener('DOMContentLoaded', function() {
         if (selectedIndex !== correctIndex) {
             optionButtons[selectedIndex].classList.add('incorrect');
             resultFeedback.textContent = '答錯了，再接再厲！';
         } else {
             correctAnswers++;
             resultFeedback.textContent = '答對了，太棒了！';
-            // 播放泉水閃爍動畫
-            waterRipple.classList.remove('animate');
-            setTimeout(() => {
-                waterRipple.classList.add('animate');
-            }, 10);
         }
         // 更新進度

     const questionText = document.getElementById('question-text');
     const optionsContainer = document.getElementById('options-container');
     const resultFeedback = document.getElementById('result-feedback');
     const progressCount = document.getElementById('progress-count');
     const progressFill = document.getElementById('progress-fill');
     const backToPrologueBtn = document.getElementById('back-to-prologue');
     const nextTrialBtn = document.getElementById('next-trial');
+    const bgmAudio = document.getElementById('bgm');
+    const correctSound = document.getElementById('correct-sound');
+    const wrongSound = document.getElementById('wrong-sound');
+    const toggleBgmBtn = document.getElementById('toggle-bgm');
+    // 音樂控制
+    let isBgmPlaying = false;
+    // 播放背景音樂
+    function playBgm() {
+        bgmAudio.volume = 0.3; // 設置音量
+        bgmAudio.play().catch(e => console.log('自動播放被阻止:', e));
+        isBgmPlaying = true;
+    }
+    // 嘗試自動播放背景音樂（大多數瀏覽器會阻止）
+    playBgm();
+    // 音樂開關按鈕
+    toggleBgmBtn.addEventListener('click', function() {
+        if (isBgmPlaying) {
+            bgmAudio.pause();
+            isBgmPlaying = false;
+            toggleBgmBtn.textContent = '音樂開';
+        } else {
+            bgmAudio.play();
+            isBgmPlaying = true;
+            toggleBgmBtn.textContent = '音樂關';
+        }
+    });
     // 問題集
     const questions = [
         if (selectedIndex !== correctIndex) {
             optionButtons[selectedIndex].classList.add('incorrect');
             resultFeedback.textContent = '答錯了，再接再厲！';
+            // 播放錯誤音效
+            wrongSound.currentTime = 0;
+            wrongSound.play().catch(e => console.log('音效播放失敗:', e));
         } else {
             correctAnswers++;
             resultFeedback.textContent = '答對了，太棒了！';
+            // 播放正確音效
+            correctSound.currentTime = 0;
+            correctSound.play().catch(e => console.log('音效播放失敗:', e));
         }
         // 更新進度

style.css CHANGED Viewed

@@ -26,7 +26,7 @@ body.prologue-page {
 }
 body.spring-page {
-    background-image: url('guardian.jpg');
 }
 .game-container {
@@ -340,45 +340,6 @@ body.spring-page {
     opacity: 0.7;
 }
-/* 泉水動畫區域 */
-.spring-animation {
-    height: 150px;
-    margin: 30px 0;
-    position: relative;
-    overflow: hidden;
-    border-radius: 10px;
-    background-color: rgba(0, 100, 255, 0.3);
-}
-.water-ripple {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background-color: rgba(0, 200, 255, 0.6);
-    opacity: 0;
-}
-.water-ripple.animate {
-    animation: ripple 2s ease-out;
-}
-@keyframes ripple {
-    0% {
-        width: 0;
-        height: 0;
-        opacity: 0.8;
-    }
-    100% {
-        width: 300px;
-        height: 300px;
-        opacity: 0;
-    }
-}
 /* 進度條樣式 */
 .progress-container {
     margin-top: 20px;
@@ -429,6 +390,40 @@ body.spring-page {
     min-height: 30px;
 }
 /* 響應式設計 */
 @media (max-width: 768px) {
     .game-title {
@@ -500,10 +495,6 @@ body.spring-page {
         width: 100%;
     }
-    .spring-animation {
-        height: 120px;
-    }
     .completion-message h2 {
         font-size: 1.5rem;
     }

 }
 body.spring-page {
+    background-image: url('guadian.jpg');
 }
 .game-container {
     opacity: 0.7;
 }
 /* 進度條樣式 */
 .progress-container {
     margin-top: 20px;
     min-height: 30px;
 }
+/* 音樂來源註記 */
+.music-credit {
+    margin-top: 30px;
+    padding-top: 15px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+}
+.music-credit a {
+    color: rgba(255, 165, 0, 0.9);
+    text-decoration: none;
+}
+.music-credit a:hover {
+    text-decoration: underline;
+}
+.small-btn {
+    padding: 5px 10px;
+    background-color: rgba(255, 140, 0, 0.6);
+    color: white;
+    border: none;
+    border-radius: 3px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    margin-top: 5px;
+}
+.small-btn:hover {
+    background-color: rgba(255, 165, 0, 0.8);
+}
 /* 響應式設計 */
 @media (max-width: 768px) {
     .game-title {
         width: 100%;
     }
     .completion-message h2 {
         font-size: 1.5rem;
     }

wrong.mp3 ADDED Viewed

Binary file (27.6 kB). View file