Spaces:

Lashtw
/

math-kingdom-game

Running

App Files Files Community

Lashtw commited on May 31, 2025

Commit

3775b38

verified ·

1 Parent(s): e190431

Upload 5 files

Browse files

Files changed (6) hide show

.gitattributes +1 -0
ID.csv +16 -0
Theme.jpg +3 -0
index.html +42 -0
script.js +206 -0
style.css +161 -18

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip 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

ID.csv ADDED Viewed

	@@ -0,0 +1,16 @@

+ID,姓名,職業
+100090601,張秉恆,影武者
+101010302,羅忠聘,光靈術士
+101010303,羅政聘,光靈術士
+101032704,林均綻,影武者
+101082905,劉家震,影武者
+100090806,邱品潔,暮影使徒
+100110907,陳妤芮,影武者
+101020808,鍾依捷,光靈術士
+101030409,羅文辛,光靈術士
+101042710,鄭詠嬛,暮影使徒
+101060511,黃薇榕,暮影使徒
+101071112,劉軒妤,光靈術士
+101063013,徐立洋,暗影法刃
+101080414,王孝淇,刺客
+1000099,遊戲測試員,GM

Theme.jpg ADDED Viewed

Git LFS Details

SHA256: 5af7e89266fa7bb35b294d4f7e387fab7e61bf0ee836637cf0a8679430770954
Pointer size: 131 Bytes
Size of remote file: 669 kB

index.html ADDED Viewed

	@@ -0,0 +1,42 @@

+<!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>
+    <div class="game-container">
+        <h1 class="game-title">《數學魔法王國：平方之旅》</h1>
+        <div class="menu-container">
+            <button id="start-btn" class="menu-btn">開始冒險</button>
+            <button id="load-btn" class="menu-btn">讀取進度</button>
+            <button id="exit-btn" class="menu-btn">遊戲結束</button>
+        </div>
+    </div>
+    <!-- ID輸入彈窗 -->
+    <div id="id-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-btn">&times;</span>
+            <h2>請輸入您的ID</h2>
+            <input type="text" id="player-id" placeholder="請輸入ID...">
+            <button id="confirm-id">確認</button>
+            <p id="id-error" class="error-message"></p>
+        </div>
+    </div>
+    <!-- 歡迎訊息彈窗 -->
+    <div id="welcome-modal" class="modal">
+        <div class="modal-content welcome-content">
+            <span class="close-welcome-btn">&times;</span>
+            <div id="welcome-message"></div>
+            <button id="start-adventure">開始冒險！</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,206 @@

