Upload 7 files

.gitattributes

@@ -34,3 +34,5 @@ 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
 king.jpg filter=lfs diff=lfs merge=lfs -text
+images/king.jpg filter=lfs diff=lfs merge=lfs -text
+images/Loss.jpg filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,95 @@
+---
+title: 雞排怪挑戰遊戲
+emoji: 🍗
+colorFrom: red
+colorTo: yellow
+sdk: static
+pinned: false
+license: mit
+---
+
+# 雞排怪挑戰遊戲
+
+一個基於學生成績的互動式挑戰遊戲！輸入你的出生年月日+座號，挑戰強大的雞排怪！
+
+## 🎮 遊戲特色
+
+- **個人化體驗**：根據學生資料生成專屬挑戰
+- **多科目戰鬥**：國文、英文、數學、自然、社會科全面挑戰
+- **複雜戰鬥系統**：包含裝備加成、等級加成、套裝加成
+- **成績比較功能**：與歷史成績對比並提供學習建議
+- **聖物補刀系統**：最後的逆轉機會
+- **響應式設計**：支援手機、平板、桌面等各種裝置
+
+## 🎯 如何遊玩
+
+1. **登入**：輸入你的出生年月日+座號（例如：100090601）
+2. **查看資料**：確認你的學生資料和裝備加成
+3. **開始戰鬥**：依序輸入各科目分數進行攻擊
+4. **科目攻擊**：
+   - 國文攻擊：攻擊力 × 5
+   - 英文攻擊：攻擊力 × 3  
+   - 數學攻擊：攻擊力 × 4
+   - 自然攻擊：攻擊力 × 3
+   - 社會攻擊：攻擊力 × 3（需輸入歷史、地理、公民三科）
+5. **聖物補刀**：如果血量不足，可使用聖物進行最後攻擊
+6. **查看結果**：獲得詳細的成績分析和學習建議
+
+## ⚔️ 戰鬥機制
+
+### 攻擊力計算公式
+```
+攻擊力 = (分數 + 套裝加成 + 等級加成) × 裝備加成 × 科目倍率
+```
+
+### 科目倍率
+- 國文：× 5（最高倍率）
+- 數學：× 4
+- 英文：× 3
+- 自然：× 3
+- 社會：× 3
+
+### 特殊機制
+- **社會科攻擊**：需要輸入歷史、地理、公民三科分數，取平均值計算
+- **聖物系統**：每個聖物造成 20 點固定傷害
+- **裝備加成**：根據學生資料提供不同的科目加成倍率
+
+## 🎨 技術特色
+
+- **純前端實作**：HTML + CSS + JavaScript
+- **內嵌資料系統**：學生資料以 Base64 編碼嵌入
+- **響應式設計**：支援各種螢幕尺寸
+- **音效控制**：完整的音效管理系統（可開關）
+- **動態視覺效果**：血量條、攻擊描述、狀態變化
+
+## 📱 裝置支援
+
+- ✅ 桌面電腦（Chrome、Firefox、Safari、Edge）
+- ✅ 平板電腦（iPad、Android 平板）
+- ✅ 智慧型手機（iOS、Android）
+- ✅ 觸控操作友善
+
+## 🎵 音效說明
+
+遊戲包含背景音樂和音效系統：
+- 背景音樂：Cjbeards - Fire and Thunder
+- 音樂提供：J&B 無版權音樂庫
+- 可透過右下角按鈕控制音樂開關
+
+## 🔒 隱私說明
+
+- 本遊戲僅使用學號作為識別，不收集個人敏感資訊
+- 所有資料處理均在本地進行，不會上傳到伺服器
+- 建議不要在公共電腦上輸入真實學號
+
+## 🎓 教育價值
+
+- **學習動機**：透過遊戲化提升學習興趣
+- **成績分析**：提供詳細的學習建議
+- **多元評量**：涵蓋各主要學科領域
+- **自我挑戰**：鼓勵持續進步和自我超越
+
+---
+
+*這是一個教育娛樂用途的遊戲，旨在透過有趣的方式激發學習動機。請理性看待遊戲結果，專注於真實的學習成長。*
+

