Spaces:

Lashtw
/

math-kingdom-game

Running

App Files Files Community

Lashtw commited on May 31, 2025

Commit

d2fdd72

verified ·

1 Parent(s): 31a7f23

Upload 12 files

Browse files

Files changed (6) hide show

index.html +1 -1
prologue.js +6 -3
spring.css +218 -0
spring.html +67 -0
spring.js +177 -0
style.css +210 -4

index.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <title>數學魔法王國：平方之旅</title>
     <link rel="stylesheet" href="style.css">
 </head>
-<body>
     <div class="game-container">
         <h1 class="game-title">《數學魔法王國：平方之旅》</h1>

     <title>數學魔法王國：平方之旅</title>
     <link rel="stylesheet" href="style.css">
 </head>
+<body class="home-page">
     <div class="game-container">
         <h1 class="game-title">《數學魔法王國：平方之旅》</h1>

prologue.js CHANGED Viewed

@@ -22,11 +22,14 @@ document.addEventListener('DOMContentLoaded', function() {
     // 繼續旅程按鈕點擊事件
     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));

     // 繼續旅程按鈕點擊事件
     continueJourneyBtn.addEventListener('click', function() {
+        // 導向第一個試煉「平方之泉」
+        window.location.href = 'spring.html';
         // 更新遊戲進度
+        const gameProgress = JSON.parse(localStorage.getItem(`gameProgress_${currentPlayerId}`)) || {};
+        if (!gameProgress.completedTrials) {
+            gameProgress.completedTrials = {};
+        }
         gameProgress.currentLocation = "平方之泉";
         gameProgress.lastSaved = new Date().toISOString();
         localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));

spring.css ADDED Viewed

	@@ -0,0 +1,218 @@

+/* 平方之泉頁面樣式 */
+body.spring-page {
+    background-image: url('guardian.jpg');
+}
+.spring-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;
+}
+.spring-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);
+}
+.spring-content {
+    line-height: 1.8;
+    font-size: 1.1rem;
+    margin-bottom: 30px;
+    text-align: justify;
+}
+.spring-content p {
+    margin-bottom: 15px;
+}
+.start-challenge-container {
+    text-align: center;
+    margin-top: 30px;
+}
+/* 問答區域樣式 */
+.quiz-container {
+    padding: 20px;
+    margin-bottom: 30px;
+}
+#question-container {
+    margin-bottom: 30px;
+}
+#question-text {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    color: rgba(255, 165, 0, 0.9);
+    text-align: center;
+}
+#options-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+    margin-bottom: 20px;
+}
+.option-btn {
+    padding: 15px;
+    background-color: rgba(255, 140, 0, 0.6);
+    color: white;
+    border: 2px solid rgba(255, 165, 0, 0.8);
+    border-radius: 8px;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-align: center;
+}
+.option-btn:hover {
+    background-color: rgba(255, 165, 0, 0.8);
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
+}
+.option-btn.correct {
+    background-color: rgba(0, 200, 0, 0.8);
+    border-color: rgba(0, 255, 0, 0.8);
+}
+.option-btn.incorrect {
+    background-color: rgba(200, 0, 0, 0.8);
+    border-color: rgba(255, 0, 0, 0.8);
+}
+.option-btn.disabled {
+    cursor: not-allowed;
+    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;
+}
+.progress-text {
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 1.1rem;
+}
+.progress-bar {
+    height: 15px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    overflow: hidden;
+}
+#progress-fill {
+    height: 100%;
+    background-color: rgba(255, 165, 0, 0.8);
+    width: 0%;
+    transition: width 0.5s ease;
+}
+/* 完成訊息樣式 */
+.completion-message {
+    text-align: center;
+    padding: 20px;
+}
+.completion-message h2 {
+    color: rgba(255, 215, 0, 0.9);
+    font-size: 1.8rem;
+    margin-bottom: 20px;
+    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+}
+.completion-message p {
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+}
+.feedback-container {
+    text-align: center;
+    margin: 20px 0;
+    font-size: 1.2rem;
+    min-height: 30px;
+}
+/* 響應式設計 */
+@media (max-width: 768px) {
+    .spring-title {
+        font-size: 1.8rem;
+    }
+    #options-container {
+        grid-template-columns: 1fr;
+    }
+    .option-btn {
+        padding: 12px;
+    }
+}
+@media (max-width: 480px) {
+    .spring-container {
+        padding: 15px;
+    }
+    .spring-title {
+        font-size: 1.5rem;
+    }
+    .spring-content {
+        font-size: 1rem;
+    }
+    #question-text {
+        font-size: 1.3rem;
+    }
+}

