简介一份基于JavaScript实现的前端捕鱼达人小游戏完整源码包专为前端初学者、游戏开发爱好者及需要课堂项目练习的开发者设计。资源将HTML、CSS、JavaScript、jQuery与Bootstrap等技术融合完整呈现了动画渲染、事件交互、碰撞检测、资源加载等前端游戏开发中的关键环节同时兼顾用户体验与视觉设计适合作为学习经典小游戏实现思路的参考。压缩包共86个文件总大小仅4.41MB主要包含53张PNG格式游戏素材、13个JS逻辑脚本、10个PLIST配置文件、JSON数据文件以及HTML入口页面另有TexturePacker生成的tps源文件目录结构清晰便于按模块查看与二次开发。目前已有215人浏览学习学习者可从中拆解鱼群管理、炮台发射、金币动画等模块的具体实现理解游戏主循环与状态控制方法也可直接运行index.html快速体验完整玩法是前端动画与小游戏开发不可多得的练习素材。1. 捕鱼达人前端小游戏基于 Canvas 的动画玩法与技术解析一个捕鱼达人下载包真正值得拆解的不是玩法本身而是它背后那套纯前端动画解决方案。这个压缩包用原生 JavaScript 配合轻量级动画库完成了从鱼群随机游动到炮弹发射、渔网捕捉、金币飘分、炮台切换这一整套交互逻辑素材组织上更是把精灵图、纹理图集、动画帧配置全部拆成了可替换的独立文件。对于想理解前端小游戏怎么构建、Canvas 动画性能瓶颈出在哪、或者打算复刻一款捕鱼玩法做技术预研的人来说这份代码比任何教学 Demo 都完整得多。后面所有章节的讨论都基于一个事实这是一份不需要后端参与打开 index.html 就能让鱼游起来的纯前端项目。2. 动画素材与纹理图集R.js 与 plist 配置的加载逻辑2.1 为什么捕鱼类游戏首选精灵图集而非散图打开 images 目录不难发现资源不是一张张零散的图片而是存在多个.plist配置文件加上对应的大图文件。cannon.plist、fish-hd.plist、shark-hd.plist、game_bg_1.plist这类文件在 Cocos2d 时代就已经是标准的精灵图集配置格式前端项目直接沿用了这个规范。之所以这样做是因为捕鱼游戏里面鱼群、炮台、子弹、金币特效都需要大量帧动画如果每帧动画都发一次 HTTP 请求或者直接以单张图片形式加载浏览器纹理上传和内存占用都会快速膨胀。图集把几十张小图打包成一张大图比如fish-hd.png、shark-hd.png再用 plist 记录每张小图在大图中的位置和尺寸绘制时只需要一次性上传大图纹理之后每次 drawImage 都是同一纹理上的裁剪操作性能开销大幅下降。2.2 一个可复用的图片加载器实现项目中R.js承担了资源加载职责。虽然压缩后的代码阅读性不高但核心逻辑仍然是遍历配置、预加载图片、全部就绪后回调启动游戏。下面给出一个兼容该项目风格的资源加载器实现(function(window) { // 简单的资源加载器适用于小游戏前端的预加载场景 var RESOURCES {}; var totalCount 0; var loadedCount 0; var callbackFn null; function loadImage(key, src) { var img new Image(); img.onload function() { loadedCount; RESOURCES[key] img; if (loadedCount totalCount callbackFn) { callbackFn(RESOURCES); } }; img.onerror function() { // 单个资源失败不应阻塞整个游戏启动打印错误即可 console.error([R.js] resource load failed:, src); loadedCount; if (loadedCount totalCount callbackFn) { callbackFn(RESOURCES); } }; img.src src; RESOURCES[key] img; } function load(config, callback) { RESOURCES {}; loadedCount 0; totalCount 0; callbackFn callback; for (var key in config) { if (config.hasOwnProperty(key)) { totalCount; } } for (var key in config) { if (config.hasOwnProperty(key)) { loadImage(key, config[key]); } } } window.R { load: load, get: function(key) { return RESOURCES[key] || null; } }; })(window);这个实现有三个值得关注的参数点。其一是load(config, callback)的 config 结构应该完全扁平化key 对应游戏内的资源标识value 是图片路径这样调用方可以直观维护一张资源表。其二是onerror分支不能省略捕鱼类游戏的资源文件很多某张海洋背景图加载失败不应该让整个鱼群逻辑停摆。其三是RESOURCES[key] img在onload之前就赋值这样如果同一次加载中某个精灵图被重复引用不会引起二次请求。实际项目中如果资源量更大还可以在 load 函数内部加入并发数控制避免一次性发起过多图片请求。2.3 帧动画配置解析plist 文件在项目中不只是图片定位的配置很多时候还携带了动画帧的时间间隔参数。解析 plist 常见做法是使用第三方库但这个项目的 plist 结构比较简单核心信息是frame字段中记录的{{x,y},{width,height}}格式分别代表小图在大图中的左上角坐标和宽高。前端拿到这个数据后通常转换成以下结构供动画系统查询var frameData { // key 为帧名称value 为裁剪区域 fish1_01: { x: 10, y: 20, width: 80, height: 80 }, fish1_02: { x: 100, y: 20, width: 80, height: 80 } };解析完成后的数据直接交给 Sprite 对象使用绘制阶段通过drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)完成。这里的九个参数中前四个是从大图片中裁剪的源区域后四个是绘制到 canvas 上的目标区域。最容易出错的是源区域与目标区域的宽高比不一致会导致鱼类精灵绘制时被拉伸变形。建议目标区域宽高直接用源区域的宽高乘以一个统一的缩放系数而不是为每条鱼分别设置固定大小。2.4 纹理图集的小游戏适配经验当项目要迁移到微信小游戏或其他平台时纹理图集策略仍然适用但要注意平台接口差异。浏览器环境中可以直接用new Image()加载图集小游戏环境则要使用wx.createImage()。最稳妥的做法是在 R.js 内部封装一层图片对象工厂根据运行环境判断使用哪个接口而不是在业务代码里到处写条件分支。另外捕鱼游戏需要的鱼群种类多每张图集的尺寸不能无限放大移动端 canvas 的纹理上限通常是 2048 像素超过这个尺寸的图集在某些设备上会渲染异常。打包资源时应当把鱼群、炮台、子弹、UI 元素拆到不同图集而不是全部合并为一张大图这样既方便按场景加载也避免了超出设备纹理上限的兼容性问题。3. 鱼群游动与转向实现FishGroup、FishManager 的设计模式3.1 从文件结构看对象管理架构项目里有FishGroup.js和FishManager.js两个文件职能划分很清楚FishGroup 负责管理同类型鱼群的一组精灵FishManager 负责全局的鱼群生成、回收和调度。一个简单的分法是把「一群同种鱼一起游动」视为一个 FishGroup把「整个屏幕内所有鱼的管理」视为 FishManager。这种分层带来的直接好处是动画性能可控每一帧不需要遍历所有鱼个体去计算位置而是以组为单位更新再将组内鱼的位置偏移量叠加到组位置上即可。以常见的鱼群行为为例鱼在移动时有自己的基础方向、速度和随机偏移量这些参数全部记录在 FishGroup 实例上。当鱼群被创建时初始化一个起始坐标、一个目标方向、一个游动速度随机范围。之后每一帧并不重新计算整条路径而是基于当前位置做增量更新// FishGroup.js 中的移动逻辑示意 function update(deltaTime) { // deltaTime 是上一帧到当前帧的时间差秒用于归一化移动距离 var moveDistance this.speed * deltaTime; this.x Math.cos(this.angle) * moveDistance; this.y Math.sin(this.angle) * moveDistance; // 边界检测如果鱼群游出屏幕随机调整到一个新方向 if (this.x -100 || this.x canvasWidth 100 || this.y -100 || this.y canvasHeight 100) { this.angle Math.random() * Math.PI * 2; } }这里的this.angle是弧度制0 表示向右游π/2 表示向下游。弧度制的好处是配合Math.cos和Math.sin时不需要做角度转换虽然阅读上不如角度值直观但在动画循环里每一帧都要调用三角函数省去Math.PI / 180的换算就是省性能。deltaTime这个参数也是动画系统里必须处理的当浏览器标签页切换到后台再切回来时两帧之间的时间间隔会突然变大如果不做时间差修正鱼群位置会出现瞬移。通常给deltaTime设置一个上限值比如 0.1 秒超过上限就按 0.1 计算避免异常跳变。3.2 FishManager 的生成与回收策略FishManager 在项目里是调度中枢。一个常规的设计是维护一个鱼群对象池而不是每次创建新对象、游戏结束时直接丢弃。对象池的优势在于减少垃圾回收压力捕鱼游戏的 Shoot-em-up 场景里鱼群会频繁生成和消失如果每次都 new 一个 FishGroup又经历完整的状态初始化JavaScript 引擎的 GC垃圾回收会周期性卡顿直观表现就是画面掉帧。常见做法是维护两个数组activeGroups和poolGroups生成鱼类时优先从poolGroups里取出复用的对象// FishManager.js 中获取鱼群的逻辑 function obtainFishGroup() { var group; if (this.poolGroups.length 0) { group this.poolGroups.pop(); // 必须重置状态否则上一次残留的属性会影响本次显示 group.reset(); } else { group new FishGroup(); } this.activeGroups.push(group); return group; }reset()方法至关重要。复用的对象如果不清空上一次的坐标、速度、精灵帧索引会在下一次出现时带着旧状态运行。常见场景是回收时为所有属性赋默认值而不是等到下一次使用前再处理这样即使某条逻辑路径漏掉了属性重置也不太容易暴露问题。FishManager 另一个职责是控制同时存在的鱼群数量上限。屏幕上的鱼不是越多越好移动端 Canvas 的绘制能力有限每帧绘制一千条鱼和一百条鱼的帧率差距非常明显。通常做法是在生成逻辑里加一个全局容量判断if (this.activeGroups.length this.maxGroups) { return; // 超过上限就不再生成了 }maxGroups的值应该根据目标设备的性能动态调整。桌面端浏览器可以设置 50 到 80移动端建议 20 到 40。这个值配置在管理器的初始化参数里方便后续做性能调优时只改一处。3.3 精灵帧动画的播放与同步捕鱼游戏中的鱼有游动动画通常是 2 到 4 帧循环播放。FishGroup 更新时除了移动位置还要更新当前帧索引// 帧动画计数 this.frameTimer deltaTime; if (this.frameTimer this.frameInterval) { this.frameTimer 0; this.currentFrameIndex (this.currentFrameIndex 1) % this.totalFrames; }frameInterval控制动画切换速度单位是秒0.1 表示每 0.1 秒切换一帧。这个值如果太大鱼游动起来像幻灯片如果太小鱼抖动明显建议范围在 0.08 到 0.2 之间。不同种类鱼可以配置不同的帧间隔体型大的鱼鲨鱼游动节奏慢一些小型鱼小丑鱼、比目鱼可以快一些观感上更自然。3.4 鱼群间距与运动轨迹多样化如果所有鱼群都以完全相同的速度、完全相同的方向游动画面会显得机械。FishManager 生成鱼群时需要对几条关键参数做随机化处理。速度的随机范围可以控制在基础值的 0.8 到 1.2 倍方向角度的随机范围可以控制在 360 度内的任意值另外鱼群内部成员之间的间距也可以做小幅浮动。当鱼群从同一条路径反复进入画面时如果这些参数不变玩家会立刻感到重复。实际项目里更丰富的轨迹可以通过贝塞尔曲线实现但这里没有引入那么多高阶曲线逻辑。如果要在当前优质实践上做得更好可以把鱼群的游动轨迹设计为多个航路点的组合。FishManager 给 FishGroup 指定一条路径数组FishGroup 每到达一个路标点就切换下一个目标点这样鱼群在屏幕里的运动就不会是简单的直线穿越。不过路线点数量不宜过多三到五个点就足够制造弯道感过密的路标点会让鱼群频繁转向看起来不够自然。4. 玩法内核碰撞检测、炮弹与渔网动画的联动4.1 捕鱼玩法的状态流转捕鱼达人的前端核心从玩法层面看是这样一个循环玩家点击屏幕选定方向发射炮弹炮弹飞行到目标位置触发渔网动画渔网扩散期间检测是否罩住鱼如果命中则播放金币动画和鱼的消失动画。整个流程中炮弹是一个带速度的运动对象渔网是一个随生命周期放大的动画对象鱼是 FishManager 管理下的碰撞被动方。三个对象相互独立通过事件机制通知彼此这样的解耦设计让后续增加新武器或新鱼种时不需要大改原有逻辑。4.2 碰撞检测的两种有效方案渔网罩住鱼的判定常见做法有两种。第一种是矩形碰撞检测即判断渔网矩形是否与鱼的碰撞矩形相交优点是计算量小缺点是矩形区域不等于鱼的实际轮廓鱼尾或鱼鳍部位容易产生误判。第二种是距离判定即计算渔网中心点与鱼中心点的距离是否小于两者半径之和这种方法实现简单最接近捕鱼游戏常见的圆形判定区域。从实践角度看中等体型的鱼用圆形判定就够了因为渔网动画本身是圆形扩散的球的半径随动画推进不断增长// 碰撞检测圆形判定 var dx fish.x - net.x; var dy fish.y - net.y; var distance Math.sqrt(dx * dx dy * dy); var hitRadius net.radius fish.collisionRadius; if (distance hitRadius) { // 命中触发鱼的捕获效果 onFishCaught(fish, net); }每一帧做全量碰撞检测的性能开销是可以接受的。即使屏幕里有五十条鱼和五个渔网同时存在每帧也只需要两百五十次距离计算。Math.sqrt 开根号在多数浏览器引擎中都已高度优化但在非常低端的机器上可以做一个平方距离比较来避开开根号操作。4.3 炮弹与渔网的发射控制炮弹的发射不能设计成无限快速连发否则玩家疯狂点击时会产生大量精灵对象帧率会迅速下降。常见做法是加一个最小发射间隔例如 150 毫秒到 300 毫秒。在 fishjoy.js 中点击事件处理函数里应该先记录上一次发射时间戳然后对比当前时间// 炮弹发射冷却控制 var lastShootTime 0; var SHOOT_INTERVAL 0.2; // 单位秒 function onCanvasClick(e) { var now performance.now() / 1000; if (now - lastShootTime SHOOT_INTERVAL) { return; // 冷却中直接忽略本次点击 } lastShootTime now; createBullet(e.clientX, e.clientY); }SHOOT_INTERVAL的取值要考虑游戏手感太短会导致玩家手指还停留在屏幕上时炮弹已经发射了七八发太长则让玩家觉得响应迟钝。配合这个参数还可以做一个炮台等级机制等级越高发射的炮弹数量和伤害越高冷却时间不变。炮弹对象本身也有生命周期管理。射出后如果在飞行过程中撞到边界或超过最大飞行距离应当立即从场景中移除。渔网动画播放完成后也要及时从对象列表中清除。这些清理动作最好在统一的更新函数里做标记isDead true的对象不立即删除而是在本帧结束前集中处理避免在遍历过程中删除对象导致下标错乱。4.4 事件分发让鱼的消失和金币动画解耦命中一条鱼之后通常要播放鱼的消失动画、弹出金币飘分文字、增加玩家分数。如果这些逻辑全部写在碰撞检测的 if 分支里后续维护会非常痛苦。用一个简单的事件发布订阅器可以让代码清晰很多// EventBus 简单实现 var EventBus { listeners: {}, on: function(event, callback) { if (!this.listeners[event]) { this.listeners[event] []; } this.listeners[event].push(callback); }, emit: function(event, data) { var callbacks this.listeners[event] || []; for (var i 0; i callbacks.length; i) { callbacks[i](data); } } }; // 在碰撞检测处广播事件 EventBus.emit(fishCaught, { fish: fish, net: net });这样在 game.js 里只需要订阅这个事件把鱼从画布列表里移除然后创建金币动画对象。如果之后要增加一个音效播放功能只需要在订阅列表里追加一个回调函数不影响原有逻辑。前端的八股文常提到事件解耦捕鱼项目里这是最自然的落地场景。4.5 炮弹瞄准的屏幕坐标转换很多前端新手在刚开始做捕鱼类游戏时会遇到点击位置与发射方向不一致的问题。因为 canvas 的坐标原点在左上角而玩家点击坐标是从浏览器事件中拿到的 clientX 和 clientY需要先减去 canvas 元素的偏移量var rect canvas.getBoundingClientRect(); var scaleX canvas.width / rect.width; var scaleY canvas.height / rect.height; var gameX (e.clientX - rect.left) * scaleX; var gameY (e.clientY - rect.top) * scaleY;其中scaleX和scaleY是 canvas 的实际像素尺寸与显示尺寸的比值。如果 canvas 设置了固定显示宽度并适配了不同屏幕这个缩放比尤其重要否则在小屏幕设备上点击位置会出现明显偏移。炮弹方向的计算就是当前炮台位置与(gameX, gameY)坐标的连线方向。5. 只剩最后一块用 DevTools 验证动画性能并优化绘制路径5.1 通过 Performance 面板定位掉帧原因在浏览器里打开 index.html 运行游戏按下 F12 打开开发者工具切到 Performance 面板点击录制按钮后让游戏正常跑十秒。录制结束后重点看 Frames 时间线如果发现某个时间点帧耗时超过 16 毫秒对应 60 帧满帧率就点击该帧查看底部的 Call Tree。通常问题集中在三类drawImage调用次数过多、Math.random等高频计算函数、以及 JavaScript 对象反复创建销毁导致 GC 占用主线程。针对第一个原因可以检查 R.js 获取图片对象时是否有缓存机制如果每次绘制都通过 key 去对象池查一次再取图片这个查询本身有开销。直接在 FishGroup 初始化时把图片对象引用缓存到实例属性里每次绘制直接用属性值不再查字典。5.2 内存面板检查泄漏点切到 Memory 面板连续录制两次堆快照。第一次在游戏运行十秒后记录第二次在游戏运行三十秒后记录。对比两次快照中的对象数量重点看 FishGroup 和 Sprite 对象的总数是否匹配当前屏幕中的实际数量。如果明显偏多说明回收逻辑没有把已死亡的鱼群对象从 activeGroups 数组中移除干净。常见错误是在动画帧的遍历循环里直接 splice 数组元素导致索引错乱而跳过了部分元素的销毁。正确做法是先遍历收集要移除的对象引用再统一从数组过滤。5.3 Canvas 绘制频率控制并不是每一帧都需要重绘整个场景。当游戏暂停或弹窗被打开时应该停止requestAnimationFrame的循环调用。长时间无操作时可以主动降低帧率至每秒三十帧减少无效绘制和能量消耗。具体做法是记录上一次渲染时间戳如果距离上次渲染不到 33 毫秒就跳过本帧的渲染逻辑function gameLoop(timestamp) { var deltaTime timestamp - lastRenderTime; if (deltaTime 33) { update(deltaTime / 1000); render(); lastRenderTime timestamp; } requestAnimationFrame(gameLoop); } lastRenderTime performance.now(); requestAnimationFrame(gameLoop);这里把update和render打包在时间判断之后既保证了游戏逻辑更新的频率下限也控制了渲染压力。注意update里使用的时间参数不能直接用deltaTime的原始值因为这里的 deltaTime 是经过帧率限制后的间隔要换算成秒再传给逻辑更新函数。5.4 真机测试与小游戏平台的差异处理如果后续要把这个捕鱼项目迁移到微信小游戏的运行环境有两点必须调整。第一是纹理加载方式微信小游戏的wx.createImage()接口在加载本地图片时路径规则与浏览器不同通常需要将图片放在项目根目录下用相对路径引用不能用../image/xxx.png这种超出包目录的写法。第二是触摸事件浏览器中的click事件在小游戏环境中不生效要改成touchstart和touchend监听并且拿到事件对象的touches[0]来读取坐标。在 touch 事件监听函数中同样需要做坐标系转换只是转换的基准不是 canvas 的getBoundingClientRect而是小游戏提供的屏幕尺寸和 canvas 的实际物理尺寸对应关系。本文还有配套的精品资源点击获取
捕鱼达人小游戏开发解析：Canvas动画、精灵图集与性能优化
简介一份基于JavaScript实现的前端捕鱼达人小游戏完整源码包专为前端初学者、游戏开发爱好者及需要课堂项目练习的开发者设计。资源将HTML、CSS、JavaScript、jQuery与Bootstrap等技术融合完整呈现了动画渲染、事件交互、碰撞检测、资源加载等前端游戏开发中的关键环节同时兼顾用户体验与视觉设计适合作为学习经典小游戏实现思路的参考。压缩包共86个文件总大小仅4.41MB主要包含53张PNG格式游戏素材、13个JS逻辑脚本、10个PLIST配置文件、JSON数据文件以及HTML入口页面另有TexturePacker生成的tps源文件目录结构清晰便于按模块查看与二次开发。目前已有215人浏览学习学习者可从中拆解鱼群管理、炮台发射、金币动画等模块的具体实现理解游戏主循环与状态控制方法也可直接运行index.html快速体验完整玩法是前端动画与小游戏开发不可多得的练习素材。1. 捕鱼达人前端小游戏基于 Canvas 的动画玩法与技术解析一个捕鱼达人下载包真正值得拆解的不是玩法本身而是它背后那套纯前端动画解决方案。这个压缩包用原生 JavaScript 配合轻量级动画库完成了从鱼群随机游动到炮弹发射、渔网捕捉、金币飘分、炮台切换这一整套交互逻辑素材组织上更是把精灵图、纹理图集、动画帧配置全部拆成了可替换的独立文件。对于想理解前端小游戏怎么构建、Canvas 动画性能瓶颈出在哪、或者打算复刻一款捕鱼玩法做技术预研的人来说这份代码比任何教学 Demo 都完整得多。后面所有章节的讨论都基于一个事实这是一份不需要后端参与打开 index.html 就能让鱼游起来的纯前端项目。2. 动画素材与纹理图集R.js 与 plist 配置的加载逻辑2.1 为什么捕鱼类游戏首选精灵图集而非散图打开 images 目录不难发现资源不是一张张零散的图片而是存在多个.plist配置文件加上对应的大图文件。cannon.plist、fish-hd.plist、shark-hd.plist、game_bg_1.plist这类文件在 Cocos2d 时代就已经是标准的精灵图集配置格式前端项目直接沿用了这个规范。之所以这样做是因为捕鱼游戏里面鱼群、炮台、子弹、金币特效都需要大量帧动画如果每帧动画都发一次 HTTP 请求或者直接以单张图片形式加载浏览器纹理上传和内存占用都会快速膨胀。图集把几十张小图打包成一张大图比如fish-hd.png、shark-hd.png再用 plist 记录每张小图在大图中的位置和尺寸绘制时只需要一次性上传大图纹理之后每次 drawImage 都是同一纹理上的裁剪操作性能开销大幅下降。2.2 一个可复用的图片加载器实现项目中R.js承担了资源加载职责。虽然压缩后的代码阅读性不高但核心逻辑仍然是遍历配置、预加载图片、全部就绪后回调启动游戏。下面给出一个兼容该项目风格的资源加载器实现(function(window) { // 简单的资源加载器适用于小游戏前端的预加载场景 var RESOURCES {}; var totalCount 0; var loadedCount 0; var callbackFn null; function loadImage(key, src) { var img new Image(); img.onload function() { loadedCount; RESOURCES[key] img; if (loadedCount totalCount callbackFn) { callbackFn(RESOURCES); } }; img.onerror function() { // 单个资源失败不应阻塞整个游戏启动打印错误即可 console.error([R.js] resource load failed:, src); loadedCount; if (loadedCount totalCount callbackFn) { callbackFn(RESOURCES); } }; img.src src; RESOURCES[key] img; } function load(config, callback) { RESOURCES {}; loadedCount 0; totalCount 0; callbackFn callback; for (var key in config) { if (config.hasOwnProperty(key)) { totalCount; } } for (var key in config) { if (config.hasOwnProperty(key)) { loadImage(key, config[key]); } } } window.R { load: load, get: function(key) { return RESOURCES[key] || null; } }; })(window);这个实现有三个值得关注的参数点。其一是load(config, callback)的 config 结构应该完全扁平化key 对应游戏内的资源标识value 是图片路径这样调用方可以直观维护一张资源表。其二是onerror分支不能省略捕鱼类游戏的资源文件很多某张海洋背景图加载失败不应该让整个鱼群逻辑停摆。其三是RESOURCES[key] img在onload之前就赋值这样如果同一次加载中某个精灵图被重复引用不会引起二次请求。实际项目中如果资源量更大还可以在 load 函数内部加入并发数控制避免一次性发起过多图片请求。2.3 帧动画配置解析plist 文件在项目中不只是图片定位的配置很多时候还携带了动画帧的时间间隔参数。解析 plist 常见做法是使用第三方库但这个项目的 plist 结构比较简单核心信息是frame字段中记录的{{x,y},{width,height}}格式分别代表小图在大图中的左上角坐标和宽高。前端拿到这个数据后通常转换成以下结构供动画系统查询var frameData { // key 为帧名称value 为裁剪区域 fish1_01: { x: 10, y: 20, width: 80, height: 80 }, fish1_02: { x: 100, y: 20, width: 80, height: 80 } };解析完成后的数据直接交给 Sprite 对象使用绘制阶段通过drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)完成。这里的九个参数中前四个是从大图片中裁剪的源区域后四个是绘制到 canvas 上的目标区域。最容易出错的是源区域与目标区域的宽高比不一致会导致鱼类精灵绘制时被拉伸变形。建议目标区域宽高直接用源区域的宽高乘以一个统一的缩放系数而不是为每条鱼分别设置固定大小。2.4 纹理图集的小游戏适配经验当项目要迁移到微信小游戏或其他平台时纹理图集策略仍然适用但要注意平台接口差异。浏览器环境中可以直接用new Image()加载图集小游戏环境则要使用wx.createImage()。最稳妥的做法是在 R.js 内部封装一层图片对象工厂根据运行环境判断使用哪个接口而不是在业务代码里到处写条件分支。另外捕鱼游戏需要的鱼群种类多每张图集的尺寸不能无限放大移动端 canvas 的纹理上限通常是 2048 像素超过这个尺寸的图集在某些设备上会渲染异常。打包资源时应当把鱼群、炮台、子弹、UI 元素拆到不同图集而不是全部合并为一张大图这样既方便按场景加载也避免了超出设备纹理上限的兼容性问题。3. 鱼群游动与转向实现FishGroup、FishManager 的设计模式3.1 从文件结构看对象管理架构项目里有FishGroup.js和FishManager.js两个文件职能划分很清楚FishGroup 负责管理同类型鱼群的一组精灵FishManager 负责全局的鱼群生成、回收和调度。一个简单的分法是把「一群同种鱼一起游动」视为一个 FishGroup把「整个屏幕内所有鱼的管理」视为 FishManager。这种分层带来的直接好处是动画性能可控每一帧不需要遍历所有鱼个体去计算位置而是以组为单位更新再将组内鱼的位置偏移量叠加到组位置上即可。以常见的鱼群行为为例鱼在移动时有自己的基础方向、速度和随机偏移量这些参数全部记录在 FishGroup 实例上。当鱼群被创建时初始化一个起始坐标、一个目标方向、一个游动速度随机范围。之后每一帧并不重新计算整条路径而是基于当前位置做增量更新// FishGroup.js 中的移动逻辑示意 function update(deltaTime) { // deltaTime 是上一帧到当前帧的时间差秒用于归一化移动距离 var moveDistance this.speed * deltaTime; this.x Math.cos(this.angle) * moveDistance; this.y Math.sin(this.angle) * moveDistance; // 边界检测如果鱼群游出屏幕随机调整到一个新方向 if (this.x -100 || this.x canvasWidth 100 || this.y -100 || this.y canvasHeight 100) { this.angle Math.random() * Math.PI * 2; } }这里的this.angle是弧度制0 表示向右游π/2 表示向下游。弧度制的好处是配合Math.cos和Math.sin时不需要做角度转换虽然阅读上不如角度值直观但在动画循环里每一帧都要调用三角函数省去Math.PI / 180的换算就是省性能。deltaTime这个参数也是动画系统里必须处理的当浏览器标签页切换到后台再切回来时两帧之间的时间间隔会突然变大如果不做时间差修正鱼群位置会出现瞬移。通常给deltaTime设置一个上限值比如 0.1 秒超过上限就按 0.1 计算避免异常跳变。3.2 FishManager 的生成与回收策略FishManager 在项目里是调度中枢。一个常规的设计是维护一个鱼群对象池而不是每次创建新对象、游戏结束时直接丢弃。对象池的优势在于减少垃圾回收压力捕鱼游戏的 Shoot-em-up 场景里鱼群会频繁生成和消失如果每次都 new 一个 FishGroup又经历完整的状态初始化JavaScript 引擎的 GC垃圾回收会周期性卡顿直观表现就是画面掉帧。常见做法是维护两个数组activeGroups和poolGroups生成鱼类时优先从poolGroups里取出复用的对象// FishManager.js 中获取鱼群的逻辑 function obtainFishGroup() { var group; if (this.poolGroups.length 0) { group this.poolGroups.pop(); // 必须重置状态否则上一次残留的属性会影响本次显示 group.reset(); } else { group new FishGroup(); } this.activeGroups.push(group); return group; }reset()方法至关重要。复用的对象如果不清空上一次的坐标、速度、精灵帧索引会在下一次出现时带着旧状态运行。常见场景是回收时为所有属性赋默认值而不是等到下一次使用前再处理这样即使某条逻辑路径漏掉了属性重置也不太容易暴露问题。FishManager 另一个职责是控制同时存在的鱼群数量上限。屏幕上的鱼不是越多越好移动端 Canvas 的绘制能力有限每帧绘制一千条鱼和一百条鱼的帧率差距非常明显。通常做法是在生成逻辑里加一个全局容量判断if (this.activeGroups.length this.maxGroups) { return; // 超过上限就不再生成了 }maxGroups的值应该根据目标设备的性能动态调整。桌面端浏览器可以设置 50 到 80移动端建议 20 到 40。这个值配置在管理器的初始化参数里方便后续做性能调优时只改一处。3.3 精灵帧动画的播放与同步捕鱼游戏中的鱼有游动动画通常是 2 到 4 帧循环播放。FishGroup 更新时除了移动位置还要更新当前帧索引// 帧动画计数 this.frameTimer deltaTime; if (this.frameTimer this.frameInterval) { this.frameTimer 0; this.currentFrameIndex (this.currentFrameIndex 1) % this.totalFrames; }frameInterval控制动画切换速度单位是秒0.1 表示每 0.1 秒切换一帧。这个值如果太大鱼游动起来像幻灯片如果太小鱼抖动明显建议范围在 0.08 到 0.2 之间。不同种类鱼可以配置不同的帧间隔体型大的鱼鲨鱼游动节奏慢一些小型鱼小丑鱼、比目鱼可以快一些观感上更自然。3.4 鱼群间距与运动轨迹多样化如果所有鱼群都以完全相同的速度、完全相同的方向游动画面会显得机械。FishManager 生成鱼群时需要对几条关键参数做随机化处理。速度的随机范围可以控制在基础值的 0.8 到 1.2 倍方向角度的随机范围可以控制在 360 度内的任意值另外鱼群内部成员之间的间距也可以做小幅浮动。当鱼群从同一条路径反复进入画面时如果这些参数不变玩家会立刻感到重复。实际项目里更丰富的轨迹可以通过贝塞尔曲线实现但这里没有引入那么多高阶曲线逻辑。如果要在当前优质实践上做得更好可以把鱼群的游动轨迹设计为多个航路点的组合。FishManager 给 FishGroup 指定一条路径数组FishGroup 每到达一个路标点就切换下一个目标点这样鱼群在屏幕里的运动就不会是简单的直线穿越。不过路线点数量不宜过多三到五个点就足够制造弯道感过密的路标点会让鱼群频繁转向看起来不够自然。4. 玩法内核碰撞检测、炮弹与渔网动画的联动4.1 捕鱼玩法的状态流转捕鱼达人的前端核心从玩法层面看是这样一个循环玩家点击屏幕选定方向发射炮弹炮弹飞行到目标位置触发渔网动画渔网扩散期间检测是否罩住鱼如果命中则播放金币动画和鱼的消失动画。整个流程中炮弹是一个带速度的运动对象渔网是一个随生命周期放大的动画对象鱼是 FishManager 管理下的碰撞被动方。三个对象相互独立通过事件机制通知彼此这样的解耦设计让后续增加新武器或新鱼种时不需要大改原有逻辑。4.2 碰撞检测的两种有效方案渔网罩住鱼的判定常见做法有两种。第一种是矩形碰撞检测即判断渔网矩形是否与鱼的碰撞矩形相交优点是计算量小缺点是矩形区域不等于鱼的实际轮廓鱼尾或鱼鳍部位容易产生误判。第二种是距离判定即计算渔网中心点与鱼中心点的距离是否小于两者半径之和这种方法实现简单最接近捕鱼游戏常见的圆形判定区域。从实践角度看中等体型的鱼用圆形判定就够了因为渔网动画本身是圆形扩散的球的半径随动画推进不断增长// 碰撞检测圆形判定 var dx fish.x - net.x; var dy fish.y - net.y; var distance Math.sqrt(dx * dx dy * dy); var hitRadius net.radius fish.collisionRadius; if (distance hitRadius) { // 命中触发鱼的捕获效果 onFishCaught(fish, net); }每一帧做全量碰撞检测的性能开销是可以接受的。即使屏幕里有五十条鱼和五个渔网同时存在每帧也只需要两百五十次距离计算。Math.sqrt 开根号在多数浏览器引擎中都已高度优化但在非常低端的机器上可以做一个平方距离比较来避开开根号操作。4.3 炮弹与渔网的发射控制炮弹的发射不能设计成无限快速连发否则玩家疯狂点击时会产生大量精灵对象帧率会迅速下降。常见做法是加一个最小发射间隔例如 150 毫秒到 300 毫秒。在 fishjoy.js 中点击事件处理函数里应该先记录上一次发射时间戳然后对比当前时间// 炮弹发射冷却控制 var lastShootTime 0; var SHOOT_INTERVAL 0.2; // 单位秒 function onCanvasClick(e) { var now performance.now() / 1000; if (now - lastShootTime SHOOT_INTERVAL) { return; // 冷却中直接忽略本次点击 } lastShootTime now; createBullet(e.clientX, e.clientY); }SHOOT_INTERVAL的取值要考虑游戏手感太短会导致玩家手指还停留在屏幕上时炮弹已经发射了七八发太长则让玩家觉得响应迟钝。配合这个参数还可以做一个炮台等级机制等级越高发射的炮弹数量和伤害越高冷却时间不变。炮弹对象本身也有生命周期管理。射出后如果在飞行过程中撞到边界或超过最大飞行距离应当立即从场景中移除。渔网动画播放完成后也要及时从对象列表中清除。这些清理动作最好在统一的更新函数里做标记isDead true的对象不立即删除而是在本帧结束前集中处理避免在遍历过程中删除对象导致下标错乱。4.4 事件分发让鱼的消失和金币动画解耦命中一条鱼之后通常要播放鱼的消失动画、弹出金币飘分文字、增加玩家分数。如果这些逻辑全部写在碰撞检测的 if 分支里后续维护会非常痛苦。用一个简单的事件发布订阅器可以让代码清晰很多// EventBus 简单实现 var EventBus { listeners: {}, on: function(event, callback) { if (!this.listeners[event]) { this.listeners[event] []; } this.listeners[event].push(callback); }, emit: function(event, data) { var callbacks this.listeners[event] || []; for (var i 0; i callbacks.length; i) { callbacks[i](data); } } }; // 在碰撞检测处广播事件 EventBus.emit(fishCaught, { fish: fish, net: net });这样在 game.js 里只需要订阅这个事件把鱼从画布列表里移除然后创建金币动画对象。如果之后要增加一个音效播放功能只需要在订阅列表里追加一个回调函数不影响原有逻辑。前端的八股文常提到事件解耦捕鱼项目里这是最自然的落地场景。4.5 炮弹瞄准的屏幕坐标转换很多前端新手在刚开始做捕鱼类游戏时会遇到点击位置与发射方向不一致的问题。因为 canvas 的坐标原点在左上角而玩家点击坐标是从浏览器事件中拿到的 clientX 和 clientY需要先减去 canvas 元素的偏移量var rect canvas.getBoundingClientRect(); var scaleX canvas.width / rect.width; var scaleY canvas.height / rect.height; var gameX (e.clientX - rect.left) * scaleX; var gameY (e.clientY - rect.top) * scaleY;其中scaleX和scaleY是 canvas 的实际像素尺寸与显示尺寸的比值。如果 canvas 设置了固定显示宽度并适配了不同屏幕这个缩放比尤其重要否则在小屏幕设备上点击位置会出现明显偏移。炮弹方向的计算就是当前炮台位置与(gameX, gameY)坐标的连线方向。5. 只剩最后一块用 DevTools 验证动画性能并优化绘制路径5.1 通过 Performance 面板定位掉帧原因在浏览器里打开 index.html 运行游戏按下 F12 打开开发者工具切到 Performance 面板点击录制按钮后让游戏正常跑十秒。录制结束后重点看 Frames 时间线如果发现某个时间点帧耗时超过 16 毫秒对应 60 帧满帧率就点击该帧查看底部的 Call Tree。通常问题集中在三类drawImage调用次数过多、Math.random等高频计算函数、以及 JavaScript 对象反复创建销毁导致 GC 占用主线程。针对第一个原因可以检查 R.js 获取图片对象时是否有缓存机制如果每次绘制都通过 key 去对象池查一次再取图片这个查询本身有开销。直接在 FishGroup 初始化时把图片对象引用缓存到实例属性里每次绘制直接用属性值不再查字典。5.2 内存面板检查泄漏点切到 Memory 面板连续录制两次堆快照。第一次在游戏运行十秒后记录第二次在游戏运行三十秒后记录。对比两次快照中的对象数量重点看 FishGroup 和 Sprite 对象的总数是否匹配当前屏幕中的实际数量。如果明显偏多说明回收逻辑没有把已死亡的鱼群对象从 activeGroups 数组中移除干净。常见错误是在动画帧的遍历循环里直接 splice 数组元素导致索引错乱而跳过了部分元素的销毁。正确做法是先遍历收集要移除的对象引用再统一从数组过滤。5.3 Canvas 绘制频率控制并不是每一帧都需要重绘整个场景。当游戏暂停或弹窗被打开时应该停止requestAnimationFrame的循环调用。长时间无操作时可以主动降低帧率至每秒三十帧减少无效绘制和能量消耗。具体做法是记录上一次渲染时间戳如果距离上次渲染不到 33 毫秒就跳过本帧的渲染逻辑function gameLoop(timestamp) { var deltaTime timestamp - lastRenderTime; if (deltaTime 33) { update(deltaTime / 1000); render(); lastRenderTime timestamp; } requestAnimationFrame(gameLoop); } lastRenderTime performance.now(); requestAnimationFrame(gameLoop);这里把update和render打包在时间判断之后既保证了游戏逻辑更新的频率下限也控制了渲染压力。注意update里使用的时间参数不能直接用deltaTime的原始值因为这里的 deltaTime 是经过帧率限制后的间隔要换算成秒再传给逻辑更新函数。5.4 真机测试与小游戏平台的差异处理如果后续要把这个捕鱼项目迁移到微信小游戏的运行环境有两点必须调整。第一是纹理加载方式微信小游戏的wx.createImage()接口在加载本地图片时路径规则与浏览器不同通常需要将图片放在项目根目录下用相对路径引用不能用../image/xxx.png这种超出包目录的写法。第二是触摸事件浏览器中的click事件在小游戏环境中不生效要改成touchstart和touchend监听并且拿到事件对象的touches[0]来读取坐标。在 touch 事件监听函数中同样需要做坐标系转换只是转换的基准不是 canvas 的getBoundingClientRect而是小游戏提供的屏幕尺寸和 canvas 的实际物理尺寸对应关系。本文还有配套的精品资源点击获取