attack_descriptions.js

@@ -0,0 +1,205 @@
+// 攻擊描述資料庫 - 完整版本
+const attackDescriptions = {
+    // 國文攻擊描述
+    chinese: {
+        thresholds: [0.15, 0.08], // 強力攻擊閾值：15%以上，中等攻擊：8%以上
+        strong: [
+            "📚 文字的力量如詩如畫！古典文學爆發驚人威力，詩詞歌賦化作利劍直刺雞排怪心臟！",
+            "✍️ 修辭技巧形成強大攻擊！比喻擬人如雷電交加，文學底蘊震撼全場！",
+            "🎭 國學底蘊展現深厚功力！四書五經的智慧凝聚成無堅不摧的文字風暴！",
+            "📖 千年文化傳承爆發！從詩經到現代文學，文字的魅力摧枯拉朽！",
+            "🖋️ 筆墨紙硯化作神兵利器！書法的韻律與文學的美感完美融合！"
+        ],
+        medium: [
+            "📝 語文能力發揮穩定效果！閱讀理解與寫作技巧並重，文字攻擊命中目標！",
+            "📄 作文技巧形成有效攻擊！起承轉合的結構展現文學素養！",
+            "✏️ 語言表達展現實力！詞彙運用恰到好處，語法結構清晰有力！",
+            "📚 文學知識穩定輸出！從古典到現代，文學史的脈絡清晰可見！",
+            "🎨 文字藝術展現美感！修辭手法運用得當，語言文字生動有趣！"
+        ],
+        weak: [
+            "📄 文學攻擊略顯不足...字詞運用需要加強，多閱讀經典作品吧！",
+            "🤷 語文基礎有待提升...句型結構稍顯混亂，需要多練習寫作！",
+            "😐 國文攻擊力有限...古文理解需要努力，建議多背誦經典篇章！",
+            "📝 文字表達能力待加強...詞彙量需要擴充，多讀書多寫作！",
+            "🤔 語言運用不夠靈活...修辭技巧需要練習，文學素養有待提升！"
+        ]
+    },
+    
+    // 英文攻擊描述
+    english: {
+        thresholds: [0.12, 0.06],
+        strong: [
+            "🌟 English power strikes like lightning! Grammar mastery unleashed with devastating force!",
+            "🚀 Vocabulary explosion creates massive damage! Ten thousand words become weapons of mass instruction!",
+            "⭐ Perfect pronunciation forms devastating attack! Fluency dominates the battlefield with eloquence!",
+            "💫 Advanced grammar structures demolish the enemy! Complex sentences weave a web of linguistic destruction!",
+            "🎯 Idioms and phrases rain down like arrows! Native-level expression overwhelms all opposition!"
+        ],
+        medium: [
+            "📘 英語能力發揮穩定效果！單字記憶與文法概念並重，語言攻擊命中目標！",
+            "🗣️ 聽說讀寫技能均衡發展！英語溝通能力展現實力！",
+            "📚 英文基礎紮實穩固！文法概念清晰，單字運用得當！",
+            "🎧 語言技能穩定輸出！聽力理解與口語表達相得益彰！",
+            "📖 閱讀理解能力良好！英文文章的脈絡掌握得宜！"
+        ],
+        weak: [
+            "📝 英文攻擊力道不足...單字量需要擴充，多背誦常用詞彙！",
+            "🤔 語法概念有些混亂...時態變化需要練習，建議多做文法練習！",
+            "😅 英語表達略顯生澀...口語能力待加強，多聽多說很重要！",
+            "📚 英文基礎需要鞏固...從基本文法開始，循序漸進學習！",
+            "🙄 語言運用不夠流暢...需要多接觸英語環境，培養語感！"
+        ]
+    },
+    
+    // 數學攻擊描述
+    math: {
+        thresholds: [0.18, 0.10],
+        strong: [
+            "🔥 數學公式如雷電般劈向雞排怪！微積分的威力無人能擋，極限與導數交織成毀滅之網！",
+            "⚡ 幾何定理爆發出驚人能量！三角函數與解析幾何完美結合，數學之美震撼全場！",
+            "💥 代數方程式形成強大攻擊波！複數與矩陣的力量超越想像！",
+            "🌌 數學邏輯展現絕對真理！從基礎運算到高等數學，理性思維無堅不摧！",
+            "🧮 數字的奧秘完全展現！統計機率與數學分析融為一體，精確計算摧毀一切！"
+        ],
+        medium: [
+            "📊 數學運算穩定發揮！代數與幾何並重，邏輯思維清晰有序！",
+            "📐 計算能力展現實力！基礎運算與進階概念相輔相成！",
+            "🔢 數學概念理解良好！從算術到代數，數學基礎紮實穩固！",
+            "📈 數學思維邏輯清晰！問題解決能力與計算技巧並重！",
+            "🎯 數學應用能力不錯！理論與實際相結合，數學素養展現！"
+        ],
+        weak: [
+            "📝 數字攻擊略有成效...基礎運算需要加強，多練習計算題！",
+            "🤔 數學概念有些模糊...公式記憶需要複習，理解比背誦更重要！",
+            "😅 數學攻擊���道不足...邏輯思維需要訓練，多做推理題目！",
+            "📚 數學基礎待鞏固...從基本概念開始，循序漸進學習！",
+            "🙄 計算能力需要提升...細心與耐心同樣重要，避免粗心錯誤！"
+        ]
+    },
+    
+    // 自然科學攻擊描述
+    science: {
+        thresholds: [0.12, 0.06],
+        strong: [
+            "🔬 科學知識爆發驚人威力！實驗精神與理論基礎完美結合，科學真理震撼全場！",
+            "⚗️ 化學反應形成強大攻擊！元素週期表的奧秘與分子結構的美妙交織成毀滅之力！",
+            "🌌 物理定律展現深奧力量！從牛頓力學到量子物理，宇宙法則無所不能！",
+            "🧬 生物科學展現生命奧秘！DNA的雙螺旋結構與進化論的智慧融為一體！",
+            "🌍 地球科學揭示自然威力！板塊運動與氣候變化的力量超越想像！"
+        ],
+        medium: [
+            "🧪 自然科學穩定發揮！觀察實驗與理論學習並重，科學素養展現！",
+            "🔍 科學方法運用得當！假設驗證與數據分析相輔相成！",
+            "📊 實驗技能展現實力！從觀察到結論，科學思維邏輯清晰！",
+            "🌿 自然現象理解良好！生物多樣性與生態平衡概念清楚！",
+            "⚛️ 科學概念掌握不錯！物理化學基礎知識紮實穩固！"
+        ],
+        weak: [
+            "🤓 科學攻擊需要加強...實驗技巧有待提升，多動手做實驗！",
+            "😵 理論概念稍顯模糊...科學原理需要複習，理解比記憶重要！",
+            "🙄 自然科學力道不足...觀察能力待加強，培養科學好奇心！",
+            "📚 科學基礎需要鞏固...從基本概念開始，建立完整知識體系！",
+            "🤔 科學思維待培養...邏輯推理與批判思考同樣重要！"
+        ]
+    },
+    
+    // 社會科學攻擊描述
+    social: {
+        thresholds: [0.10, 0.05],
+        strong: [
+            "🏛️ 社會科學知識重擊敵人！歷史智慧與地理知識完美融合，人文素養威力無窮！",
+            "🗺️ 地理知識爆發強大能量！從地形氣候到人文地理，空間概念震撼全場！",
+            "⚖️ 公民意識形成正義攻擊！民主法治與人權觀念凝聚成不可撼動的力量！",
+            "📜 歷史智慧穿越時空！從古代文明到現代社會，歷史脈絡清晰可見！",
+            "🌍 全球視野展現格局！國際關係與文化交流的深度理解超越想像！"
+        ],
+        medium: [
+            "📚 社會科學穩定發揮！歷史地理與公民知識並重，人文素養展現！",
+            "🏛️ 人文關懷展現實力！社會議題與公民責任意識清晰！",
+            "🌍 地理概念掌握良好！空間分布與區域特色理解得當！",
+            "📜 歷史脈絡理解不錯！時代背景與因果關係掌握得宜！",
+            "⚖️ 公民素養展現水準！民主參與與法治觀念具備！"
+        ],
+        weak: [
+            "📚 社會科攻擊力有限...歷史脈絡需要梳理，多讀史書增廣見聞！",
+            "🤷 地理概念稍顯模糊...空間認知待加強，多看地圖培養方向感！",
+            "😐 人文素養有待提升...社會議題需要關注，培養公民意識！",
+            "📖 社會科學基礎待鞏固...從基本概念開始，建立完整知識架構！",
+            "🤔 批判思考能力需要培養...多元觀點與獨立思考同樣重要！"
+        ]
+    }
+};
+
+// 隨機獲取攻擊描述的函數
+function getRandomAttackDescription(subject, attackPower, totalHP) {
+    // 將科目名稱對應到描述資料庫的鍵值
+    const subjectMap = {
+        '國文': 'chinese',
+        '英文': 'english', 
+        '數學': 'math',
+        '自科': 'science',
+        '社會': 'social'
+    };
+    
+    const mappedSubject = subjectMap[subject];
+    if (!mappedSubject || !attackDescriptions[mappedSubject]) {
+        return null;
+    }
+    
+    const subjectData = attackDescriptions[mappedSubject];
+    const ratio = attackPower / totalHP;
+    
+    let descriptions;
+    if (ratio >= subjectData.thresholds[0]) {
+        descriptions = subjectData.strong;
+    } else if (ratio >= subjectData.thresholds[1]) {
+        descriptions = subjectData.medium;
+    } else {
+        descriptions = subjectData.weak;
+    }
+    
+    // 隨機選擇一個描述
+    const randomIndex = Math.floor(Math.random() * descriptions.length);
+    return descriptions[randomIndex];
+}
+
+// 獲取攻擊強度等級的函數
+function getAttackLevel(subject, attackPower, totalHP) {
+    const subjectMap = {
+        '國文': 'chinese',
+        '英文': 'english',
+        '數學': 'math', 
+        '自科': 'science',
+        '社會': 'social'
+    };
+    
+    const mappedSubject = subjectMap[subject];
+    if (!mappedSubject || !attackDescriptions[mappedSubject]) {
+        return 'weak';
+    }
+    
+    const subjectData = attackDescriptions[mappedSubject];
+    const ratio = attackPower / totalHP;
+    
+    if (ratio >= subjectData.thresholds[0]) {
+        return 'strong';
+    } else if (ratio >= subjectData.thresholds[1]) {
+        return 'medium';
+    } else {
+        return 'weak';
+    }
+}
+
+// 獲取所有科目的攻擊閾值資訊
+function getAttackThresholds() {
+    const thresholds = {};
+    for (const [subject, data] of Object.entries(attackDescriptions)) {
+        thresholds[subject] = {
+            strong: data.thresholds[0],
+            medium: data.thresholds[1]
+        };
+    }
+    return thresholds;
+}
+