spring.html ADDED Viewed

	@@ -0,0 +1,67 @@

+<!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="spring-page">
+    <div class="game-container">
+        <div class="spring-container">
+            <h1 class="spring-title">第一試煉：平方之泉</h1>
+            <div class="spring-content" id="story-section">
+                <p>這裡是充滿魔法能量的「平方之泉」，但只有熟悉平方力量的人才能吸收泉水力量。</p>
+                <p>守泉獸說道：「1 的平方是 1、2 的平方是 4……你真的記得它們嗎？若你能感受到數字膨脹的力量，你將能邁出第一步。」</p>
+                <p>守泉獸設下了六道考驗，測試你對平方數的直覺感知能力。每答對一題，泉水就會閃爍一次；全部答對，泉水將賦予你「直覺感知」的力量。</p>
+                <div class="start-challenge-container">
+                    <button id="start-challenge" class="action-btn">開始考驗</button>
+                </div>
+            </div>
+            <div class="quiz-container" id="quiz-section" style="display: none;">
+                <div id="question-container">
+                    <h2 id="question-text">問題載入中...</h2>
+                    <div id="options-container">
+                        <!-- 選項將由JavaScript動態生成 -->
+                    </div>
+                </div>
+                <div id="result-feedback" class="feedback-container">
+                    <!-- 答題結果反饋將在這裡顯示 -->
+                </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">
+                        <div id="progress-fill"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="completion-message" id="completion-section" style="display: none;">
+                <h2>恭喜你完成第一試煉！</h2>
+                <p>泉水閃爍著明亮的光芒，你感受到一股力量流入體內...</p>
+                <p>你已獲得「直覺感知」的能力！</p>
+                <p>守泉獸欣慰地說：「你已經掌握了平方的基本感知，但這只是開始。真正的勇者需要學會轉換的藝術。前往變換山谷吧，那裡的山谷之靈會教導你下一階段的力量。」</p>
+                <div class="navigation-buttons">
+                    <button id="back-to-prologue" class="nav-btn">返回序章</button>
+                    <button id="next-trial" class="nav-btn">前往下一試煉</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="spring.js"></script>
+</body>
+</html>

spring.js ADDED Viewed

	@@ -0,0 +1,177 @@

