| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MagicPot - 魔法锅游戏</title> |
| <link rel="stylesheet" href="css/style.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet"> |
| </head> |
| <body> |
| <div class="game-container"> |
| |
| <header class="game-header"> |
| <h1 class="game-title">🪄 MagicPot 魔法锅 ✨</h1> |
| <div class="header-controls"> |
| <button class="audio-button" id="audioButton" title="音效开关">🔊</button> |
| <button class="help-button" id="helpButton" title="语音命令帮助">❓</button> |
| <div class="voice-status" id="voiceStatus"> |
| <span class="status-text">准备中...</span> |
| <div class="mic-icon">🎤</div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="game-main"> |
| <canvas id="gameCanvas" width="800" height="600"></canvas> |
| |
| |
| <div class="game-ui"> |
| |
| <div class="pot-status" id="potStatus"> |
| <div class="status-indicator inactive">魔法锅休眠中</div> |
| </div> |
|
|
| |
| <div class="cooking-info" id="cookingInfo" style="display: none;"> |
| <div class="cooking-food"> |
| <span>正在烹饪：</span> |
| <span id="currentFood">-</span> |
| </div> |
| <div class="cooking-progress"> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="progressFill"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="food-counter" id="foodCounter" style="display: none;"> |
| <div class="counter-item"> |
| <span class="food-emoji" id="foodEmoji">🍎</span> |
| <span class="count" id="foodCount">0</span> |
| </div> |
| </div> |
|
|
| |
| <div class="performance-monitor" id="performanceMonitor" style="display: none;"> |
| <div class="perf-item"> |
| <span class="perf-label">粒子:</span> |
| <span class="perf-value" id="particleCount">0</span> |
| </div> |
| <div class="perf-item"> |
| <span class="perf-label">动物:</span> |
| <span class="perf-value" id="animalCount">0</span> |
| </div> |
| <div class="perf-item"> |
| <span class="perf-label">FPS:</span> |
| <span class="perf-value" id="fpsCount">60</span> |
| </div> |
| </div> |
|
|
| |
| <div class="audio-activation-hint" id="audioActivationHint" style="display: none;"> |
| <div class="hint-bubble"> |
| <div class="hint-icon">🔊</div> |
| <div class="hint-text">点击任意位置启动音效</div> |
| </div> |
| </div> |
|
|
| |
| <div class="voice-input-display" id="voiceInputDisplay" style="display: none;"> |
| <div class="speech-bubble"> |
| <div class="speech-text" id="speechText">正在听取...</div> |
| <div class="speech-confidence" id="speechConfidence"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="voice-hints" id="voiceHints"> |
| <div class="hint-item"> |
| <span class="hint-command">"cook cook cook pot"</span> |
| <span class="hint-desc">激活魔法锅</span> |
| </div> |
| <div class="hint-item" style="display: none;" id="foodHint"> |
| <span class="hint-command">说出食物名称</span> |
| <span class="hint-desc">开始烹饪</span> |
| </div> |
| <div class="hint-item" style="display: none;" id="stopHint"> |
| <span class="hint-command">"stop stop stop pot"</span> |
| <span class="hint-desc">停止烹饪</span> |
| </div> |
| </div> |
|
|
| |
| <div class="keyboard-input-panel" id="keyboardInputPanel"> |
| <div class="input-header"> |
| <h4>🎮 键盘调试输入</h4> |
| <button class="toggle-panel-btn" id="toggleKeyboardPanel" title="切换键盘输入面板">⌨️</button> |
| </div> |
| <div class="input-content" id="keyboardInputContent"> |
| <div class="input-group"> |
| <input type="text" |
| id="commandInput" |
| class="command-input" |
| placeholder="输入指令，如：cook cook cook pot" |
| autocomplete="off"> |
| <button class="send-btn" id="sendCommandBtn">发送</button> |
| </div> |
| |
| <div class="quick-commands"> |
| <h5>快捷指令：</h5> |
| <div class="command-buttons"> |
| <button class="quick-cmd" data-command="cook cook cook pot">激活魔法锅</button> |
| <button class="quick-cmd" data-command="stop stop stop pot">停止烹饪</button> |
| <button class="quick-cmd" data-command="apple">苹果</button> |
| <button class="quick-cmd" data-command="banana">香蕉</button> |
| <button class="quick-cmd" data-command="pizza">披萨</button> |
| <button class="quick-cmd" data-command="cake">蛋糕</button> |
| </div> |
| </div> |
| |
| <div class="command-history"> |
| <h5>命令历史：</h5> |
| <div class="history-list" id="commandHistory"></div> |
| </div> |
| |
| |
| <div class="keyboard-shortcuts-hint"> |
| 快捷键: F9(激活显示) | F8(显示/隐藏) | 1-6(快速命令) | 可拖拽标题栏 |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div class="debug-info" id="debugInfo" style="display: none;"> |
| <h3>调试信息</h3> |
| <div id="debugLog"></div> |
| </div> |
| </div> |
|
|
| |
| <script src="js/audio.js"></script> |
| <script src="js/voice.js"></script> |
| <script src="js/keyboard.js"></script> |
| <script src="js/particles.js"></script> |
| <script src="js/animals.js"></script> |
| <script src="js/pot.js"></script> |
| <script src="js/textToImage.js"></script> |
| <script src="js/main.js"></script> |
| </body> |
| </html> |
|
|
