原生JS模块化复刻植物大战僵尸：网格系统与事件总线实战-北京尧图网络

1. 项目缘起与整体设计思路1.1 为什么选择用原生三件套复刻经典塔防用纯前端技术栈复刻《植物大战僵尸》这件事我在不同阶段做过三次。第一次用 Canvas 硬画第二次用 DOM 拼格子第三次才沉淀出一套自己觉得比较顺手的模块化方案。之所以反复折腾是因为这个题材几乎覆盖了前端小游戏开发的所有核心考点网格坐标系统、帧循环、碰撞检测、资源调度、状态机、事件总线一个都不少。而它又足够有趣做出来能直接跑给朋友看比写一堆 TODO List 有成就感得多。所谓“模块生成”核心思路是把整个游戏拆成若干个职责单一的模块每个模块只暴露必要的接口模块之间通过一个轻量的事件总线通信。这样做的好处是你改僵尸的移动逻辑不会牵连到阳光的收集逻辑你想把豌豆射手换成寒冰射手只需要新增一个植物配置对象而不是去改渲染层。我见过太多新手把整个游戏写在一个game.js里写到两千行之后自己都不敢动一改就崩。模块化不是为了炫技是为了让你在第三天还愿意继续维护这个项目。技术选型上我坚持用HTML CSS JavaScript原生三件套不引入任何游戏引擎。原因有三第一这个游戏的逻辑复杂度完全在原生能力范围内引入 Phaser 或 Cocos 属于杀鸡用牛刀还会带来额外的学习成本和打包体积第二原生写一遍你对帧循环、渲染时机、内存回收的理解会深刻得多这些是引擎帮你藏起来的东西第三交付物就是一个index.html加几个.js文件双击就能跑发给别人不需要装任何环境。对于想通过一个项目打通前端基础的人来说这是性价比最高的路径。1.2 模块划分与目录结构设计我把整个项目拆成七个核心模块每个模块对应一个文件放在js/目录下。这个划分不是拍脑袋定的而是按照“数据与表现分离、逻辑与渲染分离”的原则反复调整后的结果。pvz/ ├── index.html // 入口只负责挂载 canvas 和引入脚本 ├── css/ │ └── style.css // 页面布局、UI 样式、动画 ├── js/ │ ├── config.js // 全局配置网格尺寸、植物/僵尸属性表 │ ├── bus.js // 事件总线模块间通信的唯一通道 │ ├── resource.js // 资源加载器统一管理图片和音效 │ ├── grid.js // 网格系统负责坐标换算和占位管理 │ ├── plant.js // 植物模块创建、攻击、生产、销毁 │ ├── zombie.js // 僵尸模块生成、移动、啃食、死亡 │ ├── bullet.js // 子弹模块飞行、命中判定 │ ├── sun.js // 阳光模块掉落、收集、计数 │ └── main.js // 主循环串联所有模块这里有个关键决策为什么用事件总线而不是直接函数调用假设僵尸啃食植物如果僵尸模块直接调用plant.hurt()那么僵尸模块就依赖了植物模块两者耦合。而用事件总线僵尸只需要bus.emit(zombie:bite, {row, col, damage})植物模块自己监听这个事件并处理。将来如果我想加一个“被啃食时播放音效”的功能只需要再写一个监听器完全不用动僵尸模块的代码。这就是解耦的价值也是模块化真正的意义所在。注意事件总线要避免滥用。我的经验是只有跨模块的通信才走总线模块内部的函数调用直接写就行。如果连一个模块内部的两个函数都用事件通信那代码会变得极难追踪调试时你根本不知道是谁触发了谁。1.3 网格系统整个游戏的坐标系基石《植物大战僵尸》本质是一个 5 行 9 列的网格游戏。所有实体的位置都可以用(row, col)表示而不是像素坐标。这个抽象极其重要它让“这格有没有植物”“僵尸走到第几列了”“子弹打中了哪一行”这些问题变成了简单的数组查表。我定义的网格参数是这样的每个格子宽 80px、高 100px网格区域从画布的(250, 80)位置开始。为什么是 250因为左侧要留出植物卡片的 UI 区域。这些数字全部写在config.js里任何模块需要坐标换算都从这里取绝不硬编码。// config.js 片段 export const GRID { rows: 5, cols: 9, cellW: 80, cellH: 100, originX: 250, originY: 80 }; // 网格坐标转像素坐标取格子中心 export function cellToPixel(row, col) { return { x: GRID.originX col * GRID.cellW GRID.cellW / 2, y: GRID.originY row * GRID.cellH GRID.cellH / 2 }; } // 像素坐标转网格坐标用于鼠标点击判断 export function pixelToCell(x, y) { const col Math.floor((x - GRID.originX) / GRID.cellW); const row Math.floor((y - GRID.originY) / GRID.cellH); if (row 0 || row GRID.rows || col 0 || col GRID.cols) return null; return { row, col }; }这两个换算函数是整个项目用得最频繁的工具。你可能会问为什么不直接用像素坐标做碰撞检测因为像素级的 AABB 碰撞在这个游戏里是浪费——僵尸和植物永远在格子里用格子坐标判断“是否同一格”比算矩形相交快得多也准得多。实测下来用格子坐标做逻辑判断用像素坐标做渲染这个分工是最清晰的。2. 核心模块的细节拆解与实操要点2.1 主循环requestAnimationFrame 的正确打开方式游戏的心脏是主循环。我用requestAnimationFrame而不是setInterval原因很实在setInterval在标签页切到后台时依然会跑回来时可能一次性补执行几十次导致游戏“瞬移”而rAF会自动暂停切回来时时间差虽然大但我用时间增量deltaTime做了补偿逻辑不会乱。主循环的结构是这样的每一帧先算出距离上一帧过了多少毫秒然后把这个时间传给所有需要更新的模块。注意所有移动速度、冷却时间都以“每秒”为单位定义乘以deltaTime / 1000才是这一帧实际应该移动的距离。这样无论你的显示器是 60Hz 还是 144Hz僵尸的移动速度都是一样的。// main.js 核心循环 let lastTime 0; function loop(timestamp) { const deltaTime timestamp - lastTime; lastTime timestamp; // 限制单帧最大时间防止切后台回来时逻辑爆炸 const dt Math.min(deltaTime, 50); update(dt); render(); requestAnimationFrame(loop); } function update(dt) { zombieModule.update(dt); plantModule.update(dt); bulletModule.update(dt); sunModule.update(dt); }实操心得Math.min(deltaTime, 50)这一行是我踩坑之后加的。有一次测试时切到别的标签页聊了五分钟切回来瞬间所有僵尸直接冲到了最左边游戏直接结束。原因是那五分钟被当成了一帧deltaTime是三十万毫秒。限制单帧最大 50ms 之后即使卡顿游戏也只是变慢而不会逻辑崩溃。2.2 植物模块用配置表驱动而不是写一堆 if-else新手最容易犯的错是给每种植物写一个类然后在攻击逻辑里写if (type peashooter) {...} else if (type sunflower) {...}。这样写加一种植物就要改三处代码迟早出错。我的做法是数据驱动所有植物的属性写在一张配置表里行为用“能力标签”描述模块根据标签决定挂载哪些行为。// config.js 中的植物配置表 export const PLANTS { sunflower: { name: 向日葵, cost: 50, hp: 300, cooldown: 7.5, abilities: [produce], produce: { interval: 24, type: sun } }, peashooter: { name: 豌豆射手, cost: 100, hp: 300, cooldown: 7.5, abilities: [shoot], shoot: { interval: 1.4, damage: 20, bulletSpeed: 300 } }, wallnut: { name: 坚果墙, cost: 50, hp: 4000, cooldown: 30, abilities: [] } };植物模块在创建时读取配置如果abilities里有shoot就给它挂一个射击计时器有produce就挂一个生产计时器。这样加一种新植物只需要在配置表里加一条代码一行不用改。这就是配置驱动的威力。关于射击的判定有个细节值得说豌豆射手只攻击同一行且在它右侧的僵尸。所以每次射击前要遍历该行所有僵尸找出zombie.x plant.x且最近的也就是 x 最小的那个作为目标。如果找不到目标就不射击避免浪费子弹。function findTarget(plant) { const targets zombieModule.getByRow(plant.row) .filter(z z.x plant.x z.alive); if (targets.length 0) return null; // 取最靠左的僵尸 return targets.reduce((a, b) a.x b.x ? a : b); }2.3 僵尸模块状态机让行为清晰可控僵尸的行为比植物复杂它要走路、要啃植物、要死。如果用一堆布尔变量isWalking、isEating、isDying来管理很快就会乱套。我用的是有限状态机每个僵尸同一时刻只处于一个状态状态之间的切换有明确条件。僵尸的状态有四个walking行走、eating啃食、dying死亡动画、dead已移除。切换规则很简单行走时如果前方格子有植物切到啃食啃食时如果植物没了切回行走血量归零切到死亡。// zombie.js 状态更新片段 update(dt) { switch (this.state) { case walking: this.x - this.speed * dt / 1000; const plant grid.getPlantAt(this.row, this.getCol()); if (plant) { this.state eating; this.eatTarget plant; this.eatTimer 0; } if (this.x GRID.originX) bus.emit(game:lose); break; case eating: this.eatTimer dt; if (this.eatTimer 1000) { // 每秒啃一口 this.eatTimer 0; bus.emit(zombie:bite, { plant: this.eatTarget, damage: this.damage }); } if (!this.eatTarget.alive) this.state walking; break; case dying: this.deathTimer dt; if (this.deathTimer 800) this.state dead; break; } }这里有个坐标换算的坑要提醒僵尸的x是像素坐标但判断“前方有没有植物”需要转成格子坐标。我一开始忘了转直接用x去查网格结果僵尸在格子中间时查不到植物走到格子边缘才突然开始啃视觉上很别扭。正确做法是用僵尸的“嘴部位置”通常是x减去一点偏移去换算格子。2.4 阳光模块掉落、点击与自动收集阳光是游戏的经济系统它的逻辑看似简单但细节不少。阳光有两种来源向日葵生产、天空随机掉落。两者都表现为一个从上方缓缓落到某个 y 坐标后停住的图标玩家点击后飞向左上角的计数器。阳光的点击判定我用的是圆形碰撞因为阳光图标是圆的用矩形判定会有“明明没点到却算点中”的错觉。判定逻辑是鼠标点击位置到阳光中心的距离小于半径就算命中。function onCanvasClick(e) { const rect canvas.getBoundingClientRect(); const mx e.clientX - rect.left; const my e.clientY - rect.top; for (const sun of sunModule.list) { const dx mx - sun.x; const dy my - sun.y; if (dx * dx dy * dy sun.radius * sun.radius) { sun.collect(); // 触发飞向计数器的动画 return; } } }注意阳光的“飞向计数器”动画不要用 CSS transition 直接改left/top那样会触发大量重排。我的做法是把阳光元素设为position: absolute并用transform: translate()做动画性能好很多。实测在低端机上用 transform 能稳定 60 帧用 left/top 会掉到 40 帧左右。阳光还有一个容易被忽略的点自动收集的时机。原版游戏里阳光落地后一段时间不点会消失。我加了一个 8 秒的存活计时超时后阳光淡出。这个计时器要在阳光落地后才启动而不是一生成就启动否则玩家还没看到就没了。3. 完整实操流程与关键环节实现3.1 从零搭建HTML 骨架与画布初始化第一步是把页面骨架搭起来。index.html要足够干净只做三件事引入样式、放置画布、按顺序引入脚本。注意脚本的顺序很重要config.js和bus.js必须最先加载因为它们被其他模块依赖。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title植物大战僵尸 - 原生JS复刻/title link relstylesheet hrefcss/style.css /head body div idgame-container canvas idgame-canvas width1000 height600/canvas div idui-layer div idsun-counter50/div div idplant-cards/div /div /div script srcjs/config.js/script script srcjs/bus.js/script script srcjs/resource.js/script script srcjs/grid.js/script script srcjs/plant.js/script script srcjs/zombie.js/script script srcjs/bullet.js/script script srcjs/sun.js/script script srcjs/main.js/script /body /html画布尺寸我定为 1000×600这个比例在大多数屏幕上都能完整显示不需要滚动。如果你想让游戏自适应可以用 CSS 的max-width: 100%配合height: auto但要注意鼠标坐标换算时要用getBoundingClientRect()拿到实际显示尺寸再按比例缩放否则点击位置会偏。3.2 资源加载等所有图片就绪再开局游戏用到的图片有植物、僵尸、子弹、阳光、背景等。如果不等加载完就开始渲染会出现“白块”或者报错。我写了一个简单的资源加载器用Promise.all等所有图片的onload完成后再启动主循环。// resource.js const images {}; const sources { background: assets/bg.jpg, sunflower: assets/sunflower.png, peashooter: assets/peashooter.png, wallnut: assets/wallnut.png, zombie: assets/zombie.png, pea: assets/pea.png, sun: assets/sun.png }; export function loadAll() { const tasks Object.entries(sources).map(([key, src]) { return new Promise((resolve, reject) { const img new Image(); img.onload () { images[key] img; resolve(); }; img.onerror () reject(new Error(加载失败: ${src})); img.src src; }); }); return Promise.all(tasks); } export function getImage(key) { return images[key]; }实操心得图片加载失败一定要有明确的报错而不是静默失败。我有一次把文件名写错了结果游戏跑起来背景是黑的排查了半小时才发现是路径问题。加上onerror之后控制台直接告诉你哪个文件没找到省事很多。3.3 种植流程从点击卡片到落地生根种植的完整流程是这样的玩家点击植物卡片卡片进入“选中”状态鼠标移动时有一个半透明的植物跟着走点击网格中的空格子如果阳光足够且该格没有植物就扣除阳光、创建植物、取消选中状态。这里的关键是选中状态的管理。我用一个全局变量selectedPlantType记录当前选中的植物类型null表示没有选中。鼠标移动时如果selectedPlantType不为空就在鼠标位置画一个半透明的植物预览。点击时先判断是否在网格内、格子是否为空、阳光是否足够三个条件都满足才种植。canvas.addEventListener(mousemove, (e) { if (!selectedPlantType) return; const rect canvas.getBoundingClientRect(); const cell pixelToCell(e.clientX - rect.left, e.clientY - rect.top); previewCell cell; // 用于渲染预览 }); canvas.addEventListener(click, (e) { if (!selectedPlantType) return; const rect canvas.getBoundingClientRect(); const cell pixelToCell(e.clientX - rect.left, e.clientY - rect.top); if (!cell) return; const config PLANTS[selectedPlantType]; if (sunCount config.cost) { bus.emit(ui:toast, 阳光不足); return; } if (grid.isOccupied(cell.row, cell.col)) { bus.emit(ui:toast, 这里已经有植物了); return; } sunCount - config.cost; plantModule.create(selectedPlantType, cell.row, cell.col); selectedPlantType null; });阳光不足和格子被占用的提示我用的是事件总线发一个ui:toast事件UI 层监听后弹一个短暂的提示条。这样种植逻辑不需要知道 UI 长什么样职责清晰。3.4 僵尸生成与波次控制僵尸不能一窝蜂全出来要有节奏。我设计了一个简单的波次系统每一波定义僵尸数量、类型、生成间隔。波与波之间有休息时间让玩家喘口气。const WAVES [ { zombies: 5, interval: 3000, types: [normal] }, { zombies: 10, interval: 2500, types: [normal, normal, cone] }, { zombies: 15, interval: 2000, types: [normal, cone, bucket] }, // ... ];生成逻辑是当前波次开始后每隔interval毫秒生成一个僵尸随机选择一行0-4从画布右侧外生成。当这一波的僵尸全部生成完毕等待一段时间进入下一波。这里有个细节不要等僵尸全部死光才进下一波否则玩家清完场会干等。我的做法是“生成完毕即计时”给玩家一个固定的准备时间。僵尸类型通过配置表区分比如普通僵尸血量 200、速度 20px/s路障僵尸血量 560、速度一样铁桶僵尸血量 1300。这些数值参考原版做了简化但比例关系保持住了玩起来手感接近。4. 常见问题与排查技巧实录4.1 点击位置偏移坐标换算的经典坑这是新手遇到最多的一个问题明明点在格子上植物却种到了隔壁。原因通常是画布被 CSS 缩放了但代码里用的是画布的原始尺寸做换算。比如画布width1000但 CSS 里写了width: 80%实际显示只有 800px那么鼠标的clientX是相对 800px 的直接拿去换算就会偏。解决办法是拿到画布的实际显示尺寸和原始尺寸的比例做一次缩放function getCanvasPos(e) { const rect canvas.getBoundingClientRect(); const scaleX canvas.width / rect.width; const scaleY canvas.height / rect.height; return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; }这个函数我封装成了一个工具所有需要鼠标坐标的地方都调它再也没出现过偏移问题。4.2 僵尸重叠同格多僵尸的处理当多个僵尸走到同一格时它们会叠在一起看起来像一个僵尸。原版游戏里僵尸是可以重叠的但视觉上会稍微错开。我的处理是给每个僵尸一个随机的y偏移±10px这样即使在同一行看起来也是前后错落的不会完全重合。另外判断“僵尸是否到达植物位置”时不能只看格子坐标因为僵尸的x是连续的。我的做法是僵尸的“嘴部”位置x - 20落在某个格子里且该格有植物就开始啃。这样僵尸走到植物跟前才会停而不是一进格子就停。4.3 内存泄漏及时移除死亡实体游戏跑久了会卡十有八九是死亡实体没清理。僵尸死亡后如果只是标记alive false但不从数组里移除数组会越来越大每帧遍历的开销也越来越大。我的做法是在每帧更新后统一过滤掉已死亡的实体。function cleanup() { zombieModule.list zombieModule.list.filter(z z.state ! dead); bulletModule.list bulletModule.list.filter(b b.alive); sunModule.list sunModule.list.filter(s !s.collected); }注意过滤数组会创建新数组每帧都做会有 GC 压力。更好的做法是原地删除用splice倒序遍历但对于这个体量的游戏过滤的开销可以忽略。如果你要扩展到几百个实体建议改成对象池复用。4.4 常见问题速查表问题现象可能原因排查方向解决方法点击种植位置偏移画布被 CSS 缩放检查getBoundingClientRect与canvas.width比例用缩放系数换算坐标僵尸瞬移切后台后 deltaTime 过大打印每帧 deltaTime限制单帧最大 50ms游戏越玩越卡死亡实体未清理打印各模块数组长度每帧过滤死亡实体豌豆不打僵尸目标查找条件错误检查z.x plant.x和行匹配确认同行且右侧阳光点不中碰撞判定用矩形检查点击坐标与阳光中心距离改用圆形距离判定图片不显示路径错误或未加载完看控制台 404 和加载顺序用 Promise.all 等待加载植物卡片点不了阳光不足或冷却中检查阳光数和冷却计时加 UI 反馈提示4.5 性能优化的几个实用技巧第一离屏渲染静态背景。背景图每帧都画一次是浪费因为背景永远不变。我的做法是把背景画到一个离屏 canvas 上每帧直接drawImage那个离屏 canvas省去重复解码。第二减少状态切换。Canvas 的fillStyle、font等属性切换有开销尽量把相同状态的绘制放在一起。第三用requestAnimationFrame而不是setTimeout这个前面说过了不再赘述。实测下来这套优化做完在五年前的笔记本上也能稳定 60 帧僵尸数量到 50 个也不掉帧。对于一个小游戏来说这个性能完全够用了。5. 模块化带来的扩展可能性5.1 加一种新植物需要改什么假设你想加一个“寒冰射手”攻击时减速僵尸。在模块化架构下你只需要做三件事在config.js的PLANTS里加一条配置abilities写[shoot, slow]在plant.js的射击逻辑里判断如果有slow标签就给子弹加一个slowEffect属性在zombie.js被子弹命中时如果子弹有slowEffect就给僵尸加一个减速状态。三处改动互不干扰十分钟搞定。这就是模块化的价值改动是局部的影响是可预测的。你不会因为加一个植物而把整个游戏搞崩。5.2 从单机到可配置把参数抽离成 JSON如果你想让非程序员也能调整游戏平衡性可以把config.js里的配置表抽成一个独立的config.json用fetch加载。这样策划改数值不用碰代码改完刷新页面就生效。我做过一个版本把植物和僵尸的所有数值都放在 JSON 里调平衡的时候非常爽改一个数字就能感受到游戏难度的变化。5.3 移动端适配的注意事项如果想让游戏在手机上玩有几个点要注意。第一触摸事件要用touchstart而不是click因为click在移动端有 300ms 延迟。第二画布要按屏幕宽度等比缩放用transform: scale()或者直接设置 canvas 的 CSS 尺寸。第三点击判定区域要适当放大手指比鼠标粗太小的目标点不中。第四阳光的自动收集在移动端可以做得更激进一些因为手指操作不如鼠标精准。我在手机上测试时发现把阳光的点击半径从 25px 放大到 35px收集成功率明显提升。这种细节只有真正在目标设备上玩过才知道。5.4 音效与反馈让游戏“活”起来最后说一个容易被忽略但很重要的点反馈。种植时的一个“噗”声、僵尸被击中时的“啪”声、阳光收集时的“叮”声这些音效让游戏从“能玩”变成“好玩”。我用的是Audio对象池预加载几个音效播放时从池里取一个播完放回。这样避免了每次播放都创建新对象导致的内存抖动。视觉反馈同样重要。僵尸被击中时闪一下白、植物被啃时抖动一下、阳光收集时飞向计数器这些微小的动画让玩家清楚地知道“我的操作生效了”。游戏开发里有一句话没有反馈的操作等于没有操作。这句话我深有体会。这个项目我从第一次动手到最终稳定版本断断续续花了大概两周的业余时间。踩过的坑主要集中在坐标换算、状态管理和性能优化上这些在上面都写到了。如果你也想动手做一个我的建议是先让一个豌豆射手能打一个僵尸跑通了再往上加功能。不要一上来就想着做完整版那样很容易在第三天就放弃。先跑通最小闭环再逐步扩展这是做任何项目都适用的节奏。

原生JS模块化复刻植物大战僵尸：网格系统与事件总线实战

相关推荐

东莞装饰网站建设新手入门：3步搞定域名与服务器避坑

做网站公司晨旭东方避坑指南：网站被黑挂马后的7天自救实战

企业网站seo排名优化哪家好？5步实操避坑指南

更多资讯

TypeScript 在 AI 开发领域相对于 Python 的优势分析：用 TaoToken 统一 Key 打通 TS 工具链

degit 3.x 演进全解析：从 tarball 默认下载到安全加固的完整版本路线图

一文搞懂wordpress地址设置方法，3步搞定不踩坑

网站后台如何取消验证码登陆速查手册

新手入门辽宁专业网站建设大全，避开高价坑只需这3点

贡献 Strands 文档站：Astro/Starlight 文档站点的开发、写作与提交流程实战指南

今日更新

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本周精选

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？