File size: 7,838 Bytes
ab5909a | 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 159 160 161 162 163 164 165 | <!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>
<!-- 游戏UI覆盖层 -->
<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>
|