简介基于HTML5技术栈实现的捕鱼达人游戏完整工程源码主要运用Canvas绘图、JavaScript游戏逻辑与Web Audio音效接口适合Web前端学习者、游戏开发入门者以及希望独立完成H5小游戏的开发者可系统了解网页游戏从场景渲染、动画更新到用户交互的实现方法。压缩包共85个文件、约4.4MB其中包含53张PNG图片素材、13个JavaScript脚本、10个plist、3个json、3个tps配置文件并配有可直接运行的index.html。文件按src、images、js等目录组织资源与逻辑分离便于替换美术素材和调整游戏参数。已有1286人学习/下载。源码内含鱼群管理、子弹发射、炮台旋转、得分统计等完整模块通过fishjoy.js和fishjoy.game.js可以深入学习碰撞检测、精灵动画、requestAnimationFrame循环、本地存储与响应式适配配套的plist/json配置也展示了图集与动画帧数据的组织方式适合作为课程设计或简历项目进行二次开发。1. HTML5捕鱼达人不是换皮小游戏是能跑通一整条小游戏链路的前端实战HTML5捕鱼达人源码、捕鱼平台源码、web这三组词拼在一起大概率对应两种诉求要么想交一份课程设计或作品展示要么想把一个单机Demo改造成能在微信生态、浏览器、Android/iOS WebView里同时跑的运营级小游戏。捕鱼玩法外行看着就是“点一下、打一炮、鱼翻了”但做起来之后会发现炮台角度、子弹出膛、鱼的曲线游动、碰撞判定、倍率结算、掉线同步几乎覆盖了小游戏开发里最容易被写坏的那批模块这也是它长期以来被当成前端练手热门项目的原因。适合谁前端想转小游戏的人、接外包改造平台源码的团队、以及正在找html5网页设计作业方向的学生。接下来这一路我按一个可复现的H5捕鱼最小框架来拆每个模块都能独立跑起来。2. 技术底座怎么选Canvas 2D还是PixiJS这一步决定了你后面会不会翻车2.1 三种渲染方案的取舍先给结论纯课程设计用Canvas 2D做“捕鱼平台源码”用PixiJS除非你本身有自研渲染器需求才会去碰原生WebGL。捕鱼游戏的特点是同一屏对象数量极大鱼群、子弹、粒子、金币飞行动画、水下光效叠在一起普通手机上一百多个draw image就已经开始掉帧。方案渲染方式同屏对象上限上手成本适合场景主要坑Canvas 2D2D上下文重绘200 draw call以内最低作业Demo、原型验证鱼一多帧率直线下降合批困难原生WebGLGPU着色器极高但代码量爆炸最高自研渲染引擎、特殊特效矩阵、着色器调试成本高PixiJSWebGL封装纹理合批几百到上千个精灵中运营级H5捕鱼平台素材规格、对象池、上下文丢失选PixiJS还有个现实原因它把纹理合批和渲染循环封装好了开发者可以把精力放在玩法逻辑上而玩法逻辑才是一套捕鱼平台源码真正值钱的地方。Canvas 2D在我的实盘比较里中等手机屏幕上五十条鱼加上炮台粒子就开始卡而PixiJS的合批能把多次draw image合并成一次纹理绘制请求。原生WebGL不是不好是没必要把两三天能调完的渲染细节拖成两周的shader调试。这里提醒一句游戏倍率和html5视频倍速是两个概念渲染层不要和结算层混在一起调。2.2 最小可跑通的项目骨架从CDN引用到第一帧画面捕鱼项目的目录结构不用追求复杂我一般按assets和js两层铺开静态资源只放图片逻辑文件按渲染、玩法、网络、工具四个维度切。下面这个骨架是PixiJS的7.x写法CDN里的版本号按你安装时的实际版本替换源码里不要锁死我这里的占位版本。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno titleHTML5捕鱼达人框架/title style html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #003c66; } canvas { display: block; } /style /head body script srchttps://cdn.jsdelivr.net/npm/pixi.js7.x.x/dist/pixi.min.js/script script srcjs/main.js/script /body /htmlviewport的设置有三个关键点宽度跟随设备但禁止用户缩放高度用全屏overflow hidden避免捕鱼过程中触发页面滚动。捕鱼游戏在手机上是横屏为主如果你的游戏设计稿是竖屏meta里的viewport要改成设备宽度320或375对应的样式但不要用maximum-scale1之外的缩放参数否则iOS Safari在输入框弹出和旋转时会出诡异白边。// js/main.js 入口 const app new PIXI.Application({ width: 750, // 设计稿宽度 height: 1334, // 设计稿高度 resolution: Math.min(window.devicePixelRatio || 1, 2), // 像素比最高压到2 autoDensity: true, // 让canvas尺寸自动匹配分辨率 antialias: true, // 低分辨率下开抗锯齿如果已经在用高清图可以关掉 backgroundColor: 0x003c66 }); document.body.appendChild(app.view); PIXI.Assets.load([assets/sea.jpg, assets/fish_1.png]).then((assets) { const bg PIXI.Sprite.from(assets[assets/sea.jpg]); bg.width app.screen.width; bg.height app.screen.height; app.stage.addChild(bg); const fish PIXI.Sprite.from(assets[assets/fish_1.png]); fish.x 100; fish.y 600; app.stage.addChild(fish); // 核心用ticker的deltaTime不要自己裸用requestAnimationFrame计算 app.ticker.add((ticker) { fish.x 2 * ticker.deltaTime; }); });逻辑说明PixiJS的ticker自带基于帧间隔的deltaTime上一帧到这一帧如果是16ms就是1如果因为浏览器卡顿变成32ms就会是2这样鱼的速度不会随帧率波动而飘。我在实际开发中见过不少新手直接写fish.x 260Hz屏幕上看起来正常一到帧率不稳的Android WebView里鱼就像在瞬移。这种写法不仅仅在捕鱼里成立任何H5游戏都按这套节奏做帧循环。参数说明width和height是设计稿尺寸不是css尺寸autoDensity为true后Pixi会自动用resolution乘设计稿并设置canvas的样式尺寸。resolution这里取window.devicePixelRatio的2封顶很关键iPhone的dpr已经到3但游戏素材若按3倍资源去做内存占用会翻好几倍捕鱼这种需要长时间运行的页面特别容易在iOS上被系统杀进程。2.3 决定同屏上限的三个参数对象池、精灵数量、缩放策略捕鱼平台源码能不能撑住人多时的鱼群不是看显卡而是看对象的创建方式。每条鱼都是一个Pixi Sprite频繁new和销毁Sprite会让浏览器频繁触发垃圾回收表现就是卡顿一瞬、声音断一下。更可怕的是你在低端Android上会看到帧率从60掉到20之后再也回不来因为GC把主线程堵死了。// 对象池鱼、子弹、金币飞行动画统一走这个逻辑 class SpritePool { constructor(texture, size) { this.texture texture; this.pool []; this.activeList []; for (let i 0; i size; i) { const sprite new PIXI.Sprite(texture); sprite.visible false; this.pool.push(sprite); } } spawn(x, y, angle) { const sprite this.pool.pop() || new PIXI.Sprite(this.texture); sprite.x x; sprite.y y; sprite.angle angle; sprite.visible true; this.activeList.push(sprite); return sprite; } recycle(sprite) { sprite.visible false; const idx this.activeList.indexOf(sprite); if (idx 0) this.activeList.splice(idx, 1); this.pool.push(sprite); } }逻辑说明spawn时优先从池里取池空了才new回收时不真正销毁而是置为不可见并放回池子。visiblefalse的精灵不参与渲染所以池的大小就是同屏渲染上限。我这个池默认值一般给80条鱼如果你做的是大鲨鱼Boss战池里放不下太多条大模型可以把大Boss单独做一个池小杂鱼一个池避免大图占满显存。参数说明对象池size不是越大越好。移动端显存是硬约束100条鱼加100发子弹加50个金币特效已经把一款中端机的GPU压得差不多了。我在一个真实捕鱼项目里测试过中等偏上的骁龙处理器同屏活跃精灵数控制在180以内能稳定跑60Hz超过220就开始掉帧。你需要把这几个数字当成首发参数去调而不是把每条鱼的贴图分辨率当成唯一变量。3. 玩法四核心炮台旋转、子弹弹道、鱼阵生成、碰撞检测3.1 炮台旋转与炮弹发射Math.atan2是唯一正解捕鱼的炮台不是8方向摇杆那种离散方向是尽可能平滑跟随鼠标或手指方向的360度旋转。实现上用Math.atan2得到鼠标相对炮台中心的角度然后用Pixi的angle属性直接赋值。这里有个细节如果炮台是一个容器且有子元素给容器转向的时候子元素的坐标系已经被旋转了不需要再单独计算子弹的父级坐标。// 瞄准鼠标/手指的屏幕坐标转成炮台局部坐标 function aimCannon(event) { const rect app.view.getBoundingClientRect(); const clientX event.clientX || event.touches[0].clientX; const clientY event.clientY || event.touches[0].clientY; const pointerX clientX - rect.left; const pointerY clientY - rect.top; const cannon game.cannon; // 炮台精灵锚点设在炮座中心 // Pixi的angle属性是弧度不需要手动转成角度 cannon.angle Math.atan2(pointerY - cannon.y, pointerX - cannon.x); game.aimAngle cannon.angle; } // 发射子弹初始位置从炮口出来不能从炮台中心冒出来 function fireBullet() { const cannon game.cannon; const angle cannon.angle; const length 60; // 炮管长度视觉上从炮口出膛 const x cannon.x Math.cos(angle) * length; const y cannon.y Math.sin(angle) * length; const bullet game.bulletPool.spawn(x, y, angle); bullet.speed 8; bullet.life 120; // 帧数寿命超过自动回收 bullet.prevX x; bullet.prevY y; }逻辑说明发射前必须记录prevX和prevY这是碰撞检测连续性的前提。捕鱼子弹不是光速飞行的激光它有飞行轨迹和飞行时间上一帧位置和当前帧位置之间这段线段才是碰撞检测真正要检测的对象。如果把子弹当做一个静态点去检测高速子弹会直接穿过鱼模型的边缘。参数说明speed8是按每帧走的像素数来定义的配合120帧的寿命一颗子弹最远能飞960像素这个射程大概覆盖一块手机屏幕的对角线打到屏幕边缘后消失或从引擎里回收。length60是炮口偏移量跟你的炮台美术资源有关炮管长的模型记得把它调整到炮口贴图的正前方位置。3.2 鱼的游动路径不等于直线加随机用基础直线叠加正弦摆动大多数捕鱼源码的鱼就是一个方向走到底看着很呆。好的鱼阵需要在一条大致方向线上叠加轻微的左右摆动给人一种海洋生物游动的感觉。实现上我不用贝塞尔曲线做全路径规划贝塞尔的问题在于一旦路径太长曲线控制点多了以后计算量大而且鱼转向时容易显得机械。更稳妥的做法是基础直线速度决定鱼的前进方向再叠加一个垂直于前进方向的低频正弦摆动。// 鱼群游动baseSpeed控制往前冲正弦控制摆尾 function updateFishGroup(fish, deltaTime) { fish.t deltaTime * fish.baseSpeed; // 基础方向 let x fish.startX fish.t * Math.cos(fish.angle); let y fish.startY fish.t * Math.sin(fish.angle); // 垂直方向摆动幅值20像素频率0.02 const sway Math.sin(fish.t * 0.02 fish.phase) * 20; const perpendicular fish.angle Math.PI / 2; x Math.cos(perpendicular) * sway; y Math.sin(perpendicular) * sway; fish.x x; fish.y y; }逻辑说明phase是每条鱼的初始相位偏移让鱼群里的每一条不是同步左右摆否则会像队列操一样整齐非常穿帮。t是累计漂移距离不是帧序号这样即使帧率波动鱼的前进距离始终由baseSpeed和deltaTime决定不会忽快忽慢。20像素的幅值是个平衡点太小看不出摆尾太大会让鱼看起来像喝醉了一样走出S形。参数说明baseSpeed按鱼的种类定小丑鱼跑快一点石斑鱼慢一点Boss鱼要有自己的“巡航速度”。angle是生成时定好的可以沿屏幕四个边缘生成指向对侧任意角度只要保证不会瞬间掉头就行。鱼游出屏幕边界后回收鱼池然后再从另一个边生成新的一批这样无限循环。3.3 碰撞检测子弹不是点鱼也不是圆要按扫掠线段算捕鱼中最容易翻车的就是碰撞检测子弹速度一快一帧里子弹从鱼的左边穿到右边直接漏检。正确的做法是把上一帧位置和当前帧位置连成一条线段检测这条线段与鱼之间的距离是否小于子弹半径加鱼半径之和。这种检测在计算几何里叫“线段与圆的最近距离检测”。// 扫掠碰撞子弹上一帧位置到当前帧位置的线段与鱼圆心做最近距离检测 function hitTestBulletFish(bullet, fish) { const px bullet.prevX, py bullet.prevY; const cx bullet.x, cy bullet.y; const fx fish.x, fy fish.y; const r fish.radius bullet.radius; const dx cx - px; const dy cy - py; // 线段长度平方防止除零 const lenSq dx * dx dy * dy; if (lenSq 0) { return Math.hypot(fx - px, fy - py) r; } // 投影系数t限制在0到1之间表示最近点在原线段上 const t Math.max(0, Math.min(1, ((fx - px) * dx (fy - py) * dy) / lenSq)); const nearestX px dx * t; const nearestY py dy * t; return Math.hypot(fx - nearestX, fy - nearestY) r; }逻辑说明用向量投影找到线段上离鱼心最近的点再算欧几里得距离。t的作用是关键如果投影落在线段之外就钳制到端点避免把线段延长线上的区域误判为命中。这样子弹即使每帧飞行50像素也能捕捉到半径只有20像素的小鱼。参数说明fish.radius不是贴图宽高的一半而是美术上“可以被击中”的椭圆内切圆半径一般给贴图宽度的四分之一到三分之一最顺手。bullet.radius通常设6到10太大玩家会感觉“子弹没碰到鱼就死了”太小又要求精瞄点击反应上会很累。3.4 鱼阵生成用一组配置驱动不写死脚本运营级捕鱼平台需要参数可调策划希望在不改代码情况下就能调整鱼的密度和种类。常见做法是做一个波次配置表每一波鱼阵包含生成布局、鱼种类、数量、速度区间。下面这个结构能直接跑。// 鱼阵配置按波次生成适合从JSON读取或从后台下发 const waveConfigs [ { waveId: 1, layout: fan, // fan扇形、line直线、circle环绕 fishTypes: [small, mid, big], spawnCount: 18, radius: 160, speedRange: [1.2, 2.5] }, { waveId: 2, layout: line, fishTypes: [small], spawnCount: 30, radius: 200, speedRange: [2.0, 3.0] } ]; function generateWave(config) { const fishes []; for (let i 0; i config.spawnCount; i) { // 类型随机、生成位置由layout决定 const fishType config.fishTypes[Math.floor(Math.random() * config.fishTypes.length)]; const speed config.speedRange[0] Math.random() * (config.speedRange[1] - config.speedRange[0]); const angle Math.random() * Math.PI * 2; fishes.push({ fishType, speed, angle, phase: Math.random() * Math.PI * 2 }); } return fishes; }逻辑说明把鱼的生成抽象成配置而不是写死在更新循环里后续做起平台联运时不同的渠道想调难度直接改JSON或者后台接口下发配置就好。speedRange是一个线性插值区间每条鱼在区间内随机取一个速度保证鱼群不是完全同步冲过去更有自然感。radius在扇形布局里表示生成点与屏幕中心的半径距离扇形生成的时候把半径和角度随机组合分布就会形成一堆鱼从右下角涌过来的效果。参数说明spawnCount直接影响性能。普通杂鱼波次30条是安全的Boss波次把数量降到10条单条血量提高视觉上更有压迫感反而不会造成性能瓶颈。speedRange的单位是每帧推进多少单位如果你用的是像素帧率注意和前面的deltaTime乘以baseSpeed保持一致这个区间一般不要超过[1, 4]太快的鱼反应不过来也容易穿过碰撞检测逻辑。4. 从“源码”到“捕鱼平台”倍率结算、同步、防刷三关躲不掉4.1 倍率配置吐分节奏比命中率更影响玩家留存捕鱼平台源码和服务端有关的第一个核心是倍率。这里的倍率不是html5视频倍速那种播放速度而是金币倍率。玩家花1个币打小丑鱼命中得3个币花10个币打鲨鱼命中得50个币。数值上看起来是简单的乘除但直接把这个表写死在浏览器里等着你的就是改一个数值要发一个包、每次活动调平衡都要等前端排期。{ bets: [1, 10, 50, 100, 500], fishRates: { small: 3, mid: 12, big: 50, boss: 300 }, gameRtp: 0.88, jackpotReserve: 0.05 }参数说明gameRtp是核心数值RTP的意思是从长期看玩家投入的金币和系统回报金币的比例0.88意味着玩家玩得越久平均每投入100金币能拿回88金币。平台控盘不是靠某一条鱼的概率而是靠这一整张表的加权期望。jackpotReserve表示每次抽水拿5%注入奖池这部分不参与普通倍率。这个配置要放在服务端客户端只拿展示倍数真正的命中判定由服务端算法结算后下推。逻辑说明捕鱼平台如果做成联网的命中判定不能全部交给客户端不然随便一个抓包工具改返回就能给自己刷金币。常见做法是客户端把“开火事件、目标鱼、当前倍率”上报服务端根据鱼的血量和概率模型决定这一发是否命中再下发“命中鱼种金币变动”给所有在同一个房间的玩家。4.2 同步方案用随机种子和帧同步而不是每帧广播鱼位置联网捕鱼最忌讳就是把每条鱼的位置逐帧广播一个房间里30个人每帧30条鱼带宽会爆。业界用得最多的是“种子同步”服务端生成一波鱼阵时只广播一个种子和起始时间所有客户端用同样的伪随机算法生成一模一样的鱼阵然后各自本地模拟游动路径。这样只需要在开火、命中、Boss变化这类关键事件上通讯。# 服务端生成种子并广播伪代码实际用Twisted/Node的任意一个WebSocket后端都行 import random seed random.randint(0, 2**31 - 1) ts int(time.time()) broadcast_to_room(room_id, { event: wave_start, seed: seed, wave_id: 2, start_ts: ts })逻辑说明客户端收到seed后用同一个PRNG按顺序生成鱼阵只要所有客户端开始时刻一致、算法一致、游动参数一致最终屏幕上鱼的位置就是一致的。这种方案的好处是同步成本极低延迟只在开火和结算时体现。注意不要用Math.random做种子同步因为它不可指定种子要用mulberry32或xorshift这类可复现的伪随机算法并且所有客户端要用同一套实现。参数说明开始时刻start_ts是关键参数客户端要做时钟同步通常先请求一次服务器时间算出差值然后用本地时间加差值作为渲染时间。否则两个手机网络延迟差100毫秒鱼阵错位10个像素肉眼可见的不一致一到开火命中就会露馅。4.3 Web适配手机上“能跑”和“跑得顺”是两码事同一套HTML5捕鱼源码在PC浏览器、iPhone的WKWebView、Android的WebView里表现完全不同。真机调试适配是绕不开的下面是踩过坑后我固定下来的一套适配参数。环境关键适配点建议配置PC Chrome鼠标精准、可调窗口按设计稿缩放锁定最小宽度iOS WKWebView触摸事件要处理touchend延迟CSS加上touch-action: none音频需用户手势解锁Android WebView同类WebView碎片化严重硬件加速强制开启关闭可访问性缩放微信内置浏览器可能拦截Canvas帧率用X5内核时注意内存上限对象池大小减小20%参数说明iOS的click事件在捕鱼里会有300毫秒左右延迟必须用pointerdown或touchstart。WKWebView里如果用户没有进行过任何触摸交互AudioContext是悬挂状态需要在第一次点击时resume一次。Android WebView在部分国产ROM上默认关闭硬件加速导致Canvas退化成CPU绘制帧率砍半。逻辑说明整套适配的核心是“把最低端机型作为基准”。我在实际项目中把一台六百块的Android测试机作为标准运行目标是它的帧率不掉到30以下。高端机性能上限不是瓶颈低端机能不能流畅跑才是平台留存的关键。4.4 防刷与异常检测客户端只负责表现服务端只负责判权捕鱼平台的防刷不是靠加密JS因为JS代码在浏览器里对用户是透明的。web安全里最基本的常识是任何只在前端做的校验都可以被绕过。常见的防刷手段第一是服务端校验玩家的开枪频率同一房间同一玩家每秒射击次数超过阈值直接拒绝第二是命中结果必须由服务端随机算法产出客户端只是把开火意图发过来第三是如果客户端上报的子弹位置离炮台角度太离谱判定为修改客户端连接暂时冻结。这三点能让95%的普通篡改失效。更高级的手段是对WebSocket消息做签名防中间人修改那属于接入安全SDK的范畴中小项目用前三步就够扛了。你可以把捕鱼看成一个弱交互的实时游戏它的操作频率比FPS低所以服务端的压力也小。一台普通的云服务器跑WebSocket服务端承载几千个在线房间不是问题真正的压力在房间内的广播和金币流水落库。5. 避坑手册HTML5捕鱼达人开发中我踩过的五个实打实的坑5.1 背景图发虚devicePixelRatio没有归一化现象游戏背景在iPhone和高端Android上看起来发虚边缘模糊水波纹动起来有锯齿感。原因canvas的绘制尺寸和CSS尺寸不一致。开发者直接按设计稿尺寸建PIXI.Application而物理像素和逻辑像素之间存在devicePixelRatio的倍数关系没有乘以这个系数导致画面被拉伸。解决初始化时显式传resolution并把autoDensity设为true。我在前面的骨架代码里已经写了Math.min(window.devicePixelRatio || 1, 2)这个2是深水区超过2的dpr对捕鱼这种大色块海面来说几乎看不出差异只是白耗显存。5.2 鱼速忽快忽慢requestAnimationFrame没算deltaTime现象鱼群前进像“低频抖动”顶着60帧跑的时候正常一旦切后台再切回来鱼群瞬间冲出去一大截。原因后台时rAF停止切回前台时浏览器补跑一帧或者直接跳帧代码里写的每帧前进2像素就变成了这一次实际跨过了几百毫秒。解决统一用ticker.deltaTime相乘或者在每一帧开头自算delta (now - lastTime) / 16.6667。这个坑在视频播放倍速的体验里很好理解——倍速播放本质是按帧时间缩放内容而不是每帧都填同一个步长。所有实体运动逻辑都要带上deltaTime包括鱼的前进、子弹飞行、金币弹跳。5.3 子弹穿鱼而过漏检不是巧合是算法缺陷现象子弹很慢的时候命中正常一旦把子弹速度调到10以上经常看见子弹从鱼身穿过但不触发命中动画。原因子弹一帧移动10像素一条小丑鱼的命中半径可能只有8像素上一帧子弹在鱼的左侧下一帧已经在右侧两个静态点都在鱼半径之外但中间的线段穿过了鱼身。这是典型的“点碰撞”缺陷。解决换成3.3节里的线段与圆的最近距离检测用子弹的prevX、prevY和当前x、y做线段碰撞对象用鱼心到线段的垂直距离。我在已实现的捕鱼项目里这个改动把漏检率从明显可见降到了几乎为零。5.4 iOS Safari点不出声音Web Audio的自动播放策略现象音乐和鱼被击中的音效在Android上正常iOS上打开页面后需要点很多次屏幕才突然有声音或者自始至终没有声音。原因iOS Safari要求AudioContext必须由用户手势事件触发页面加载时自动创建且播放是不被允许的这是平台策略不是写代码能绕过的。解决在游戏的第一个“开始游戏”按钮的touchstart回调里创建AudioContext并调用audioCtx.resume()然后在catch里吞掉可能的报错。另外给音效播放函数加一个宽松的加载方式不要让AudioContext在每帧都创建否则反复创建会累积延迟。5.5 WebGL上下文丢失长时间热更新后画面直接黑屏现象游戏运行一段时间后切到后台再切回来整个画面黑屏但音乐还在播放点击事件也没失效。原因移动端在资源紧张时会回收WebGL上下文浏览器丢上下文后canvas内容被清空PixiJS如果不处理这个方法就恢复不了。解决监听app.renderer.contextlost和contextrestored事件。contextlost时暂停ticker并提示用户“游戏挂起”contextrestored后重新加载核心纹理并回到大厅场景。不要尝试在丢失状态下一帧一帧重建开销巨大且容易二次崩溃。完整代码里要加的这个恢复流程是平台长期运行的后悔药。6. 进阶调试技巧用虚拟摇杆做多炮台联动一套模板通吃移动端捕鱼平台源码如果只是单炮台打天下手感上会缺很多。很多商业版本的进阶玩法是双炮台甚至四炮台但移动端屏幕空间有限不可能每个炮台都单独瞄准。我常用的做法是做一主一副两个炮台主炮台跟随手指位置瞄准和发射副炮台固定朝向屏幕中心偏左或偏右30度自动在N秒间隔后发射低倍率子弹。这种玩法对操作门槛很低又能明显提升金币消耗速度付费活动也好设计。实现上核心是一个虚拟摇杆状态映射到主炮台角度// 虚拟摇杆按住屏幕左半区时摇杆控制主炮方向 const joystick { active: false, baseX: 0, baseY: 0, dx: 0, dy: 0 }; function onTouchStart(event) { const touch event.touches[0]; joystick.active true; joystick.baseX touch.clientX; joystick.baseY touch.clientY; joystick.dx 0; joystick.dy 0; } function onTouchMove(event) { const touch event.touches[0]; const dx touch.clientX - joystick.baseX; const dy touch.clientY - joystick.baseY; const len Math.hypot(dx, dy); const maxLen 60; joystick.dx len 0 ? (dx / len) * Math.min(len, maxLen) / maxLen : 0; joystick.dy len 0 ? (dy / len) * Math.min(len, maxLen) / maxLen : 0; const angle Math.atan2(joystick.dy, joystick.dx); game.cannon.angle angle; }逻辑说明摇杆半径maxLen设成60像素超出后也不再扩大避免手指滑到屏幕边缘时摇杆灵敏度丢失。这里归一化是把位移量映射到-1到1区间后面想接调速功能会很方便。副炮台的自动发射间隔单独用计数器控制不跟主炮台的ticker共用节奏方便后期服务器下发不同的自动开火频率。参数说明副炮台开火倍率建议固定为玩家当前倍率的10%-20%给玩家一种“挂机也有收益”的预期。双炮台的碰撞检测和单炮台一样子弹池需要额外扩容20%。这套虚拟摇杆逻辑稍微改一改就能复用到大鱼瞄准、Boss锁定、道具拖动等场景。我自己的调试习惯是先用Chrome的设备模拟器跑30分钟再上低端Android真机跑后者的表现几乎决定了这套源码能撑住多大规模的真实玩家。希望这套从渲染、玩法到服务的拆解能帮你在改HTML5捕鱼平台源码时少走几段冤枉路。本文还有配套的精品资源点击获取
HTML5捕鱼游戏开发实战：从渲染架构到碰撞检测与同步
简介基于HTML5技术栈实现的捕鱼达人游戏完整工程源码主要运用Canvas绘图、JavaScript游戏逻辑与Web Audio音效接口适合Web前端学习者、游戏开发入门者以及希望独立完成H5小游戏的开发者可系统了解网页游戏从场景渲染、动画更新到用户交互的实现方法。压缩包共85个文件、约4.4MB其中包含53张PNG图片素材、13个JavaScript脚本、10个plist、3个json、3个tps配置文件并配有可直接运行的index.html。文件按src、images、js等目录组织资源与逻辑分离便于替换美术素材和调整游戏参数。已有1286人学习/下载。源码内含鱼群管理、子弹发射、炮台旋转、得分统计等完整模块通过fishjoy.js和fishjoy.game.js可以深入学习碰撞检测、精灵动画、requestAnimationFrame循环、本地存储与响应式适配配套的plist/json配置也展示了图集与动画帧数据的组织方式适合作为课程设计或简历项目进行二次开发。1. HTML5捕鱼达人不是换皮小游戏是能跑通一整条小游戏链路的前端实战HTML5捕鱼达人源码、捕鱼平台源码、web这三组词拼在一起大概率对应两种诉求要么想交一份课程设计或作品展示要么想把一个单机Demo改造成能在微信生态、浏览器、Android/iOS WebView里同时跑的运营级小游戏。捕鱼玩法外行看着就是“点一下、打一炮、鱼翻了”但做起来之后会发现炮台角度、子弹出膛、鱼的曲线游动、碰撞判定、倍率结算、掉线同步几乎覆盖了小游戏开发里最容易被写坏的那批模块这也是它长期以来被当成前端练手热门项目的原因。适合谁前端想转小游戏的人、接外包改造平台源码的团队、以及正在找html5网页设计作业方向的学生。接下来这一路我按一个可复现的H5捕鱼最小框架来拆每个模块都能独立跑起来。2. 技术底座怎么选Canvas 2D还是PixiJS这一步决定了你后面会不会翻车2.1 三种渲染方案的取舍先给结论纯课程设计用Canvas 2D做“捕鱼平台源码”用PixiJS除非你本身有自研渲染器需求才会去碰原生WebGL。捕鱼游戏的特点是同一屏对象数量极大鱼群、子弹、粒子、金币飞行动画、水下光效叠在一起普通手机上一百多个draw image就已经开始掉帧。方案渲染方式同屏对象上限上手成本适合场景主要坑Canvas 2D2D上下文重绘200 draw call以内最低作业Demo、原型验证鱼一多帧率直线下降合批困难原生WebGLGPU着色器极高但代码量爆炸最高自研渲染引擎、特殊特效矩阵、着色器调试成本高PixiJSWebGL封装纹理合批几百到上千个精灵中运营级H5捕鱼平台素材规格、对象池、上下文丢失选PixiJS还有个现实原因它把纹理合批和渲染循环封装好了开发者可以把精力放在玩法逻辑上而玩法逻辑才是一套捕鱼平台源码真正值钱的地方。Canvas 2D在我的实盘比较里中等手机屏幕上五十条鱼加上炮台粒子就开始卡而PixiJS的合批能把多次draw image合并成一次纹理绘制请求。原生WebGL不是不好是没必要把两三天能调完的渲染细节拖成两周的shader调试。这里提醒一句游戏倍率和html5视频倍速是两个概念渲染层不要和结算层混在一起调。2.2 最小可跑通的项目骨架从CDN引用到第一帧画面捕鱼项目的目录结构不用追求复杂我一般按assets和js两层铺开静态资源只放图片逻辑文件按渲染、玩法、网络、工具四个维度切。下面这个骨架是PixiJS的7.x写法CDN里的版本号按你安装时的实际版本替换源码里不要锁死我这里的占位版本。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno titleHTML5捕鱼达人框架/title style html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #003c66; } canvas { display: block; } /style /head body script srchttps://cdn.jsdelivr.net/npm/pixi.js7.x.x/dist/pixi.min.js/script script srcjs/main.js/script /body /htmlviewport的设置有三个关键点宽度跟随设备但禁止用户缩放高度用全屏overflow hidden避免捕鱼过程中触发页面滚动。捕鱼游戏在手机上是横屏为主如果你的游戏设计稿是竖屏meta里的viewport要改成设备宽度320或375对应的样式但不要用maximum-scale1之外的缩放参数否则iOS Safari在输入框弹出和旋转时会出诡异白边。// js/main.js 入口 const app new PIXI.Application({ width: 750, // 设计稿宽度 height: 1334, // 设计稿高度 resolution: Math.min(window.devicePixelRatio || 1, 2), // 像素比最高压到2 autoDensity: true, // 让canvas尺寸自动匹配分辨率 antialias: true, // 低分辨率下开抗锯齿如果已经在用高清图可以关掉 backgroundColor: 0x003c66 }); document.body.appendChild(app.view); PIXI.Assets.load([assets/sea.jpg, assets/fish_1.png]).then((assets) { const bg PIXI.Sprite.from(assets[assets/sea.jpg]); bg.width app.screen.width; bg.height app.screen.height; app.stage.addChild(bg); const fish PIXI.Sprite.from(assets[assets/fish_1.png]); fish.x 100; fish.y 600; app.stage.addChild(fish); // 核心用ticker的deltaTime不要自己裸用requestAnimationFrame计算 app.ticker.add((ticker) { fish.x 2 * ticker.deltaTime; }); });逻辑说明PixiJS的ticker自带基于帧间隔的deltaTime上一帧到这一帧如果是16ms就是1如果因为浏览器卡顿变成32ms就会是2这样鱼的速度不会随帧率波动而飘。我在实际开发中见过不少新手直接写fish.x 260Hz屏幕上看起来正常一到帧率不稳的Android WebView里鱼就像在瞬移。这种写法不仅仅在捕鱼里成立任何H5游戏都按这套节奏做帧循环。参数说明width和height是设计稿尺寸不是css尺寸autoDensity为true后Pixi会自动用resolution乘设计稿并设置canvas的样式尺寸。resolution这里取window.devicePixelRatio的2封顶很关键iPhone的dpr已经到3但游戏素材若按3倍资源去做内存占用会翻好几倍捕鱼这种需要长时间运行的页面特别容易在iOS上被系统杀进程。2.3 决定同屏上限的三个参数对象池、精灵数量、缩放策略捕鱼平台源码能不能撑住人多时的鱼群不是看显卡而是看对象的创建方式。每条鱼都是一个Pixi Sprite频繁new和销毁Sprite会让浏览器频繁触发垃圾回收表现就是卡顿一瞬、声音断一下。更可怕的是你在低端Android上会看到帧率从60掉到20之后再也回不来因为GC把主线程堵死了。// 对象池鱼、子弹、金币飞行动画统一走这个逻辑 class SpritePool { constructor(texture, size) { this.texture texture; this.pool []; this.activeList []; for (let i 0; i size; i) { const sprite new PIXI.Sprite(texture); sprite.visible false; this.pool.push(sprite); } } spawn(x, y, angle) { const sprite this.pool.pop() || new PIXI.Sprite(this.texture); sprite.x x; sprite.y y; sprite.angle angle; sprite.visible true; this.activeList.push(sprite); return sprite; } recycle(sprite) { sprite.visible false; const idx this.activeList.indexOf(sprite); if (idx 0) this.activeList.splice(idx, 1); this.pool.push(sprite); } }逻辑说明spawn时优先从池里取池空了才new回收时不真正销毁而是置为不可见并放回池子。visiblefalse的精灵不参与渲染所以池的大小就是同屏渲染上限。我这个池默认值一般给80条鱼如果你做的是大鲨鱼Boss战池里放不下太多条大模型可以把大Boss单独做一个池小杂鱼一个池避免大图占满显存。参数说明对象池size不是越大越好。移动端显存是硬约束100条鱼加100发子弹加50个金币特效已经把一款中端机的GPU压得差不多了。我在一个真实捕鱼项目里测试过中等偏上的骁龙处理器同屏活跃精灵数控制在180以内能稳定跑60Hz超过220就开始掉帧。你需要把这几个数字当成首发参数去调而不是把每条鱼的贴图分辨率当成唯一变量。3. 玩法四核心炮台旋转、子弹弹道、鱼阵生成、碰撞检测3.1 炮台旋转与炮弹发射Math.atan2是唯一正解捕鱼的炮台不是8方向摇杆那种离散方向是尽可能平滑跟随鼠标或手指方向的360度旋转。实现上用Math.atan2得到鼠标相对炮台中心的角度然后用Pixi的angle属性直接赋值。这里有个细节如果炮台是一个容器且有子元素给容器转向的时候子元素的坐标系已经被旋转了不需要再单独计算子弹的父级坐标。// 瞄准鼠标/手指的屏幕坐标转成炮台局部坐标 function aimCannon(event) { const rect app.view.getBoundingClientRect(); const clientX event.clientX || event.touches[0].clientX; const clientY event.clientY || event.touches[0].clientY; const pointerX clientX - rect.left; const pointerY clientY - rect.top; const cannon game.cannon; // 炮台精灵锚点设在炮座中心 // Pixi的angle属性是弧度不需要手动转成角度 cannon.angle Math.atan2(pointerY - cannon.y, pointerX - cannon.x); game.aimAngle cannon.angle; } // 发射子弹初始位置从炮口出来不能从炮台中心冒出来 function fireBullet() { const cannon game.cannon; const angle cannon.angle; const length 60; // 炮管长度视觉上从炮口出膛 const x cannon.x Math.cos(angle) * length; const y cannon.y Math.sin(angle) * length; const bullet game.bulletPool.spawn(x, y, angle); bullet.speed 8; bullet.life 120; // 帧数寿命超过自动回收 bullet.prevX x; bullet.prevY y; }逻辑说明发射前必须记录prevX和prevY这是碰撞检测连续性的前提。捕鱼子弹不是光速飞行的激光它有飞行轨迹和飞行时间上一帧位置和当前帧位置之间这段线段才是碰撞检测真正要检测的对象。如果把子弹当做一个静态点去检测高速子弹会直接穿过鱼模型的边缘。参数说明speed8是按每帧走的像素数来定义的配合120帧的寿命一颗子弹最远能飞960像素这个射程大概覆盖一块手机屏幕的对角线打到屏幕边缘后消失或从引擎里回收。length60是炮口偏移量跟你的炮台美术资源有关炮管长的模型记得把它调整到炮口贴图的正前方位置。3.2 鱼的游动路径不等于直线加随机用基础直线叠加正弦摆动大多数捕鱼源码的鱼就是一个方向走到底看着很呆。好的鱼阵需要在一条大致方向线上叠加轻微的左右摆动给人一种海洋生物游动的感觉。实现上我不用贝塞尔曲线做全路径规划贝塞尔的问题在于一旦路径太长曲线控制点多了以后计算量大而且鱼转向时容易显得机械。更稳妥的做法是基础直线速度决定鱼的前进方向再叠加一个垂直于前进方向的低频正弦摆动。// 鱼群游动baseSpeed控制往前冲正弦控制摆尾 function updateFishGroup(fish, deltaTime) { fish.t deltaTime * fish.baseSpeed; // 基础方向 let x fish.startX fish.t * Math.cos(fish.angle); let y fish.startY fish.t * Math.sin(fish.angle); // 垂直方向摆动幅值20像素频率0.02 const sway Math.sin(fish.t * 0.02 fish.phase) * 20; const perpendicular fish.angle Math.PI / 2; x Math.cos(perpendicular) * sway; y Math.sin(perpendicular) * sway; fish.x x; fish.y y; }逻辑说明phase是每条鱼的初始相位偏移让鱼群里的每一条不是同步左右摆否则会像队列操一样整齐非常穿帮。t是累计漂移距离不是帧序号这样即使帧率波动鱼的前进距离始终由baseSpeed和deltaTime决定不会忽快忽慢。20像素的幅值是个平衡点太小看不出摆尾太大会让鱼看起来像喝醉了一样走出S形。参数说明baseSpeed按鱼的种类定小丑鱼跑快一点石斑鱼慢一点Boss鱼要有自己的“巡航速度”。angle是生成时定好的可以沿屏幕四个边缘生成指向对侧任意角度只要保证不会瞬间掉头就行。鱼游出屏幕边界后回收鱼池然后再从另一个边生成新的一批这样无限循环。3.3 碰撞检测子弹不是点鱼也不是圆要按扫掠线段算捕鱼中最容易翻车的就是碰撞检测子弹速度一快一帧里子弹从鱼的左边穿到右边直接漏检。正确的做法是把上一帧位置和当前帧位置连成一条线段检测这条线段与鱼之间的距离是否小于子弹半径加鱼半径之和。这种检测在计算几何里叫“线段与圆的最近距离检测”。// 扫掠碰撞子弹上一帧位置到当前帧位置的线段与鱼圆心做最近距离检测 function hitTestBulletFish(bullet, fish) { const px bullet.prevX, py bullet.prevY; const cx bullet.x, cy bullet.y; const fx fish.x, fy fish.y; const r fish.radius bullet.radius; const dx cx - px; const dy cy - py; // 线段长度平方防止除零 const lenSq dx * dx dy * dy; if (lenSq 0) { return Math.hypot(fx - px, fy - py) r; } // 投影系数t限制在0到1之间表示最近点在原线段上 const t Math.max(0, Math.min(1, ((fx - px) * dx (fy - py) * dy) / lenSq)); const nearestX px dx * t; const nearestY py dy * t; return Math.hypot(fx - nearestX, fy - nearestY) r; }逻辑说明用向量投影找到线段上离鱼心最近的点再算欧几里得距离。t的作用是关键如果投影落在线段之外就钳制到端点避免把线段延长线上的区域误判为命中。这样子弹即使每帧飞行50像素也能捕捉到半径只有20像素的小鱼。参数说明fish.radius不是贴图宽高的一半而是美术上“可以被击中”的椭圆内切圆半径一般给贴图宽度的四分之一到三分之一最顺手。bullet.radius通常设6到10太大玩家会感觉“子弹没碰到鱼就死了”太小又要求精瞄点击反应上会很累。3.4 鱼阵生成用一组配置驱动不写死脚本运营级捕鱼平台需要参数可调策划希望在不改代码情况下就能调整鱼的密度和种类。常见做法是做一个波次配置表每一波鱼阵包含生成布局、鱼种类、数量、速度区间。下面这个结构能直接跑。// 鱼阵配置按波次生成适合从JSON读取或从后台下发 const waveConfigs [ { waveId: 1, layout: fan, // fan扇形、line直线、circle环绕 fishTypes: [small, mid, big], spawnCount: 18, radius: 160, speedRange: [1.2, 2.5] }, { waveId: 2, layout: line, fishTypes: [small], spawnCount: 30, radius: 200, speedRange: [2.0, 3.0] } ]; function generateWave(config) { const fishes []; for (let i 0; i config.spawnCount; i) { // 类型随机、生成位置由layout决定 const fishType config.fishTypes[Math.floor(Math.random() * config.fishTypes.length)]; const speed config.speedRange[0] Math.random() * (config.speedRange[1] - config.speedRange[0]); const angle Math.random() * Math.PI * 2; fishes.push({ fishType, speed, angle, phase: Math.random() * Math.PI * 2 }); } return fishes; }逻辑说明把鱼的生成抽象成配置而不是写死在更新循环里后续做起平台联运时不同的渠道想调难度直接改JSON或者后台接口下发配置就好。speedRange是一个线性插值区间每条鱼在区间内随机取一个速度保证鱼群不是完全同步冲过去更有自然感。radius在扇形布局里表示生成点与屏幕中心的半径距离扇形生成的时候把半径和角度随机组合分布就会形成一堆鱼从右下角涌过来的效果。参数说明spawnCount直接影响性能。普通杂鱼波次30条是安全的Boss波次把数量降到10条单条血量提高视觉上更有压迫感反而不会造成性能瓶颈。speedRange的单位是每帧推进多少单位如果你用的是像素帧率注意和前面的deltaTime乘以baseSpeed保持一致这个区间一般不要超过[1, 4]太快的鱼反应不过来也容易穿过碰撞检测逻辑。4. 从“源码”到“捕鱼平台”倍率结算、同步、防刷三关躲不掉4.1 倍率配置吐分节奏比命中率更影响玩家留存捕鱼平台源码和服务端有关的第一个核心是倍率。这里的倍率不是html5视频倍速那种播放速度而是金币倍率。玩家花1个币打小丑鱼命中得3个币花10个币打鲨鱼命中得50个币。数值上看起来是简单的乘除但直接把这个表写死在浏览器里等着你的就是改一个数值要发一个包、每次活动调平衡都要等前端排期。{ bets: [1, 10, 50, 100, 500], fishRates: { small: 3, mid: 12, big: 50, boss: 300 }, gameRtp: 0.88, jackpotReserve: 0.05 }参数说明gameRtp是核心数值RTP的意思是从长期看玩家投入的金币和系统回报金币的比例0.88意味着玩家玩得越久平均每投入100金币能拿回88金币。平台控盘不是靠某一条鱼的概率而是靠这一整张表的加权期望。jackpotReserve表示每次抽水拿5%注入奖池这部分不参与普通倍率。这个配置要放在服务端客户端只拿展示倍数真正的命中判定由服务端算法结算后下推。逻辑说明捕鱼平台如果做成联网的命中判定不能全部交给客户端不然随便一个抓包工具改返回就能给自己刷金币。常见做法是客户端把“开火事件、目标鱼、当前倍率”上报服务端根据鱼的血量和概率模型决定这一发是否命中再下发“命中鱼种金币变动”给所有在同一个房间的玩家。4.2 同步方案用随机种子和帧同步而不是每帧广播鱼位置联网捕鱼最忌讳就是把每条鱼的位置逐帧广播一个房间里30个人每帧30条鱼带宽会爆。业界用得最多的是“种子同步”服务端生成一波鱼阵时只广播一个种子和起始时间所有客户端用同样的伪随机算法生成一模一样的鱼阵然后各自本地模拟游动路径。这样只需要在开火、命中、Boss变化这类关键事件上通讯。# 服务端生成种子并广播伪代码实际用Twisted/Node的任意一个WebSocket后端都行 import random seed random.randint(0, 2**31 - 1) ts int(time.time()) broadcast_to_room(room_id, { event: wave_start, seed: seed, wave_id: 2, start_ts: ts })逻辑说明客户端收到seed后用同一个PRNG按顺序生成鱼阵只要所有客户端开始时刻一致、算法一致、游动参数一致最终屏幕上鱼的位置就是一致的。这种方案的好处是同步成本极低延迟只在开火和结算时体现。注意不要用Math.random做种子同步因为它不可指定种子要用mulberry32或xorshift这类可复现的伪随机算法并且所有客户端要用同一套实现。参数说明开始时刻start_ts是关键参数客户端要做时钟同步通常先请求一次服务器时间算出差值然后用本地时间加差值作为渲染时间。否则两个手机网络延迟差100毫秒鱼阵错位10个像素肉眼可见的不一致一到开火命中就会露馅。4.3 Web适配手机上“能跑”和“跑得顺”是两码事同一套HTML5捕鱼源码在PC浏览器、iPhone的WKWebView、Android的WebView里表现完全不同。真机调试适配是绕不开的下面是踩过坑后我固定下来的一套适配参数。环境关键适配点建议配置PC Chrome鼠标精准、可调窗口按设计稿缩放锁定最小宽度iOS WKWebView触摸事件要处理touchend延迟CSS加上touch-action: none音频需用户手势解锁Android WebView同类WebView碎片化严重硬件加速强制开启关闭可访问性缩放微信内置浏览器可能拦截Canvas帧率用X5内核时注意内存上限对象池大小减小20%参数说明iOS的click事件在捕鱼里会有300毫秒左右延迟必须用pointerdown或touchstart。WKWebView里如果用户没有进行过任何触摸交互AudioContext是悬挂状态需要在第一次点击时resume一次。Android WebView在部分国产ROM上默认关闭硬件加速导致Canvas退化成CPU绘制帧率砍半。逻辑说明整套适配的核心是“把最低端机型作为基准”。我在实际项目中把一台六百块的Android测试机作为标准运行目标是它的帧率不掉到30以下。高端机性能上限不是瓶颈低端机能不能流畅跑才是平台留存的关键。4.4 防刷与异常检测客户端只负责表现服务端只负责判权捕鱼平台的防刷不是靠加密JS因为JS代码在浏览器里对用户是透明的。web安全里最基本的常识是任何只在前端做的校验都可以被绕过。常见的防刷手段第一是服务端校验玩家的开枪频率同一房间同一玩家每秒射击次数超过阈值直接拒绝第二是命中结果必须由服务端随机算法产出客户端只是把开火意图发过来第三是如果客户端上报的子弹位置离炮台角度太离谱判定为修改客户端连接暂时冻结。这三点能让95%的普通篡改失效。更高级的手段是对WebSocket消息做签名防中间人修改那属于接入安全SDK的范畴中小项目用前三步就够扛了。你可以把捕鱼看成一个弱交互的实时游戏它的操作频率比FPS低所以服务端的压力也小。一台普通的云服务器跑WebSocket服务端承载几千个在线房间不是问题真正的压力在房间内的广播和金币流水落库。5. 避坑手册HTML5捕鱼达人开发中我踩过的五个实打实的坑5.1 背景图发虚devicePixelRatio没有归一化现象游戏背景在iPhone和高端Android上看起来发虚边缘模糊水波纹动起来有锯齿感。原因canvas的绘制尺寸和CSS尺寸不一致。开发者直接按设计稿尺寸建PIXI.Application而物理像素和逻辑像素之间存在devicePixelRatio的倍数关系没有乘以这个系数导致画面被拉伸。解决初始化时显式传resolution并把autoDensity设为true。我在前面的骨架代码里已经写了Math.min(window.devicePixelRatio || 1, 2)这个2是深水区超过2的dpr对捕鱼这种大色块海面来说几乎看不出差异只是白耗显存。5.2 鱼速忽快忽慢requestAnimationFrame没算deltaTime现象鱼群前进像“低频抖动”顶着60帧跑的时候正常一旦切后台再切回来鱼群瞬间冲出去一大截。原因后台时rAF停止切回前台时浏览器补跑一帧或者直接跳帧代码里写的每帧前进2像素就变成了这一次实际跨过了几百毫秒。解决统一用ticker.deltaTime相乘或者在每一帧开头自算delta (now - lastTime) / 16.6667。这个坑在视频播放倍速的体验里很好理解——倍速播放本质是按帧时间缩放内容而不是每帧都填同一个步长。所有实体运动逻辑都要带上deltaTime包括鱼的前进、子弹飞行、金币弹跳。5.3 子弹穿鱼而过漏检不是巧合是算法缺陷现象子弹很慢的时候命中正常一旦把子弹速度调到10以上经常看见子弹从鱼身穿过但不触发命中动画。原因子弹一帧移动10像素一条小丑鱼的命中半径可能只有8像素上一帧子弹在鱼的左侧下一帧已经在右侧两个静态点都在鱼半径之外但中间的线段穿过了鱼身。这是典型的“点碰撞”缺陷。解决换成3.3节里的线段与圆的最近距离检测用子弹的prevX、prevY和当前x、y做线段碰撞对象用鱼心到线段的垂直距离。我在已实现的捕鱼项目里这个改动把漏检率从明显可见降到了几乎为零。5.4 iOS Safari点不出声音Web Audio的自动播放策略现象音乐和鱼被击中的音效在Android上正常iOS上打开页面后需要点很多次屏幕才突然有声音或者自始至终没有声音。原因iOS Safari要求AudioContext必须由用户手势事件触发页面加载时自动创建且播放是不被允许的这是平台策略不是写代码能绕过的。解决在游戏的第一个“开始游戏”按钮的touchstart回调里创建AudioContext并调用audioCtx.resume()然后在catch里吞掉可能的报错。另外给音效播放函数加一个宽松的加载方式不要让AudioContext在每帧都创建否则反复创建会累积延迟。5.5 WebGL上下文丢失长时间热更新后画面直接黑屏现象游戏运行一段时间后切到后台再切回来整个画面黑屏但音乐还在播放点击事件也没失效。原因移动端在资源紧张时会回收WebGL上下文浏览器丢上下文后canvas内容被清空PixiJS如果不处理这个方法就恢复不了。解决监听app.renderer.contextlost和contextrestored事件。contextlost时暂停ticker并提示用户“游戏挂起”contextrestored后重新加载核心纹理并回到大厅场景。不要尝试在丢失状态下一帧一帧重建开销巨大且容易二次崩溃。完整代码里要加的这个恢复流程是平台长期运行的后悔药。6. 进阶调试技巧用虚拟摇杆做多炮台联动一套模板通吃移动端捕鱼平台源码如果只是单炮台打天下手感上会缺很多。很多商业版本的进阶玩法是双炮台甚至四炮台但移动端屏幕空间有限不可能每个炮台都单独瞄准。我常用的做法是做一主一副两个炮台主炮台跟随手指位置瞄准和发射副炮台固定朝向屏幕中心偏左或偏右30度自动在N秒间隔后发射低倍率子弹。这种玩法对操作门槛很低又能明显提升金币消耗速度付费活动也好设计。实现上核心是一个虚拟摇杆状态映射到主炮台角度// 虚拟摇杆按住屏幕左半区时摇杆控制主炮方向 const joystick { active: false, baseX: 0, baseY: 0, dx: 0, dy: 0 }; function onTouchStart(event) { const touch event.touches[0]; joystick.active true; joystick.baseX touch.clientX; joystick.baseY touch.clientY; joystick.dx 0; joystick.dy 0; } function onTouchMove(event) { const touch event.touches[0]; const dx touch.clientX - joystick.baseX; const dy touch.clientY - joystick.baseY; const len Math.hypot(dx, dy); const maxLen 60; joystick.dx len 0 ? (dx / len) * Math.min(len, maxLen) / maxLen : 0; joystick.dy len 0 ? (dy / len) * Math.min(len, maxLen) / maxLen : 0; const angle Math.atan2(joystick.dy, joystick.dx); game.cannon.angle angle; }逻辑说明摇杆半径maxLen设成60像素超出后也不再扩大避免手指滑到屏幕边缘时摇杆灵敏度丢失。这里归一化是把位移量映射到-1到1区间后面想接调速功能会很方便。副炮台的自动发射间隔单独用计数器控制不跟主炮台的ticker共用节奏方便后期服务器下发不同的自动开火频率。参数说明副炮台开火倍率建议固定为玩家当前倍率的10%-20%给玩家一种“挂机也有收益”的预期。双炮台的碰撞检测和单炮台一样子弹池需要额外扩容20%。这套虚拟摇杆逻辑稍微改一改就能复用到大鱼瞄准、Boss锁定、道具拖动等场景。我自己的调试习惯是先用Chrome的设备模拟器跑30分钟再上低端Android真机跑后者的表现几乎决定了这套源码能撑住多大规模的真实玩家。希望这套从渲染、玩法到服务的拆解能帮你在改HTML5捕鱼平台源码时少走几段冤枉路。本文还有配套的精品资源点击获取