audio_controller.js

@@ -0,0 +1,228 @@
+// 音效控制器 - 完整版本
+const audioController = {
+    bgm: null,
+    attackSounds: {},
+    resultSounds: {},
+    isBGMPlaying: false,
+    isInitialized: false,
+    
+    // 初始化音效控制器
+    init() {
+        if (this.isInitialized) return;
+        
+        console.log('音效控制器初始化中...');
+        
+        // 初始化背景音樂
+        // 注意：由於版權考量，這裡不包含實際的音樂檔案
+        // 如果要添加背景音樂，請取消註解以下代碼並提供音樂檔案
+        /*
+        try {
+            this.bgm = new Audio('audio/background.mp3');
+            this.bgm.loop = true;
+            this.bgm.volume = 0.3;
+            this.bgm.preload = 'auto';
+        } catch (error) {
+            console.log('背景音樂載入失敗:', error);
+        }
+        */
+        
+        // 初始化攻擊音效
+        // 同樣由於版權考量，這裡不包含實際的音效檔案
+        /*
+        try {
+            this.attackSounds = {
+                weak: new Audio('audio/attack_weak.mp3'),
+                medium: new Audio('audio/attack_medium.mp3'),
+                strong: new Audio('audio/attack_strong.mp3')
+            };
+            
+            // 設置攻擊音效音量
+            Object.values(this.attackSounds).forEach(sound => {
+                sound.volume = 0.5;
+                sound.preload = 'auto';
+            });
+        } catch (error) {
+            console.log('攻擊音效載入失敗:', error);
+        }
+        */
+        
+        // 初始化結果音效
+        /*
+        try {
+            this.resultSounds = {
+                win: new Audio('audio/victory.mp3'),
+                lose: new Audio('audio/defeat.mp3')
+            };
+            
+            // 設置結果音效音量
+            Object.values(this.resultSounds).forEach(sound => {
+                sound.volume = 0.6;
+                sound.preload = 'auto';
+            });
+        } catch (error) {
+            console.log('結果音效載入失敗:', error);
+        }
+        */
+        
+        this.isInitialized = true;
+        console.log('音效控制器初始化完成');
+    },
+    
+    // 播放背景音樂
+    playBGM() {
+        if (!this.bgm) {
+            console.log('背景音樂未載入');
+            return;
+        }
+        
+        try {
+            const playPromise = this.bgm.play();
+            if (playPromise !== undefined) {
+                playPromise.then(() => {
+                    this.isBGMPlaying = true;
+                    console.log('背景音樂開始播放');
+                }).catch(error => {
+                    console.log('背景音樂播放失敗:', error);
+                    // 瀏覽器可能阻止自動播放，這是正常的
+                });
+            }
+        } catch (error) {
+            console.log('背景音樂播放錯誤:', error);
+        }
+    },
+    
+    // 暫停背景音樂
+    pauseBGM() {
+        if (this.bgm && this.isBGMPlaying) {
+            this.bgm.pause();
+            this.isBGMPlaying = false;
+            console.log('背景音樂已暫停');
+        }
+    },
+    
+    // 切換背景音樂
+    toggleBGM() {
+        if (!this.bgm) {
+            console.log('背景音樂功能暫時不可用');
+            return;
+        }
+        
+        if (this.isBGMPlaying) {
+            this.pauseBGM();
+        } else {
+            this.playBGM();
+        }
+    },
+    
+    // 播放攻擊音效
+    playAttackSound(type = 'medium') {
+        if (!this.attackSounds[type]) {
+            console.log(`攻擊音效 ${type} 未載入`);
+            return;
+        }
+        
+        try {
+            // 重置音效到開始位置
+            this.attackSounds[type].currentTime = 0;
+            const playPromise = this.attackSounds[type].play();
+            
+            if (playPromise !== undefined) {
+                playPromise.then(() => {
+                    console.log(`播放 ${type} 攻擊音效`);
+                }).catch(error => {
+                    console.log(`${type} 攻擊音效播放失敗:`, error);
+                });
+            }
+        } catch (error) {
+            console.log(`${type} 攻擊音效播放錯誤:`, error);
+        }
+    },
+    
+    // 播放結果音效
+    playResultSound(type = 'win') {
+        if (!this.resultSounds[type]) {
+            console.log(`結果音效 ${type} 未載入`);
+            return;
+        }
+        
+        try {
+            // 重置音效到開始位置
+            this.resultSounds[type].currentTime = 0;
+            const playPromise = this.resultSounds[type].play();
+            
+            if (playPromise !== undefined) {
+                playPromise.then(() => {
+                    console.log(`播放 ${type} 結果音效`);
+                }).catch(error => {
+                    console.log(`${type} 結果音效播放失敗:`, error);
+                });
+            }
+        } catch (error) {
+            console.log(`${type} 結果音效播放錯誤:`, error);
+        }
+    },
+    
+    // 停止所有音效
+    stopAll() {
+        // 停止背景音樂
+        if (this.bgm) {
+            this.bgm.pause();
+            this.bgm.currentTime = 0;
+            this.isBGMPlaying = false;
+        }
+        
+        // 停止攻擊音效
+        Object.values(this.attackSounds).forEach(sound => {
+            if (sound) {
+                sound.pause();
+                sound.currentTime = 0;
+            }
+        });
+        
+        // 停止結果音效
+        Object.values(this.resultSounds).forEach(sound => {
+            if (sound) {
+                sound.pause();
+                sound.currentTime = 0;
+            }
+        });
+        
+        console.log('所有音效已停止');
+    },
+    
+    // 設置音量
+    setVolume(bgmVolume = 0.3, effectVolume = 0.5) {
+        if (this.bgm) {
+            this.bgm.volume = Math.max(0, Math.min(1, bgmVolume));
+        }
+        
+        Object.values(this.attackSounds).forEach(sound => {
+            if (sound) {
+                sound.volume = Math.max(0, Math.min(1, effectVolume));
+            }
+        });
+        
+        Object.values(this.resultSounds).forEach(sound => {
+            if (sound) {
+                sound.volume = Math.max(0, Math.min(1, effectVolume));
+            }
+        });
+        
+        console.log(`音量設置 - 背景音樂: ${bgmVolume}, 音效: ${effectVolume}`);
+    },
+    
+    // 檢查音效支援
+    checkAudioSupport() {
+        const audio = new Audio();
+        const support = {
+            mp3: audio.canPlayType('audio/mpeg') !== '',
+            ogg: audio.canPlayType('audio/ogg') !== '',
+            wav: audio.canPlayType('audio/wav') !== '',
+            m4a: audio.canPlayType('audio/mp4') !== ''
+        };
+        
+        console.log('音效格式支援:', support);
+        return support;
+    }
+};
+

