用 SOLO 10分钟生成一份英语单词背诵、读（发音）的WEB闯关型小游戏

SOLO挑战赛专区
1

image
image1896×938 44 KB

英语单词大闯关 — 使用说明

一、简介

「英语单词大闯关」是一款面向小学生和初中生的英语单词学习 Web 小游戏。通过闯关挑战的方式，帮助学生记忆单词、练习发音、巩固词汇量。

  • 零安装：单个 HTML 文件，用浏览器打开即可使用
  • 零依赖：无需联网、无需安装任何插件
  • 多题型：5 种题型混合出题，全方位巩固记忆
  • 语音功能：自动朗读发音 + 麦克风跟读打分
  • 自定义词库：支持添加、编辑、导入、导出自定义单词

二、环境要求

项目 要求
浏览器 Chrome 60+、Edge 79+、Safari 14+（推荐 Chrome）
麦克风跟读 Chrome / Edge（Safari 部分支持）
网络 无需联网（首次加载后离线可用）
设备 电脑、平板、手机均可

提示：语音识别（跟读打分）功能在 Chrome 浏览器中支持最佳。如不可用，系统会自动降级为选择题模式。

三、快速开始

  1. 双击 word_game.html 文件，浏览器会自动打开
  2. 首页点击 :video_game: 开始游戏
  3. 在关卡选择页面点击已解锁的单元
  4. 先浏览单词学习页面，点击 :speaker_high_volume: 听发音
  5. 点击 :rocket: 开始挑战 进入答题

四、游戏玩法

4.1 关卡系统

  • 共 12 个单元，分为小学（Unit 1-6）和初中（Unit 7-12）
  • 每个单元 15 个单词，共 180 个单词
  • 第一关默认解锁，后续关卡需至少获得 1 星 才能解锁
  • 每关可重复挑战，取最高分记录

4.2 五种题型

每关随机出现 15 道题，包含以下 5 种题型：

题型 说明 分值
中译英选择题 给出中文释义，从 4 个英文单词中选出正确答案 +10 分
英译中选择题 给出英文单词，从 4 个中文释义中选出正确答案 +10 分
听音辨词 播放单词发音，从 4 个单词中选出对应的 +10 分
拼写填空 给出中文释义和音标提示，手动输入英文单词 +15 分
跟读打分 听发音后对着麦克风朗读，系统自动评分 5~15 分

4.3 跟读打分规则

识别相似度 得分 评价
≥ 80 分 +15 分 太棒了！
≥ 60 分 +10 分 不错哦！
< 60 分 +5 分 继续加油！

4.4 星级评定

完成一关后根据正确率评定星级：

正确率 星级
≥ 90% :star::star::star:
≥ 70% :star::star:
≥ 50% :star:
< 50% 未通过

4.5 时间奖励

  • 在 60 秒内完成关卡，额外获得 +20 分时间奖励

4.6 积分系统

  • 每关记录最高分，重复挑战只保留更高分数
  • 总分 = 所有关卡最高分之和
  • 积分数据自动保存在浏览器中，关闭页面不会丢失

五、界面导航

首页
 ├── 🎮 开始游戏 → 关卡选择 → 单元学习 → 答题闯关 → 结果页面
 └── 📚 单词管理 → 单元列表 → 单词编辑

5.1 首页

  • 显示当前总分
  • 开始游戏：进入关卡选择
  • 单词管理：进入词库管理（自定义单词）

5.2 关卡选择

  • 上方为小学单元（粉色标签），下方为初中单元（蓝色标签）
  • 每张卡片显示：单元编号、名称、星级、最高分
  • :locked: 表示未解锁，需通过前一关
  • 点击 :open_book: 学习 可直接进入单词预览（不开始答题）

5.3 单词学习

  • 列出当前单元所有 15 个单词
  • 每个单词显示：英文、音标、中文释义、例句
  • 点击 :speaker_high_volume: 按钮听标准发音
  • 学习完毕后点击 :rocket: 开始挑战

5.4 答题闯关

  • 顶部显示：当前题号、得分、计时
  • 进度条显示答题进度
  • 答错时会显示正确答案，2 秒后自动进入下一题
  • 点击 ← 退出 会弹出确认框（进度不保存）

5.5 结果页面

  • 显示星级、得分、用时、正确率
  • 可选择：重玩本关、选择关卡、下一关

六、单词管理（自定义词库）

