Spaces:

Lashtw
/

math-kingdom-game

Running

App Files Files Community

Lashtw commited on May 31, 2025

Commit

6871120

verified ·

1 Parent(s): 3775b38

Upload 6 files

Browse files

Files changed (6) hide show

.gitattributes +1 -0
palace.jpg +3 -0
prologue.html +33 -0
prologue.js +34 -0
script.js +15 -3
style.css +150 -17

.gitattributes CHANGED Viewed

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 Theme.jpg filter=lfs diff=lfs merge=lfs -text

 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* 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

palace.jpg ADDED Viewed

Git LFS Details

SHA256: 77ea5c74b30fc78fc86a6872183758a9bbc1c4f1cc81aa1967c195e0826146e8
Pointer size: 131 Bytes
Size of remote file: 667 kB

prologue.html ADDED Viewed

	@@ -0,0 +1,33 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>序章：勇者的召喚 - 數學魔法王國：平方之旅</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="prologue-page">
+    <div class="game-container">
+        <div class="prologue-container">
+            <h1 class="prologue-title">序章：勇者的召喚</h1>
+            <div class="prologue-content">
+                <p>你被王國的智者召喚到王宮，得知自己是預言中的「數學勇者」。</p>
+                <p>智者解釋道：「平方之力分為三個層次：『直覺感知』、『轉換變化』和『展開融合』。你必須前往王國的三個神聖地點，通過試煉獲得這三種力量。」</p>
+                <p>智者給了你一張魔法地圖，上面標記著三個地點：「平方之泉」、「變換山谷」和「展開之塔」。</p>
+                <p>「記住，勇者，」智者嚴肅地說，「這不僅是一場考驗，更是一段成長之旅。每一關的力量都是下一關的基礎，你必須按順序完成試煉。」</p>
+            </div>
+            <div class="navigation-buttons">
+                <button id="back-to-home" class="nav-btn">返回首頁</button>
+                <button id="continue-journey" class="nav-btn">繼續旅程</button>
+            </div>
+        </div>
+    </div>
+    <script src="prologue.js"></script>
+</body>
+</html>

prologue.js ADDED Viewed

	@@ -0,0 +1,34 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // 檢查是否有玩家資料
+    const currentPlayerId = localStorage.getItem('currentPlayerId');
+    const playerName = localStorage.getItem('playerName');
+    const playerProfession = localStorage.getItem('playerProfession');
+    // 如果沒有玩家資料，重定向到首頁
+    if (!currentPlayerId || !playerName || !playerProfession) {
+        alert('請先登入遊戲！');
+        window.location.href = 'index.html';
+        return;
+    }
+    // 獲取DOM元素
+    const backToHomeBtn = document.getElementById('back-to-home');
+    const continueJourneyBtn = document.getElementById('continue-journey');
+    // 返回首頁按鈕點擊事件
+    backToHomeBtn.addEventListener('click', function() {
+        window.location.href = 'index.html';
+    });
+    // 繼續旅程按鈕點擊事件
+    continueJourneyBtn.addEventListener('click', function() {
+        // 這裡將來會導向第一個試煉「平方之泉」
+        alert('即將前往第一個試煉：平方之泉（功能尚未實作）');
+        // 更新遊戲進度
+        const gameProgress = JSON.parse(localStorage.getItem(`gameProgress_${currentPlayerId}`));
+        gameProgress.currentLocation = "平方之泉";
+        gameProgress.lastSaved = new Date().toISOString();
+        localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));
+    });
+});

script.js CHANGED Viewed

