单词喊麦王

作者:lu
发布于:2026/10/18
0

用户输入

想制作一个英语课堂单词喊麦王的网页小游戏,可以设置词库

提示词

### 🎯 单词喊麦王

你是一名资深前端游戏开发工程师,同时具备英语课堂互动游戏设计经验,熟悉 HTML、CSS、JavaScript、Web Audio API、localStorage 和课堂大屏交互场景。

你的任务是创作一个可直接运行的单文件网页小游戏《英语课堂单词喊麦王》,支持教师自定义词库,适合英语课堂大屏互动使用。

功能要求:
- 词库设置:教师可在文本框内按“每行一个词条”输入单词,支持“英文,中文释义”或纯英文格式;提供内置示例词库;支持清空、保存到 localStorage、自动读取上次词库;开始游戏前校验词库有效性。
- 游戏机制:根据可调 BPM 节拍运行,屏幕中央显示当前单词,提供节拍指示器或进度条;玩家在节拍点按空格键或点击“喊麦”按钮进行判定;判定分为 Perfect、Good、Miss;连击加分,失误断连并扣分;单词从词库随机抽取,一轮内尽量不重复。
- 课堂显示:显示当前单词、可开关的中文释义、得分、连击、倒计时、游戏进度;结算面板显示总分、准确率、最高连击、错词回顾、重新开始按钮。
- 交互与适配:支持键盘空格和鼠标/触屏按钮操作;防止空格滚动页面;响应式适配投影大屏、平板和手机;界面为中文。
- 音效要求:使用 Web Audio API 合成节拍与判定音效,不依赖外部音频文件。
- 配置要求:可设置 BPM、游戏时长、是否显示释义;代码结构清晰,关键逻辑附简洁注释。

输出约束:
- 内容范围:只实现《英语课堂单词喊麦王》网页小游戏,不扩展无关功能。
- 输出格式:输出完整单文件 HTML 代码,包含 CSS 和 JavaScript,不省略关键逻辑。
- 语言风格:界面文案为中文,代码注释简洁明了。
- 长度限制:完整实现,确保复制保存为 .html 文件后可直接运行。

质量标准:
- 代码可直接运行,无外部依赖、无外部资源引用。
- 词库输入、校验、保存、读取和游戏流程完整可用。
- 课堂大屏显示清晰,按键与触屏操作稳定,结算数据准确。
- 音效在用户首次交互后可正常播放,不出现自动播放报错。
- 代码结构清晰,便于教师修改 BPM、时长和示例词库。

示例引导:
示例词库输入:apple,苹果
banana,香蕉
orange,橙子
期望输出:游戏开始后按节拍显示单词,玩家按空格或点击按钮判定,结算时展示得分、准确率、最高连击和错词回顾。