+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 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 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 = [
+        {
+            question: "Q1. 8 的平方是多少？",
+            options: ["(A) 56", "(B) 64", "(C) 72", "(D) 81"],
+            correctIndex: 1
+        },
+        {
+            question: "Q2. 哪個數的平方是 121？",
+            options: ["(A) 10", "(B) 11", "(C) 12", "(D) 13"],
+            correctIndex: 1
+        },
+        {
+            question: "Q3. 5 的平方是多少？",
+            options: ["(A) 20", "(B) 30", "(C) 25", "(D) 35"],
+            correctIndex: 2
+        },
+        {
+            question: "Q4. 哪個數的平方是 36？",
+            options: ["(A) 6", "(B) 7", "(C) 5", "(D) 8"],
+            correctIndex: 0
+        },
+        {
+            question: "Q5. 12 的平方是多少？",
+            options: ["(A) 124", "(B) 132", "(C) 144", "(D) 154"],
+            correctIndex: 2
+        },
+        {
+            question: "Q6. 哪個數的平方是 49？",
+            options: ["(A) 6", "(B) 8", "(C) 7", "(D) 9"],
+            correctIndex: 2
+        }
+    ];
+    let currentQuestionIndex = 0;
+    let correctAnswers = 0;
+    // 開始考驗按鈕點擊事件
+    startChallengeBtn.addEventListener('click', function() {
+        storySection.style.display = 'none';
+        quizSection.style.display = 'block';
+        showQuestion(currentQuestionIndex);
+    });
+    // 顯示問題
+    function showQuestion(index) {
+        const question = questions[index];
+        questionText.textContent = question.question;
+        // 清空選項容器
+        optionsContainer.innerHTML = '';
+        // 添加選項
+        question.options.forEach((option, i) => {
+            const button = document.createElement('button');
+            button.className = 'option-btn';
+            button.textContent = option;
+            button.dataset.index = i;
+            button.addEventListener('click', function() {
+                checkAnswer(i);
+            });
+            optionsContainer.appendChild(button);
+        });
+        // 清空結果反饋
+        resultFeedback.textContent = '';
+    }
+    // 檢查答案
+    function checkAnswer(selectedIndex) {
+        const correctIndex = questions[currentQuestionIndex].correctIndex;
+        const optionButtons = document.querySelectorAll('.option-btn');
+        // 禁用所有選項按鈕
+        optionButtons.forEach(button => {
+            button.classList.add('disabled');
+            button.disabled = true;
+        });
+        // 標記正確和錯誤的選項
+        optionButtons[correctIndex].classList.add('correct');
+        if (selectedIndex !== correctIndex) {
+            optionButtons[selectedIndex].classList.add('incorrect');
+            resultFeedback.textContent = '答錯了，再接再厲！';
+        } else {
+            correctAnswers++;
+            resultFeedback.textContent = '答對了，太棒了！';
+            // 播放泉水閃爍動畫
+            waterRipple.classList.remove('animate');
+            setTimeout(() => {
+                waterRipple.classList.add('animate');
+            }, 10);
+        }
+        // 更新進度
+        progressCount.textContent = correctAnswers;
+        progressFill.style.width = (correctAnswers / questions.length * 100) + '%';
+        // 延遲後進入下一題或完成
+        setTimeout(() => {
+            currentQuestionIndex++;
+            if (currentQuestionIndex < questions.length) {
+                showQuestion(currentQuestionIndex);
+            } else {
+                // 完成所有問題
+                quizSection.style.display = 'none';
+                completionSection.style.display = 'block';
+                // 更新遊戲進度
+                updateGameProgress();
+            }
+        }, 2000);
+    }
+    // 更新遊戲進度
+    function updateGameProgress() {
+        const gameProgress = JSON.parse(localStorage.getItem(`gameProgress_${currentPlayerId}`)) || {};
+        if (!gameProgress.completedTrials) {
+            gameProgress.completedTrials = {};
+        }
+        gameProgress.completedTrials["平方之泉"] = {
+            completed: true,
+            score: (correctAnswers / questions.length) * 100,
+            challengesCompleted: Array(questions.length).fill(false).map((_, i) => i < correctAnswers)
+        };
+        gameProgress.currentLocation = "平方之泉";
+        gameProgress.lastSaved = new Date().toISOString();
+        localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));
+    }
+    // 返回序章按鈕點擊事件
+    backToPrologueBtn.addEventListener('click', function() {
+        window.location.href = 'prologue.html';
+    });
+    // 前往下一試煉按鈕點擊事件
+    nextTrialBtn.addEventListener('click', function() {
+        alert('下一試煉「變換山谷」尚未開放，敬請期待！');
+    });
+});

style.css CHANGED Viewed