images/README.md

@@ -0,0 +1,47 @@
+# 圖片資源說明
+
+## 📁 圖片檔案
+
+### king.jpg
+- **描述**：雞排怪的正常狀態圖片
+- **用途**：在戰鬥開始、聖物使用階段顯示
+- **來源**：CG Cookie - The Chicken Monster
+- **尺寸**：1280x1280 像素
+- **格式**：PNG（重新命名為 .jpg）
+
+### Loss.jpg  
+- **描述**：雞排怪被擊敗後的狀態圖片
+- **用途**：當雞排怪血量歸零時顯示
+- **來源**：CleanPNG - Crying Cartoon Chicken
+- **尺寸**：900x900 像素
+- **格式**：WebP（重新命名為 .jpg）
+
+## 🎨 圖片特色
+
+- **風格一致**：都是卡通風格的雞肉角色
+- **表情豐富**：正常狀態威猛，失敗狀態可憐
+- **高解析度**：適合在各種螢幕尺寸下顯示
+- **透明背景**：部分圖片支援透明背景
+
+## 📝 版權說明
+
+- 圖片來源於公開的圖庫網站
+- 用於教育和非商業用途
+- 如有版權疑慮，可替換為自製圖片
+
+## 🔄 替換建議
+
+如果需要替換圖片，建議：
+
+1. **保持尺寸比例**：建議使用正方形或接近正方形的圖片
+2. **風格一致**：選擇卡通或遊戲風格的圖片
+3. **表情對比**：king.jpg 應該看起來強大，Loss.jpg 應該看起來被擊敗
+4. **檔案大小**：建議每張圖片不超過 500KB
+
+## 🛠️ 技術規格
+
+- **支援格式**：JPG、PNG、WebP、GIF
+- **建議尺寸**：300x300 到 1000x1000 像素
+- **最大檔案大小**：建議不超過 1MB
+- **命名規則**：必須使用 `king.jpg` 和 `Loss.jpg`
+