文件 HTML。 HTML 制作提示词：小学三年级语文互动闯关游戏《成语小勇士·闯关大挑战》 请生成一个可直接运行的 单文件 HTML 互动闯关游戏，用于参加 2026年桂林市数字校园应用场景创新比赛“人工智能赋能教学资源创作赛道”互动类教学资源。作品名称：《成语小勇士·闯关大挑战》。适用对象：小学三年级学生。主题：智教·慧学·新生态。要求原创、社会主义核心价值观、无知识产权纠纷、无外部依赖、纯前端运行。 一、技术硬性要求 单文件 HTML：所有 CSS、JavaScript 全部内嵌，不引用任何外部 CSS、JS、图片、音频、字体、CDN。 纯前端：双击 HTML 即可在浏览器运行，可离线使用，兼容 Chrome、Edge、Firefox、Safari。 无外部资源：图片、图标用 Emoji、CSS 绘制或内联 SVG；音效用 Web Audio API 生成；动画用 CSS/JS 实现。 响应式：适配电脑、平板、手机、教室大屏。最小宽度 320px，最大内容宽度 1200px，居中显示。 代码结构清晰：题库集中在顶部 QUESTION_BANK，方便老师后续修改；关键逻辑写注释。 可提交比赛材料：页面内可展示作品名称、适用学段、学科、团队信息占位，方便录制介绍视频和填写设计说明文档。 二、游戏名称与整体风格 游戏名：《成语小勇士·闯关大挑战》 副标题：小学三年级语文互动闯关 视觉风格：卡通、明亮、闯关冒险风。主色：蓝紫色 + 金色 + 草绿色；背景可用 CSS 渐变和云朵、星星、城堡、卷轴元素。 角色：成语小勇士，可用 Emoji 🧒⚔️ 或 CSS 绘制。 关卡地图：4 个关卡节点，通关后点亮星星，未解锁显示锁。 字体：系统字体优先，如 "Microsoft YaHei", "PingFang SC", sans-serif。 按钮：大圆角、明显阴影、适合小学生点击，支持鼠标和触摸。 反馈：正确显示绿色 + 星星 + 鼓励语；错误显示红色 + 轻微抖动 + 鼓励语。 三、游戏流程 1. 开始页 显示游戏标题、简介、适用年级、玩法说明。 输入框：学生姓名或昵称（用于通关证书，可默认“成语小勇士”）。 按钮：“开始闯关”。 显示比赛信息占位：学科：语文；学段：小学三年级；类型：互动类教学资源。 2. 关卡地图页 显示 4 个关卡： 第1关：看拼音写词语 第2关：成语接龙 第3关：火眼金睛 第4关：终极BOSS 每关显示状态：未解锁、可挑战、已通关、星星数量。 第1关默认解锁，通关后解锁下一关。 可点击已解锁关卡重新挑战。 3. 答题页 顶部显示：当前关卡、题号进度、答对数量、错误次数、退出/返回按钮。 中间显示题干、拼音/成语/句子、选项按钮。 底部显示：进度点（5 个题位）、当前得分、提示按钮（可选）。 支持键盘：1/2/3/4 选择选项，Enter 提交/下一题。 每题选择后立即判定，不能重复点击。 4. 关卡结算页 显示本关答对题数、错误次数、是否过关。 过关：显示“通关成功”，播放通关音效，获得星星，解锁下一关。 未过关：显示“再试一次”，可重新挑战本关。 连续 3 次未通过同一关，弹出提示卡。 5. 全部通关证书页 4 关全部通过后，弹出或跳转证书页。 证书内容： 标题：成语小勇士·闯关大挑战 通关证书 学生姓名 完成关卡：4/4 获得星星：X/12 或 X/20 颁发日期：自动获取当天日期 颁发单位：成语小勇士挑战营 印章风格：CSS 圆形印章“优秀” 鼓励语：如“你已成功闯过成语王国四大关卡，真棒！” 按钮：“下载证书图片”和“打印证书”。 下载证书用 Canvas 绘制并导出 PNG；打印用 window.print()，打印样式只显示证书。 四、核心规则 共 4 关，每关 5 题。 每关题库至少 8 题，存放在 JS 数组中，抽题不重复。 每关从题库随机抽取 5 题，同一轮内不重复。 每题答对计 1 分。 答对 ≥ 4 题可进入下一关。 关内答错：立即从同关题库中随机换一道未出现过的题，替换当前题，让玩家继续作答当前题位；同时错误次数 +1。 若同一关错误次数达到 2 次，本关直接失败，进入结算页。 未通过可点击“重新挑战本关”。 连续 3 次未通过同一关，弹出提示卡。 提示卡按关卡定制： 第1关：注意拼音声调、前后鼻音、平翘舌。 第2关：先想成语意思，再判断最后一个字。 第3关：注意形近字、同音字，逐个排除。 第4关：把成语放进句子里读一读，看是否通顺。 提示卡按钮：“我明白了，再试一次”。点击后关闭弹窗，允许重挑战。 全部通关后弹出证书。 进度可用 localStorage 保存，刷新不丢失；提供“重置进度”按钮。 五、防重复抽题算法要求 每关维护： QUESTION_BANK.levelX：该关完整题库，至少 8 题。 pool：未使用题目索引数组。 used：本轮已使用题目 ID 集合。 currentQuestion：当前题。 wrongCount：本关错误次数。 correctCount：本关答对题数。 failedCounts：每关连续失败次数。 抽题逻辑： 从 pool 随机选一题，移入 used。 答错换题时，从 pool 中再随机选一题，排除当前题和已用题。 若 pool 为空，则重置 pool，但排除当前题，避免连续重复。 每关至少 8 题，保证 5 题 + 换题时不重复。 选项每次显示时可随机打乱，但答案用文本匹配，不依赖索引。 六、题库数据结构 请在 JS 顶部定义： js const QUESTION_BANK = { level1: [ { id: "L1-01", type: "choice", prompt: "看拼音写词语：qīng chén", options: ["清晨", "轻尘", "青辰", "清臣"], answer: "清晨" } ], level2: [], level3: [], level4: [] }; 要求： 每关至少 8 题。 题型以选择题为主，方便三年级学生操作。 选项 4 个，答案唯一。 题干简洁，字号大。 所有题目需符合小学三年级语文水平，无知识性错误。 七、题库内容建议 第1关：看拼音写词语（课内生字） 至少 8 题，示例： qīng chén → 清晨 róng qiú → 绒球 huāng yě → 荒野 tiào wǔ → 跳舞 kuáng huān → 狂欢 gōng kè → 功课 fàng jià → 放假 hù xiāng → 互相 kuáng fēng bào yǔ → 狂风暴雨 chéng qún jié duì → 成群结队 xiān yàn → 鲜艳 fú zhuāng → 服装 干扰项可用同音字、形近字，如“清晨/轻尘/青辰/清臣”。 第2关：成语接龙（给前半填后半） 至少 8 题，示例： 一鸣惊（ ）→ 人 画蛇添（ ）→ 足 亡羊补（ ）→ 牢 守株待（ ）→ 兔 掩耳盗（ ）→ 铃 井底之（ ）→ 蛙 狐假虎（ ）→ 威 对牛弹（ ）→ 琴 杯弓蛇（ ）→ 影 刻舟求（ ）→ 剑 滥竽充（ ）→ 数 自相矛（ ）→ 盾 第3关：火眼金睛（找成语错别字） 至少 8 题，示例： 下列成语中，有错别字的是？选项：一丝不苟、画蛇添足、亡羊补牢、守珠待兔 → 答案：守珠待兔 选项：掩耳盗铃、井底之娃、狐假虎威、对牛弹琴 → 答案：井底之娃 选项：杯弓蛇影、刻舟求剑、滥竽充数、自相矛顿 → 答案：自相矛顿 选项：画龙点睛、滥鱼充数、亡羊补牢、守株待兔 → 答案：滥鱼充数 选项：刻舟求箭、杯弓蛇影、掩耳盗铃、画蛇添足 → 答案：刻舟求箭 选项：亡羊补劳、狐假虎威、对牛弹琴、井底之蛙 → 答案：亡羊补劳 选项：掩耳盗玲、自相矛盾、滥竽充数、守株待兔 → 答案：掩耳盗玲 选项：对牛谈琴、画蛇添足、亡羊补牢、杯弓蛇影 → 答案：对牛谈琴 第4关：终极BOSS（综合填空） 至少 8 题，示例： 我们做事情要脚踏实地，不能（ ），指望不劳而获。选项：守株待兔、亡羊补牢、画蛇添足、掩耳盗铃 → 答案：守株待兔 他说话前后不一，真是（ ）。选项：自相矛盾、滥竽充数、井底之蛙、对牛弹琴 → 答案：自相矛盾 学习上不能（ ），要真正掌握知识。选项：滥竽充数、亡羊补牢、画蛇添足、狐假虎威 → 答案：滥竽充数 遇到危险，他吓得（ ），自己吓自己。选项：杯弓蛇影、守株待兔、刻舟求剑、一鸣惊人 → 答案：杯弓蛇影 老师告诉我们，不要（ ），做了错事要勇于承认。选项：掩耳盗铃、画蛇添足、亡羊补牢、对牛弹琴 → 答案：掩耳盗铃 只要及时发现并补救，就还不算晚，这叫（ ）。选项：亡羊补牢、守株待兔、井底之蛙、狐假虎威 → 答案：亡羊补牢 他（ ），不知道事物已经变化，结果白费力气。选项：刻舟求剑、画蛇添足、一鸣惊人、滥竽充数 → 答案：刻舟求剑 我们不要（ ），说话要看对象。选项：对牛弹琴、杯弓蛇影、自相矛盾、守株待兔 → 答案：对牛弹琴 他见识短浅，像（ ）一样，不知道外面世界多大。选项：井底之蛙、狐假虎威、亡羊补牢、画蛇添足 → 答案：井底之蛙 他借着别人的威风吓唬人，真是（ ）。选项：狐假虎威、掩耳盗铃、刻舟求剑、滥竽充数 → 答案：狐假虎威 八、页面组件与交互细节 开始页：标题、姓名输入、开始按钮、玩法说明、比赛信息占位。 关卡地图：4 个卡片，显示关卡名、状态、星星。点击可挑战。 答题页： 题干区：大字号，拼音可加声调。 选项区：4 个大按钮，A/B/C/D 或 1/2/3/4。 反馈区：正确/错误提示、正确答案、鼓励语。 进度区：5 个圆点，答对绿色，答错红色，当前题高亮。 结算页：本关结果、答对题数、错误次数、星星、按钮“再试一次”或“下一关”。 提示卡弹窗：连续 3 次失败后出现，带关卡专属提示。 证书页：Canvas 绘制，可下载 PNG，可打印。 音效： 正确：上行三音。 错误：下行两音。 通关：欢快小旋律。 使用 Web Audio API，不加载外部音频。 动画： 卡片滑入。 正确选项弹跳。 错误选项抖动。 星星飞出。 证书撒花可用 CSS 粒子。 九、比赛适配提醒 本作品属于“人工智能赋能教学资源创作赛道”互动类教学资源。 建议在制作过程中录制 AI 辅助生成题库、代码、界面、动画的过程，作为“AI 部分生成过程录屏”参赛材料。 页面内可预留“作品简介、使用 AI 工具、技术要点”折叠面板，方便填写附件 3 设计说明文档。 所有成语、拼音、词语需人工核对，确保无知识性错误。 不出现商业广告、外部链接、版权图片、版权音乐。 十、输出要求 请直接输出完整 HTML 代码，不要省略。要求：单文件，内嵌 CSS/JS。 题库 QUESTION_BANK 每关至少 8 题。 实现开始页、关卡地图、答题页、结算页、提示卡、证书页。 实现防重复抽题、答错换题、答对≥4过关、连续3次失败提示。 界面美观、适合小学三年级、可课堂大屏展示。 代码注释清晰，方便修改题库和文字。 不引用任何外部资源。 选"教育产品/交互设计"类目润色。