6.1 进入管理

首页点击 :books: 单词管理 进入管理界面。

6.2 管理单元

操作 说明
新建单元 点击「:plus: 新建单元」，输入名称和分类
编辑单元 点击卡片上的「:pencil: 编辑」，修改名称和分类
删除单元 点击「:wastebasket:」按钮，确认后删除整个单元
进入单词列表 点击单元卡片，查看和管理该单元的单词

6.3 管理单词

操作 说明
添加单词 点击「:plus: 添加单词」，填写英文、中文、音标、例句
编辑单词 点击单词卡片，修改内容后保存
删除单词 点击单词右侧的「:wastebasket:」按钮
听发音 点击单词右侧的 :speaker_high_volume: 按钮

6.4 单词字段说明

字段 必填 说明 示例
英文单词 :white_check_mark: 英文单词 apple
中文释义 :white_check_mark: 中文翻译 苹果
音标 :cross_mark: 国际音标 /ˈæpl/
例句（英文） :cross_mark: 英文例句 I eat an apple every day.
例句翻译（中文） :cross_mark: 例句中文翻译 我每天吃一个苹果。

6.5 导出词库

点击「:outbox_tray: 导出词库」，系统会下载一个 JSON 文件。可用于：

  • 备份当前词库
  • 分享给他人使用
  • 在不同设备间迁移

6.6 导入词库

点击「:inbox_tray: 导入词库」，在文本框中粘贴 JSON 数据。JSON 格式如下：

[
  {
    "name": "我的单元",
    "category": "小学",
    "words": [
      {
        "en": "hello",
        "zh": "你好",
        "phonetic": "/həˈləʊ/",
        "ex": "Hello, world!",
        "exZh": "你好，世界！"
      },
      {
        "en": "goodbye",
        "zh": "再见",
        "phonetic": "/ɡʊdˈbaɪ/",
        "ex": "Goodbye, my friend!",
        "exZh": "再见，我的朋友！"
      }
    ]
  }
]

导入规则：

  • 导入后会替换当前所有词库
  • 每个单元必须包含 name 和 words 字段
  • 每个单词必须包含 en 和 zh 字段
  • phonetic、ex、exZh 为可选字段

6.7 恢复默认词库

点击「:counterclockwise_arrows_button: 恢复默认」，可将词库恢复为系统内置的 180 个单词（12 个单元）。注意：此操作会清除所有自定义修改和游戏进度。

七、数据存储

所有数据保存在浏览器的 localStorage 中：

数据项 说明
游戏进度 各关卡星级、最高分、总分
自定义词库 用户添加/修改的单词和单元

注意：清除浏览器缓存会导致数据丢失，建议定期使用「导出词库」功能备份。

八、常见问题

Q1：跟读打分功能无法使用？

A：跟读打分依赖浏览器的语音识别 API（Web Speech API）。请确保：

  • 使用 Chrome 或 Edge 浏览器
  • 已授权麦克风权限
  • 页面通过 HTTPS 或 localhost 访问（本地文件也可用）

如果仍不可用，系统会自动降级为选择题模式，不影响其他功能。

Q2：如何重置游戏进度？

A：进入「单词管理」→ 点击「:counterclockwise_arrows_button: 恢复默认」，词库和进度都会重置。

Q3：可以在手机上使用吗？

A：可以。游戏采用响应式设计，适配手机屏幕。建议使用 Chrome 浏览器以获得最佳体验。

Q4：导入词库后之前的进度还在吗？

A：导入词库只替换词库数据，不影响游戏进度。但如果单元数量发生变化，对应关卡的进度可能会错位。建议导入后使用「恢复默认」重置进度。

Q5：如何分享词库给同学？

A：点击「:outbox_tray: 导出词库」下载 JSON 文件，发送给同学。同学在「:inbox_tray: 导入词库」中粘贴内容即可使用。

九、内置词库一览

单元 分类 主题 单词数
Unit 1 小学 动物 15
Unit 2 小学 颜色 15
Unit 3 小学 数字 15
Unit 4 小学 家庭 15
Unit 5 小学 食物 15
Unit 6 小学 学校 15
Unit 7 初中 情感 15
Unit 8 初中 天气 15
Unit 9 初中 旅行 15
Unit 10 初中 科技 15
Unit 11 初中 环境 15
Unit 12 初中 抽象概念 15
合计 180