@@ -149,13 +149,25 @@ document.addEventListener('DOMContentLoaded', function() {
     // 開始冒險按鈕點擊事件（歡迎訊息後）
     startAdventureBtn.addEventListener('click', function() {
         welcomeModal.style.display = 'none';
-        // 這裡可以添加跳轉到遊戲主頁面的代碼
-        alert('冒險開始！（此處將跳轉到遊戲主頁面）');
     });
     // 讀取進度按鈕點擊事件
     loadBtn.addEventListener('click', function() {
-        alert('讀取進度功能尚未實作');
     });
     // 遊戲結束按鈕點擊事件

     // 開始冒險按鈕點擊事件（歡迎訊息後）
     startAdventureBtn.addEventListener('click', function() {
         welcomeModal.style.display = 'none';
+        // 導向序章頁面
+        window.location.href = 'prologue.html';
     });
     // 讀取進度按鈕點擊事件
     loadBtn.addEventListener('click', function() {
+        // 檢查是否有存檔
+        const currentPlayerId = localStorage.getItem('currentPlayerId');
+        if (currentPlayerId) {
+            const playerName = localStorage.getItem('playerName');
+            const playerProfession = localStorage.getItem('playerProfession');
+            if (confirm(`檢測到 ${playerProfession}${playerName} 的存檔，是否繼續遊戲？`)) {
+                // 直接進入序章頁面
+                window.location.href = 'prologue.html';
+            }
+        } else {
+            alert('未找到存檔記錄，請先開始新遊戲。');
+        }
     });
     // 遊戲結束按鈕點擊事件

style.css CHANGED Viewed

@@ -6,15 +6,23 @@
 }
 body {
-    background-image: url('Theme.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
-    overflow: hidden;
 }
 .game-container {
@@ -22,6 +30,7 @@ body {
     width: 100%;
     max-width: 800px;
     padding: 20px;
 }
 .game-title {
@@ -36,10 +45,11 @@ body {
 .menu-container {
     background-color: rgba(0, 0, 0, 0.6);
-    border: 3px solid rgba(0, 200, 0, 0.7);
     border-radius: 10px;
     padding: 20px;
-    width: 300px;
     margin: 0 auto;
 }
@@ -48,7 +58,7 @@ body {
     width: 100%;
     padding: 12px;
     margin: 10px 0;
-    background-color: rgba(0, 150, 0, 0.8);
     color: white;
     border: none;
     border-radius: 5px;
@@ -59,9 +69,9 @@ body {
 }
 .menu-btn:hover {
-    background-color: rgba(0, 200, 0, 0.9);
     transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
 }
 /* 彈窗樣式 */
@@ -74,18 +84,19 @@ body {
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
 }
 .modal-content {
     background-color: rgba(0, 0, 0, 0.8);
     color: white;
-    margin: 15% auto;
     padding: 20px;
-    border: 2px solid rgba(0, 200, 0, 0.7);
     border-radius: 10px;
-    width: 80%;
     max-width: 500px;
-    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
     animation: modalFadeIn 0.5s;
 }
@@ -109,7 +120,7 @@ body {
 .modal-content h2 {
     margin-bottom: 20px;
     text-align: center;
-    color: rgba(0, 255, 0, 0.9);
 }
 #player-id {
@@ -122,11 +133,11 @@ body {
     font-size: 1rem;
 }
-#confirm-id, #start-adventure {
     display: block;
     width: 100%;
     padding: 10px;
-    background-color: rgba(0, 150, 0, 0.8);
     color: white;
     border: none;
     border-radius: 5px;
@@ -136,8 +147,9 @@ body {
     margin-top: 10px;
 }
-#confirm-id:hover, #start-adventure:hover {
-    background-color: rgba(0, 200, 0, 0.9);
 }
 .error-message {
@@ -169,3 +181,124 @@ body {
     font-size: 1.3rem;
     text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
 }

 }
 body {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
+    background-attachment: fixed;
+    min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow-x: hidden;
+}
+body.home-page {
+    background-image: url('Theme.jpg');
+}
+body.prologue-page {
+    background-image: url('palace.jpg');
 }
 .game-container {
     width: 100%;
     max-width: 800px;
     padding: 20px;
+    margin: 20px;
 }
 .game-title {
 .menu-container {
     background-color: rgba(0, 0, 0, 0.6);
+    border: 3px solid rgba(255, 140, 0, 0.7); /* 橘色邊框 */
     border-radius: 10px;
     padding: 20px;
+    width: 100%;
+    max-width: 300px;
     margin: 0 auto;
 }
     width: 100%;
     padding: 12px;
     margin: 10px 0;
+    background-color: rgba(255, 140, 0, 0.8); /* 橘色按鈕 */
     color: white;
     border: none;
     border-radius: 5px;
 }
 .menu-btn:hover {
+    background-color: rgba(255, 165, 0, 0.9); /* 橘色按鈕懸停效果 */
     transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); /* 橘色光暈 */
 }
 /* 彈窗樣式 */
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
+    overflow-y: auto;
 }
 .modal-content {
     background-color: rgba(0, 0, 0, 0.8);
     color: white;
+    margin: 10% auto;
     padding: 20px;
+    border: 2px solid rgba(255, 140, 0, 0.7); /* 橘色邊框 */
     border-radius: 10px;
+    width: 90%;
     max-width: 500px;
+    box-shadow: 0 0 20px rgba(255, 140, 0, 0.3); /* 橘色光暈 */
     animation: modalFadeIn 0.5s;
 }
 .modal-content h2 {
     margin-bottom: 20px;
     text-align: center;
+    color: rgba(255, 165, 0, 0.9); /* 橘色標題 */
 }
 #player-id {
     font-size: 1rem;
 }
+#confirm-id, #start-adventure, .action-btn {
     display: block;
     width: 100%;
     padding: 10px;
+    background-color: rgba(255, 140, 0, 0.8); /* 橘色按鈕 */
     color: white;
     border: none;
     border-radius: 5px;
     margin-top: 10px;
 }
+#confirm-id:hover, #start-adventure:hover, .action-btn:hover {
+    background-color: rgba(255, 165, 0, 0.9); /* 橘色按鈕懸停效果 */
+    box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); /* 橘色光暈 */
 }
 .error-message {
     font-size: 1.3rem;
     text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
 }
