我从零做了一个「植物大战僵尸」识字课堂游戏

一、一个让全班沸腾的课堂游戏

植物大战僵尸版答题游戏，孩子们把答案块拖上跑道就能打僵尸，特别适合课堂互动。于是我用一个单文件 HTML 网页做了一个——双击就能玩、离线可用、题库随便换。本文记录整个制作过程，附成品效果截图，喜欢动手的老师可以照着做。

成品信息：一个 HTML 文件（约 700KB，图片素材已全部内嵌），内置 32 道一年级语文题（拼音选字、反义词、加一笔），题库可在界面里随时编辑。

二、成品效果

游戏开始界面，介绍了连击、樱桃炸弹、橄榄球僵尸等玩法：

开始界面

战斗画面：僵尸头顶是题目（拼音或提示），把底部托盘里正确的字块拖进虚线答案槽，植物就会开火：

战斗画面

僵尸走到植物面前会停下来「咔嚓咔嚓」啃食，植物被啃 4 口就没了，僵尸长驱直入——答题就是植物的生命线：

僵尸啃食植物

内置的题库编辑器，老师不用碰代码就能增删改题目：

题库编辑器

用灵犀的创作过程

三、玩法规则

1. 屏幕分 4 条跑道，僵尸从右侧马路走进来，头顶带着题目（如 mā、“大”加一笔、“上”的反义词）；

2. 从底部木托盘把正确的字块拖进该跑道的答案槽 → 植物立刻开火消灭僵尸；

3. 连续答对有连击加分（+12、+14……封顶 +20），答错连击清零、该僵尸加速；

4. 每消灭 5 只僵尸奖励一颗樱桃炸弹，危急时刻一键清屏；

5. 第 3 波起出现路障僵尸（打 2 次）、第 5 波起铁桶僵尸（打 3 次）；第 2 波起随机出现橄榄球僵尸（更快更硬，额外 +25 分）；

6. 得 50 分全体植物火力升级 +2 发弹、150 分再 +4 发；

7. 僵尸走进房子扣一颗 ❤，共 3 颗，扣完结束结算得分。

在灵犀的赋能下给与课堂更多的活力，让孩子真正实现做中学。

四、制作过程分步拆解

第 1 步：确定技术形式

教室大屏场景要求：双击打开、离线可用、无需安装。所以选择单文件 HTML + 原生 JS，不用任何框架和构建工具，所有图片素材转 base64 内嵌进文件，拷到教室电脑只带一个文件。

第 2 步：搭建界面骨架

页面从上到下三段：天空（标题区）、草坪（跑道区）、木托盘（答案块区）。跑道用 CSS 渐变条纹画出来，答案槽是虚线框。背景直接采用原版游戏白天草坪场景图（房子、小推车、道路），僵尸正好从右边的马路走进来，代入感强。

第 3 步：原版形象素材

植物（豌豆射手、双发射手、寒冰射手）和僵尸（普通、路障、铁桶）都用搜索到的原版游戏透明 PNG 立绘，用 PIL 压缩后转 base64 内嵌。僵尸用 CSS 动画加走路摇摆，啃食时前倾。寒冰射手直接用豌豆射手图加 CSS 滤镜 hue-rotate 变蓝，零成本多一个种类。

第 4 步：核心答题逻辑

• 每波随机抽 4 道题，僵尸头顶挂题签；

• 托盘放 4 个正确答案字 + 若干干扰字（去重、打乱）；

• 拖拽用 Pointer 事件实现（鼠标、触屏通吃），松手时判断落点：拖对 → 开火消灭；拖错 → 字块弹回、僵尸加速；

• 托盘永远保证当前题目所需答案字存在，不足自动补。

第 5 步：让僵尸动起来（一个重要的坑）

最初用 setInterval(50ms) 每次移动固定距离，测试时发现浏览器把后台标签页的定时器节流到 1 秒，僵尸走得断断续续。改成按真实时间差（dt）折算移动量后，前后台速度一致。教室大屏是前台，问题不大，但这个坑值得记下来。

第 6 步：趣味系统层层叠加

• 连击加分：答对不间断就涨连击，鼓励稳扎稳打；

• 樱桃炸弹：每灭 5 只送一颗，点击全屏震动 + 连环爆炸清屏；

• 火力升级：50 分/150 分两档，全体植物多发弹，配合路障/铁桶僵尸的血量设计，升级从「好看」变成「必需」；

• 随机植物 + 啃食：每波每条跑道随机刷新植物种类，僵尸到植物面前停下啃食（650ms 一口、4 口啃光），被啃光就长驱直入；

• 音效与背景音乐：全部用 Web Audio 现场合成（8-bit 风格旋律 + 贝斯 + 节拍、开火音、爆炸音、啃咬音），不依赖任何音频文件，也没有版权问题。

第 7 步：题库编辑器

界面内点「📝 题库」打开编辑器：每行一题（题目 / 答案 / 干扰字），支持增删改、保存生效（存浏览器本地）、导出/导入题库文件（跨电脑拷贝）、一键恢复内置默认题。其他科目的老师也能直接换成自己的题。

第 8 步：浏览器实测验证

每加一个机制都在浏览器里自动化实测：答对/答错判分、整波通关、连击计分、樱桃清屏、啃食扣血、编辑器保存。过程中真实抓到并修掉了三个 bug：重开一局定时器重复创建、多只僵尸同时进屋血量减成负数、樱桃清屏触发重复刷波。结论：自动化验证不是可选项，是必需项。

五、给想复刻的老师的建议

1. 题目一定做成数据数组，和游戏逻辑分离，改题不改代码；

2. 移动类动画用「时间差」而不是「每帧固定距离」，后台节流不掉链子；

3. 图片素材全部内嵌 base64，交付就是一个文件；

4. 音效宁可用 Web Audio 合成，也别引入音频文件和版权风险；

5. 每个新机制做完立即在浏览器里自动化验证一遍，bug 都是在验证里抓出来的。

有问题欢迎在帖子下面交流！

免责声明：本游戏所有的素材均为AI生成或网络素材，如果雷同或侵权，请联系作者删除，作者个人或者团体不承担任何责任。请知悉。