+// 玩家資料
+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();
+    // 獲取DOM元素
+    const startBtn = document.getElementById('start-btn');
+    const loadBtn = document.getElementById('load-btn');
+    const exitBtn = document.getElementById('exit-btn');
+    const idModal = document.getElementById('id-modal');
+    const welcomeModal = document.getElementById('welcome-modal');
+    const closeBtn = document.querySelector('.close-btn');
+    const closeWelcomeBtn = document.querySelector('.close-welcome-btn');
+    const confirmIdBtn = document.getElementById('confirm-id');
+    const playerIdInput = document.getElementById('player-id');
+    const idError = document.getElementById('id-error');
+    const welcomeMessage = document.getElementById('welcome-message');
+    const startAdventureBtn = document.getElementById('start-adventure');
+    // 開始冒險按鈕點擊事件
+    startBtn.addEventListener('click', function() {
+        idModal.style.display = 'block';
+        playerIdInput.value = '';
+        idError.style.display = 'none';
+    });
+    // 關閉ID輸入彈窗
+    closeBtn.addEventListener('click', function() {
+        idModal.style.display = 'none';
+    });
+    // 關閉歡迎訊息彈窗
+    closeWelcomeBtn.addEventListener('click', function() {
+        welcomeModal.style.display = 'none';
+    });
+    // 點擊彈窗外部關閉彈窗
+    window.addEventListener('click', function(event) {
+        if (event.target === idModal) {
+            idModal.style.display = 'none';
+        }
+        if (event.target === welcomeModal) {
+            welcomeModal.style.display = 'none';
+        }
+    });
+    // 確認ID按鈕點擊事件
+    confirmIdBtn.addEventListener('click', function() {
+        const inputId = playerIdInput.value.trim();
+        if (inputId === '') {
+            idError.textContent = '請輸入ID';
+            idError.style.display = 'block';
+            return;
+        }
+        // 在玩家資料中查找ID
+        const player = playerData.find(p => p.id === inputId);
+        if (player) {
+            // ID存在，顯示歡迎訊息
+            idModal.style.display = 'none';
+            // 設置歡迎訊息
+            const message = `
+                <p class="highlight">🌟 歡迎你，${player.profession}──${player.name}！</p>
+                <p>你被召喚至這個充滿數學魔力的世界，肩負起拯救「數學魔法王國」的重大使命。</p>
+                <p>傳說中，唯有真正的數學勇者，才能重新喚醒古老的「平方之力」──這股支撐王國、對抗黑暗的關鍵能量。</p>
+                <p>現在，時機已到。</p>
+                <p>接下來，你將踏上三段神聖試煉之路，學會感知、轉換與展開的力量。</p>
+                <p>前方的挑戰將磨練你的智慧與勇氣，</p>
+                <p>但只要堅持到底，王國的未來將因你而重生！</p>
+                <p>📜 任務即將開始，請準備好你的數學之心──</p>
+                <p>點擊下方按鈕，開啟你的冒險旅程！</p>
+            `;
+            welcomeMessage.innerHTML = message;
+            welcomeModal.style.display = 'block';
+            // 儲存玩家ID到localStorage，實現跨裝置存檔
+            localStorage.setItem('currentPlayerId', player.id);
+            localStorage.setItem('playerName', player.name);
+            localStorage.setItem('playerProfession', player.profession);
+            // 初始化遊戲進度
+            if (!localStorage.getItem(`gameProgress_${player.id}`)) {
+                const initialProgress = {
+                    completedTrials: {
+                        "平方之泉": {
+                            completed: false,
+                            score: 0,
+                            challengesCompleted: [false, false, false, false, false, false]
+                        },
+                        "變換山谷": {
+                            completed: false,
+                            score: 0,
+                            challengesCompleted: [false, false, false, false, false, false]
+                        },
+                        "展開之塔": {
+                            completed: false,
+                            score: 0,
+                            challengesCompleted: [false, false, false, false, false, false]
+                        }
+                    },
+                    lastSaved: new Date().toISOString()
+                };
+                localStorage.setItem(`gameProgress_${player.id}`, JSON.stringify(initialProgress));
+            }
+        } else {
+            // ID不存在，顯示錯誤訊息
+            idError.textContent = '找不到此ID，請確認後重新輸入';
+            idError.style.display = 'block';
+        }
+    });
+    // 開始冒險按鈕點擊事件（歡迎訊息後）
+    startAdventureBtn.addEventListener('click', function() {
+        welcomeModal.style.display = 'none';
+        // 這裡可以添加跳轉到遊戲主頁面的代碼
+        alert('冒險開始！（此處將跳轉到遊戲主頁面）');
+    });
+    // 讀取進度按鈕點擊事件
+    loadBtn.addEventListener('click', function() {
+        alert('讀取進度功能尚未實作');
+    });
+    // 遊戲結束按鈕點擊事件
+    exitBtn.addEventListener('click', function() {
+        if (confirm('確定要結束遊戲嗎？')) {
+            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: '無效的存檔碼格式' };
+        }
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,171 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
+}
 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 {
+    text-align: center;
+    width: 100%;
+    max-width: 800px;
+    padding: 20px;
+}
+.game-title {
+    color: white;
+    font-size: 2.5rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
+                 0 0 10px rgba(255, 255, 255, 0.5),
+                 0 0 20px rgba(0, 150, 255, 0.5);
+    margin-bottom: 50px;
+    letter-spacing: 3px;
+}
+.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;
+}
+.menu-btn {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    margin: 10px 0;
+    background-color: rgba(0, 150, 0, 0.8);
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+.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);
+}
+/* 彈窗樣式 */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    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;
+}
+@keyframes modalFadeIn {
+    from {opacity: 0; transform: translateY(-50px);}
+    to {opacity: 1; transform: translateY(0);}
+}
+.close-btn, .close-welcome-btn {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+.close-btn:hover, .close-welcome-btn:hover {
+    color: white;
+}
+.modal-content h2 {
+    margin-bottom: 20px;
+    text-align: center;
+    color: rgba(0, 255, 0, 0.9);
+}
+#player-id {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 5px;
+    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;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    margin-top: 10px;
+}
+#confirm-id:hover, #start-adventure:hover {
+    background-color: rgba(0, 200, 0, 0.9);
+}
+.error-message {
+    color: #ff6b6b;
+    margin-top: 10px;
+    text-align: center;
+    display: none;
 }
+/* 歡迎訊息樣式 */
+.welcome-content {
+    max-width: 600px;
+    text-align: center;
 }
+#welcome-message {
+    margin: 20px 0;
+    line-height: 1.8;
+    font-size: 1.1rem;
 }
+#welcome-message p {
+    margin-bottom: 15px;
 }
+#welcome-message .highlight {
+    color: #ffcc00;
+    font-weight: bold;
+    font-size: 1.3rem;
+    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
 }