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> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| .map-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .map-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); | |
| } | |
| .map-locations { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| margin-bottom: 30px; | |
| } | |
| /* 新的卡片樣式 - 橫向排列 */ | |
| .location-item { | |
| background-color: rgba(60, 60, 60, 0.85); | |
| border: 4px solid #FFD700; | |
| border-radius: 25px; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| transition: all 0.3s; | |
| overflow: hidden; | |
| cursor: pointer; | |
| position: relative; | |
| max-width: 700px; | |
| margin: 0 auto 20px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| .location-item:hover:not(.locked) { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 16px rgba(255, 215, 0, 0.5); | |
| } | |
| .location-image-container { | |
| width: 150px; | |
| height: 120px; | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| border-radius: 15px; | |
| margin: 10px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .location-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| transition: transform 0.5s; | |
| border-radius: 10px; | |
| } | |
| .location-item:hover:not(.locked) .location-image { | |
| transform: scale(1.05); | |
| } | |
| .location-content { | |
| flex-grow: 1; | |
| padding: 10px 15px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .location-name { | |
| font-size: 1.5rem; | |
| margin-bottom: 5px; | |
| color: #FFD700; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); | |
| } | |
| .location-description { | |
| text-align: left; | |
| margin-bottom: 8px; | |
| color: white; | |
| font-size: 1rem; | |
| line-height: 1.3; | |
| } | |
| /* 星星容器與動畫 */ | |
| .stars-container { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 5px; | |
| } | |
| .star { | |
| font-size: 1.5rem; | |
| color: rgba(255, 255, 255, 0.2); | |
| transition: all 0.5s; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .star.earned { | |
| color: #FFD700; | |
| text-shadow: 0 0 8px rgba(255, 215, 0, 0.7); | |
| animation: starPulse 2s infinite alternate; | |
| } | |
| @keyframes starPulse { | |
| 0% { | |
| transform: scale(1); | |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); | |
| } | |
| 100% { | |
| transform: scale(1.15); | |
| text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 180, 0, 0.5); | |
| } | |
| } | |
| /* 星星裝飾效果 */ | |
| .star.earned::before { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, rgba(255,215,0,0) 70%); | |
| border-radius: 50%; | |
| z-index: -1; | |
| animation: starGlow 3s infinite alternate; | |
| } | |
| @keyframes starGlow { | |
| 0% { | |
| transform: scale(1.2); | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| transform: scale(1.8); | |
| opacity: 0.2; | |
| } | |
| } | |
| /* 鎖定狀態 */ | |
| .locked { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| filter: grayscale(70%); | |
| } | |
| .lock-message { | |
| color: rgba(255, 100, 100, 0.9); | |
| font-size: 0.9rem; | |
| margin-top: 5px; | |
| font-style: italic; | |
| } | |
| /* 響應式設計 */ | |
| @media (max-width: 768px) { | |
| .location-item { | |
| flex-direction: column; | |
| } | |
| .location-image-container { | |
| width: 100%; | |
| height: 120px; | |
| border-radius: 12px 12px 0 0; | |
| } | |
| .location-content { | |
| padding: 15px; | |
| text-align: center; | |
| } | |
| .location-description { | |
| text-align: center; | |
| } | |
| .stars-container { | |
| justify-content: center; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="home-page"> | |
| <!-- 音效元素 --> | |
| <audio id="bgm" loop> | |
| <source src="Theme.mp3" type="audio/mpeg"> | |
| </audio> | |
| <div class="game-container"> | |
| <div class="map-container"> | |
| <h1 class="map-title">王國地圖</h1> | |
| <div class="map-locations"> | |
| <!-- 平方之泉 --> | |
| <div class="location-item" id="spring-location"> | |
| <div class="location-image-container"> | |
| <img src="guadian.jpg" alt="平方之泉" class="location-image"> | |
| </div> | |
| <div class="location-content"> | |
| <h2 class="location-name">平方之泉</h2> | |
| <p class="location-description">在這裡，你將學習平方數的直覺感知能力。</p> | |
| <div class="stars-container" id="spring-stars"> | |
| <span class="star earned">★</span> | |
| <span class="star earned">★</span> | |
| <span class="star earned">★</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 變換山谷 --> | |
| <div class="location-item locked" id="valley-location"> | |
| <div class="location-image-container"> | |
| <img src="valley.jpg" alt="變換山谷" class="location-image"> | |
| </div> | |
| <div class="location-content"> | |
| <h2 class="location-name">變換山谷</h2> | |
| <p class="location-description">在這裡，你將學習平方與開根號的轉換變化。</p> | |
| <div class="stars-container" id="valley-stars"> | |
| <span class="star">★</span> | |
| <span class="star">★</span> | |
| <span class="star">★</span> | |
| </div> | |
| <p class="lock-message" id="valley-lock-message">需先完成平方之泉試煉</p> | |
| </div> | |
| </div> | |
| <!-- 展開之塔 --> | |
| <div class="location-item locked" id="tower-location"> | |
| <div class="location-image-container"> | |
| <img src="tower.jpg" alt="展開之塔" class="location-image"> | |
| </div> | |
| <div class="location-content"> | |
| <h2 class="location-name">展開之塔</h2> | |
| <p class="location-description">在這裡，你將學習平方展開式的融合應用。</p> | |
| <div class="stars-container" id="tower-stars"> | |
| <span class="star">★</span> | |
| <span class="star">★</span> | |
| <span class="star">★</span> | |
| </div> | |
| <p class="lock-message" id="tower-lock-message">需先完成變換山谷試煉</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="navigation-buttons"> | |
| <button id="back-to-prologue" class="nav-btn">返回序章</button> | |
| <button id="achievements-btn" class="nav-btn">成就圖鑑</button> | |
| </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="kingdom_map.js"></script> | |
| <!-- 音樂連續播放控制 --> | |
| <script> | |
| // 嘗試從localStorage獲取音樂播放狀態和時間 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const bgmAudio = document.getElementById('bgm'); | |
| const toggleBgmBtn = document.getElementById('toggle-bgm'); | |
| // 檢查是否有保存的音樂狀態 | |
| const musicPlaying = localStorage.getItem('musicPlaying') === 'true'; | |
| const musicTime = parseFloat(localStorage.getItem('musicTime') || '0'); | |
| if (musicPlaying) { | |
| // 設置音樂播放位置 | |
| bgmAudio.currentTime = musicTime; | |
| bgmAudio.play().catch(e => console.log('自動播放被阻止:', e)); | |
| toggleBgmBtn.textContent = '音樂關'; | |
| } else { | |
| toggleBgmBtn.textContent = '音樂開'; | |
| } | |
| // 定期保存音樂播放位置 | |
| setInterval(function() { | |
| if (!bgmAudio.paused) { | |
| localStorage.setItem('musicTime', bgmAudio.currentTime.toString()); | |
| localStorage.setItem('musicPlaying', 'true'); | |
| } else { | |
| localStorage.setItem('musicPlaying', 'false'); | |
| } | |
| }, 1000); | |
| // 頁面離開前保存音樂狀態 | |
| window.addEventListener('beforeunload', function() { | |
| localStorage.setItem('musicTime', bgmAudio.currentTime.toString()); | |
| localStorage.setItem('musicPlaying', !bgmAudio.paused ? 'true' : 'false'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |