Hugging Face's logo

Spaces:
Lashtw
/
math-kingdom-game
Running

App Files Community
math-kingdom-game
File size: 5,843 Bytes 
d2fdd72
 
 
 
 
 
 
6a517c6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d2fdd72
 
e86d811
 
6988f53
e86d811
 
 
 
 
 
 
 
d2fdd72
 
 
 
 
 
 
 
 
e86d811
d2fdd72
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6593389
d2fdd72
 
 
6593389
 
 
 
 
 
 
 
d2fdd72
 
 
 
e86d811
d2fdd72
 
 
6593389
 
 
 
 
d2fdd72
6988f53
d2fdd72
 
 
e86d811
 
 
45e730e
e86d811
 
d2fdd72
 
 
6a517c6
 
 
212a450
 
d2fdd72
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
<!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">
    <style>
        /* 成就解鎖彈窗通知 */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 350px;
        }

        .toast {
            background-color: rgba(0, 0, 0, 0.85);
            color: #ffffff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            animation: fadeInOut 5s forwards;
            border-left: 4px solid #ff8c00;
        }

        .toast.journey {
            border-left-color: #4e9af1;
        }

        .toast.trial {
            border-left-color: #f1c232;
        }

        .toast.secret {
            border-left-color: #9c59b6;
        }

        .toast-icon {
            font-size: 2rem;
            margin-right: 15px;
        }

        .toast-content {
            flex: 1;
        }

        .toast-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #ffa500;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; transform: translateX(50px); }
            10% { opacity: 1; transform: translateX(0); }
            90% { opacity: 1; transform: translateX(0); }
            100% { opacity: 0; transform: translateX(50px); }
        }
    </style>
</head>
<body class="spring-page">
    <!-- 音效元素 -->
    <audio id="bgm" loop>
        <source src="spring.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>
            
            <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="progress-container">
                    <div class="progress-text">進度：<span id="progress-count">0</span>/6</div>
                    <div class="progress-bar" id="progress-bar">
                        <div id="progress-fill"></div>
                    </div>
                </div>
                
                <div class="score-container">
                    <div id="score-display">分數：0/0</div>
                </div>
                
                <div class="next-question-container">
                    <button id="next-question" class="action-btn" style="display: none;">下一題</button>
                </div>
            </div>
            
            <div class="completion-message" id="completion-section" style="display: none;">
                <h2>恭喜你完成第一試煉！</h2>
                <p>你感受到一股力量流入體內...</p>
                <p>你已獲得「直覺感知」的能力！</p>
                <p>守泉獸欣慰地說：「你已經掌握了平方的基本感知，但這只是開始。真正的勇者需要學會轉換的藝術。前往變換山谷吧，那裡的山谷之靈會教導你下一階段的力量。」</p>
                
                <div class="score-summary">
                    <div id="final-score">最終分數：0/0</div>
                    <div id="stars-display">☆☆☆</div>
                </div>
                
                <div class="navigation-buttons">
                    <button id="back-to-map" class="nav-btn">返回王國地圖</button>
                    <button id="next-trial" class="nav-btn">前往下一試煉</button>
                </div>
            </div>
            
            <!-- 音樂來源註記 -->
            <div class="music-credit">
                <p>背景音樂：由Suno製作</p>
                <button id="toggle-bgm" class="small-btn">音樂開/關</button>
            </div>
        </div>
    </div>

    <!-- 成就解鎖通知容器 -->
    <div class="toast-container" id="toast-container"></div>

    <!-- 初始化成就系統 -->
    <script src="achievements.js"></script>
    <script src="spring.js"></script>
</body>
</html>