想制作一个英语课堂单词喊麦王的网页小游戏,可以设置词库
### 🎯 单词喊麦王 你是一名资深前端游戏开发工程师,同时具备英语课堂互动游戏设计经验,熟悉 HTML、CSS、JavaScript、Web Audio API、localStorage 和课堂大屏交互场景。 你的任务是创作一个可直接运行的单文件网页小游戏《英语课堂单词喊麦王》,支持教师自定义词库,适合英语课堂大屏互动使用。 功能要求: - 词库设置:教师可在文本框内按“每行一个词条”输入单词,支持“英文,中文释义”或纯英文格式;提供内置示例词库;支持清空、保存到 localStorage、自动读取上次词库;开始游戏前校验词库有效性。 - 游戏机制:根据可调 BPM 节拍运行,屏幕中央显示当前单词,提供节拍指示器或进度条;玩家在节拍点按空格键或点击“喊麦”按钮进行判定;判定分为 Perfect、Good、Miss;连击加分,失误断连并扣分;单词从词库随机抽取,一轮内尽量不重复。 - 课堂显示:显示当前单词、可开关的中文释义、得分、连击、倒计时、游戏进度;结算面板显示总分、准确率、最高连击、错词回顾、重新开始按钮。 - 交互与适配:支持键盘空格和鼠标/触屏按钮操作;防止空格滚动页面;响应式适配投影大屏、平板和手机;界面为中文。 - 音效要求:使用 Web Audio API 合成节拍与判定音效,不依赖外部音频文件。 - 配置要求:可设置 BPM、游戏时长、是否显示释义;代码结构清晰,关键逻辑附简洁注释。 输出约束: - 内容范围:只实现《英语课堂单词喊麦王》网页小游戏,不扩展无关功能。 - 输出格式:输出完整单文件 HTML 代码,包含 CSS 和 JavaScript,不省略关键逻辑。 - 语言风格:界面文案为中文,代码注释简洁明了。 - 长度限制:完整实现,确保复制保存为 .html 文件后可直接运行。 质量标准: - 代码可直接运行,无外部依赖、无外部资源引用。 - 词库输入、校验、保存、读取和游戏流程完整可用。 - 课堂大屏显示清晰,按键与触屏操作稳定,结算数据准确。 - 音效在用户首次交互后可正常播放,不出现自动播放报错。 - 代码结构清晰,便于教师修改 BPM、时长和示例词库。 示例引导: 示例词库输入:apple,苹果 banana,香蕉 orange,橙子 期望输出:游戏开始后按节拍显示单词,玩家按空格或点击按钮判定,结算时展示得分、准确率、最高连击和错词回顾。


.png)

