源码系统概览
文章正文
这套源码属于英语课堂互动类的网页小游戏合集，主打把单元词表变成可以直接玩的背单词练习。
整个包里是 5 个互相独立的 HTML 单页文件，不需要服务器环境，双击或拖进浏览器就能跑起来。
老师做课件、学生自己练词，或者前端新手想看纯原生 JS 怎么写小游戏，都可以拿它当参考。
源码简介
这是一份免费的英语单词记忆小游戏网页源码，适合下载后本地打开学习、改词表和做二次开发参考。
压缩包内共 5 个 HTML 游戏，分别是单词弹射射击、全分节双人对战、单词泡泡龙、单词匹配和钓鱼识单词。
配套教材分两套，Unit 7 Role models of our time 对应沪教版七年级下册，Unit 3 The world of science 与 Unit 4 Amazing Art 对应外研版（2019）高中英语必修第三册。
每个游戏的样式、脚本和词库全部写在同一个 HTML 文件里，没有后端接口，也没有数据库依赖。
词表以 JS 数组形式硬编码，格式形如 en 与 zh 两个字段的对象，比如 compass 对应指南针、罗盘，换成自己单元的单词即可复用。
适用场景
- 英语老师做单元词汇复习课件，用小游戏替代单纯的朗读记忆环节
- 学生课后自测单词拼写与中英匹配，家长在电脑或平板上陪练
- 前端初学者研究 Canvas 动画、碰撞判定和纯原生 JS 小游戏的写法
功能亮点
- 单词弹射射击：Canvas 绘制场景，WORDS 数组提供中英词对，答对累加 score，答错扣减 hp
- 全分节双人对战：左右两位玩家各有独立的 score 与 correct 计数，每题 10 秒倒计时，按 Starting out、Understanding ideas 等分节出题
- 单词语音朗读：双人对战页调用浏览器 speechSynthesis 接口读出单词，不依赖任何外部语音服务
- 单词泡泡龙与钓鱼识单词：均为 Canvas 场景，viewport 已设置 user-scalable=no，手机与触摸屏也能操作
- 单词匹配：纯 DOM 元素实现，靠 Tailwind 工具类排版，是五个页面里改动成本最低的一个
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：原生 HTML5 加 CSS3 加原生 JavaScript，无框架、无打包构建工具。 | 依具体方案选型，需自行搭建与维护 |
| 部署方式 | 1. 解压后按目录进入对应单元文件夹，每个文件夹内是一个 HTML 游戏加一份使用说明文本。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 单词弹射射击：Canvas 绘制场景，WORDS 数组提供中英词对，答对累加 score，答错扣减 hp 全分节双 |
功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：原生 HTML5 加 CSS3 加原生 JavaScript，无框架、无打包构建工具。
渲染方式：四个游戏使用 Canvas 2D 绘制动画，单词匹配游戏使用纯 DOM 元素。
样式依赖：单词泡泡龙与单词匹配两页通过 cdn.tailwindcss.com 引入 Tailwind，其余页面为内联 CSS。
后端与数据库：无，全部为静态单页，词库直接写在页面脚本里。
运行环境：Chrome、Edge 等现代浏览器即可，语音朗读需要浏览器支持 SpeechSynthesis 接口。
安装与部署提示
1. 解压后按目录进入对应单元文件夹，每个文件夹内是一个 HTML 游戏加一份使用说明文本。
2. 直接双击 HTML 或把文件拖进浏览器窗口即可运行，不需要 Apache、Nginx 或 PHP 环境。
3. 想放到内网或校园网共享时，把文件夹整体丢进任意静态目录，用 http 方式访问即可。
4. 换词表时用编辑器打开 HTML，搜索 WORDS、vocabulary 或 words 变量，按原有字段格式替换内容后保存。
截图与演示说明
下面几张图取自实际运行界面，可以先看清楚每个游戏的玩法再决定要不要下载。
单词泡泡龙页面：顶部给出当前需要匹配的词义，下方是漂浮的英文泡泡，点中正确目标才计分。
单词匹配游戏页面：中英词条分列两侧，配对成功即消除，这一页是纯 DOM 实现，改词表最方便。
钓鱼识单词页面：Canvas 海面场景，鱼身上带着英文单词，按提示钓中对应的鱼完成一轮作答。
另外两页单词弹射射击和全分节双人对战未附截图，本地打开 HTML 即可看到，双人对战页面能看到左右两侧的比分板与倒计时条。
常见问题
问：断网环境下能正常运行吗？
答：钓鱼识单词、单词弹射射击、全分节双人对战三页是内联样式，断网可以照常运行。
单词泡泡龙与单词匹配两页引用了 Tailwind 的 CDN 脚本，断网时布局会散掉。
需要完全离线使用时，把 Tailwind 脚本下载到本地目录，再把页面里的引用改成相对路径即可。
问：怎么把游戏换成自己班级的单元词表？
答：用文本编辑器打开对应 HTML，定位 WORDS、vocabulary 或 words 这类数组变量。
数组里每一项都是英文和中文两个字段组成的对象，照着原格式增删条目，不要改动数组名与字段名。
改完保存并刷新浏览器就能看到效果，不需要重新编译或打包。
安全风险提示
本源码为纯静态 HTML 单页，未见服务端脚本、上传接口或数据库连接代码。
路径：单词泡泡龙与单词匹配两个 HTML；类型：第三方 CDN 外链；证据：页面通过 cdn.tailwindcss.com 加载样式脚本；建议：教室内网或离线场景改为本地引用，避免外链失效或被劫持。
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
游戏内的单词与中文释义取自教材单元词表，如果要用于课堂教学以外的公开发布或商业出版，请自行核实教材内容的版权归属。