+/* 序章頁面樣式 */
+.prologue-container {
+    background-color: rgba(0, 0, 0, 0.7);
+    border: 3px solid rgba(255, 140, 0, 0.7); /* 橘色邊框 */
+    border-radius: 10px;
+    padding: 30px;
+    width: 90%;
+    max-width: 800px;
+    margin: 0 auto;
+    color: white;
+}
+.prologue-title {
+    color: rgba(255, 165, 0, 0.9); /* 橘色標題 */
+    font-size: 2rem;
+    margin-bottom: 30px;
+    text-align: center;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+.prologue-content {
+    line-height: 1.8;
+    font-size: 1.1rem;
+    margin-bottom: 30px;
+    text-align: justify;
+}
+.prologue-content p {
+    margin-bottom: 15px;
+}
+.map-image {
+    width: 100%;
+    max-width: 500px;
+    margin: 20px auto;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(255, 140, 0, 0.3); /* 橘色光暈 */
+}
+.navigation-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 30px;
+}
+.nav-btn {
+    padding: 10px 20px;
+    background-color: rgba(255, 140, 0, 0.8); /* 橘色按鈕 */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.nav-btn:hover {
+    background-color: rgba(255, 165, 0, 0.9); /* 橘色按鈕懸停效果 */
+    box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); /* 橘色光暈 */
+}
+/* 響應式設計 */
+@media (max-width: 768px) {
+    .game-title {
+        font-size: 2rem;
+        margin-bottom: 30px;
+    }
+    .modal-content {
+        margin: 20% auto;
+        width: 95%;
+        padding: 15px;
+    }
+    .prologue-container {
+        padding: 20px;
+    }
+    .prologue-title {
+        font-size: 1.8rem;
+    }
+    .prologue-content {
+        font-size: 1rem;
+    }
+}
+@media (max-width: 480px) {
+    .game-title {
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+    }
+    .menu-container {
+        padding: 15px;
+    }
+    .menu-btn {
+        padding: 10px;
+        font-size: 1rem;
+    }
+    .modal-content {
+        margin: 30% auto;
+        padding: 15px;
+    }
+    .prologue-title {
+        font-size: 1.5rem;
+    }
+    .navigation-buttons {
+        flex-direction: column;
+        gap: 10px;
+    }
+    .nav-btn {
+        width: 100%;
+    }
+}