@@ -25,6 +25,10 @@ body.prologue-page {
     background-image: url('palace.jpg');
 }
 .game-container {
     text-align: center;
     width: 100%;
@@ -243,6 +247,188 @@ body.prologue-page {
     box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); /* 橘色光暈 */
 }
 /* 響應式設計 */
 @media (max-width: 768px) {
     .game-title {
@@ -256,17 +442,29 @@ body.prologue-page {
         padding: 15px;
     }
-    .prologue-container {
         padding: 20px;
     }
-    .prologue-title {
         font-size: 1.8rem;
     }
-    .prologue-content {
         font-size: 1rem;
     }
 }
 @media (max-width: 480px) {
@@ -289,7 +487,7 @@ body.prologue-page {
         padding: 15px;
     }
-    .prologue-title {
         font-size: 1.5rem;
     }
@@ -301,4 +499,12 @@ body.prologue-page {
     .nav-btn {
         width: 100%;
     }
 }

     background-image: url('palace.jpg');
 }
+body.spring-page {
+    background-image: url('guardian.jpg');
+}
 .game-container {
     text-align: center;
     width: 100%;
     box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); /* 橘色光暈 */
 }
+/* 平方之泉頁面樣式 */
+.spring-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;
+}
+.spring-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);
+}
+.spring-content {
+    line-height: 1.8;
+    font-size: 1.1rem;
+    margin-bottom: 30px;
+    text-align: justify;
+}
+.spring-content p {
+    margin-bottom: 15px;
+}
+.start-challenge-container {
+    text-align: center;
+    margin-top: 30px;
+}
+/* 問答區域樣式 */
+.quiz-container {
+    padding: 20px;
+    margin-bottom: 30px;
+}
+#question-container {
+    margin-bottom: 30px;
+}
+#question-text {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    color: rgba(255, 165, 0, 0.9);
+    text-align: center;
+}
+#options-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+    margin-bottom: 20px;
+}
+.option-btn {
+    padding: 15px;
+    background-color: rgba(255, 140, 0, 0.6);
+    color: white;
+    border: 2px solid rgba(255, 165, 0, 0.8);
+    border-radius: 8px;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-align: center;
+}
+.option-btn:hover {
+    background-color: rgba(255, 165, 0, 0.8);
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
+}
+.option-btn.correct {
+    background-color: rgba(0, 200, 0, 0.8);
+    border-color: rgba(0, 255, 0, 0.8);
+}
+.option-btn.incorrect {
+    background-color: rgba(200, 0, 0, 0.8);
+    border-color: rgba(255, 0, 0, 0.8);
+}
+.option-btn.disabled {
+    cursor: not-allowed;
+    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;
+}
+.progress-text {
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 1.1rem;
+}
+.progress-bar {
+    height: 15px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    overflow: hidden;
+}
+#progress-fill {
+    height: 100%;
+    background-color: rgba(255, 165, 0, 0.8);
+    width: 0%;
+    transition: width 0.5s ease;
+}
+/* 完成訊息樣式 */
+.completion-message {
+    text-align: center;
+    padding: 20px;
+}
+.completion-message h2 {
+    color: rgba(255, 215, 0, 0.9);
+    font-size: 1.8rem;
+    margin-bottom: 20px;
+    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+}
+.completion-message p {
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+}
+.feedback-container {
+    text-align: center;
+    margin: 20px 0;
+    font-size: 1.2rem;
+    min-height: 30px;
+}
 /* 響應式設計 */
 @media (max-width: 768px) {
     .game-title {
         padding: 15px;
     }
+    .prologue-container, .spring-container {
         padding: 20px;
     }
+    .prologue-title, .spring-title {
         font-size: 1.8rem;
     }
+    .prologue-content, .spring-content {
         font-size: 1rem;
     }
+    #options-container {
+        grid-template-columns: 1fr;
+    }
+    .option-btn {
+        padding: 12px;
+    }
+    #question-text {
+        font-size: 1.3rem;
+    }
 }
 @media (max-width: 480px) {
         padding: 15px;
     }
+    .prologue-title, .spring-title {
         font-size: 1.5rem;
     }
     .nav-btn {
         width: 100%;
     }
+    .spring-animation {
+        height: 120px;
+    }
+    .completion-message h2 {
+        font-size: 1.5rem;
+    }
 }