简介这是一份基于HTMLCSSJS开发的“魂斗罗之突围”H5小游戏完整源码包适合前端初学者、游戏开发爱好者及个人网站站长参考。资源通过纯前端技术实现了角色移动、射击、敌人生成等经典玩法无需后端即可部署使用也可直接嵌入个人站点作为互动娱乐模块。压缩包共36个文件主要包含1个HTML入口文件、3个JavaScript逻辑脚本与32张PNG图像素材仅432KB轻量易用。其中脚本覆盖游戏主循环、碰撞处理及jQuery辅助功能图片素材则包含角色、敌人、子弹、背景地图等完整序列帧。目前已有490人学习下载源码目录结构清晰素材命名规范便于二次修改与学习研究对理解H5游戏开发流程颇有帮助。1. 为什么是 H5 魂斗罗突围一个“老玩法”在小游戏时代的复现横版射击动作游戏在 HTML5 小游戏里一直是个特殊存在它不需要后端不需要网络同步甚至不需要复杂的物理引擎核心逻辑只有位移、射击、碰撞三件事。但恰恰是这三件事决定了游戏“像不像那么回事”。魂斗罗之突围这个标题最吸引我的一点是它没有停留在“做一个能开枪的角色”而是把玩法收敛成“从敌方包围圈中杀出一条路”这一条主线条。相比改一版马里奥或者拼一个 2048这样一个完整的射击突围 Demo 更适合作为 html5 网页设计作业也适合刚接触 Canvas 游戏开发的人拿来拆解。这篇博文会把这类 H5 小游戏在工程上拆成什么样子、源码包里的文件怎么组织、哪些参数直接决定手感以及最容易踩的坑在哪里一条线讲清楚。2. 先立技术底座Canvas 渲染与角色移动的 H5 实现魂斗罗突围小游戏在浏览器里跑起来第一个要解决的问题不是画敌人而是让角色按照玩家的意图移动。而移动背后又牵出渲染循环、按键监听、状态切换三件事。大多数初学者在这一步最容易犯的错是把移动逻辑写在 keydown 事件里按一下走一格——这在射击游戏里完全不可用。正确思路是维护一个“当前按键状态表”游戏每帧读取这张表来决定角色速度。2.1 画布、游戏主循环与增量时间HTML5 小游戏的主循环用 requestAnimationFrame 是标配它和屏幕刷新率同步用户切走标签页时浏览器会自动暂停回调不会在后台白跑。const canvas document.getElementById(game); const ctx canvas.getContext(2d); let lastTime 0; function gameLoop(timestamp) { const delta Math.min((timestamp - lastTime) / 1000, 0.05); lastTime timestamp; update(delta); render(ctx); requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop);这里需要重点说明的是 delta 的换算逻辑。timestamp 是浏览器提供的高精度毫秒时间戳除以 1000 转成秒后update 函数里的速度就能用“每秒多少像素”来定义。Math.min 限幅 0.05 秒是为了防止用户切到其他标签页几秒再切回来时游戏一下子推进几秒的物理量导致角色穿越地形。如果你把这段代码写成固定间隔的 setInterval会遇到刷新率不匹配、切后台后积压回调等一系列问题所以不要用 setInterval 作为游戏主循环的载体。2.2 键盘输入映射与主角位移按键状态表是魂斗罗类横版游戏的输入标准做法。整个页面只需要监听一次 keydown 和 keyup把按键状态存进一个对象游戏循环里再查表。const keys {}; window.addEventListener(keydown, e { keys[e.code] true; }); window.addEventListener(keyup, e { keys[e.code] false; }); function update(delta) { let dx 0, dy 0; if (keys[ArrowLeft] || keys[KeyA]) dx - 1; if (keys[ArrowRight] || keys[KeyD]) dx 1; if (keys[ArrowUp] || keys[KeyW]) dy - 1; if (keys[ArrowDown] || keys[KeyS]) dy 1; // 斜向移动时做归一化避免速度变成 1.41 倍 if (dx ! 0 dy ! 0) { dx * 0.7071; dy * 0.7071; } player.vx dx * player.speed; player.vy dy * player.speed; }为什么不直接监听 keydown 修改坐标而要在 update 里做移动因为 keydown 事件会触发系统级的按键重复而且它发生在渲染循环之外无法和帧周期对齐。把状态存起来、每帧统一读取才能保证“按住方向键角色持续平滑移动”和“斜向走不比直线慢”。代码里 dx、dy 先被赋成 -1、0、1再在 update 里乘以速度这个中间层让输入逻辑和移动逻辑解耦。0.7071 是 1 除以根号 2 的近似值斜向移动时两个方向分速度各乘以它合成速度仍与直线速度一致。另外我建议用e.code而不是e.keyCode因为后者与键盘布局相关前者绑定物理键位对 AZERTY 等非美式布局也更友好。2.3 用状态机管理“站立 / 跑动 / 跳跃 / 趴下”魂斗罗的“手感”很大程度来自角色动作状态的切换。翻源码时你会看到一个 state 字段这就是一个轻量状态机。const player { x: 40, y: 300, vx: 0, vy: 0, width: 34, height: 52, state: idle, onGround: true, speed: 220, jumpForce: -520, }; function switchState(next) { if (player.state next) return; player.state next; if (next duck) { player.height 26; player.gunOffsetY 8; } else { player.height 52; player.gunOffsetY 20; } }状态切换不只是换一张图它还同步修改了碰撞盒的高度。趴下时如果碰撞盒不跟着变矮敌人的子弹会打在一个透明空气墙上这在实际试玩里非常出戏。跳跃逻辑在 update 里通过重力累积实现先给 player.vy 赋一个负的初速度比如 -520每帧把 vy 加上重力加速度常见值是 1200再让 y 累加 vy 乘以 delta。着地判定是 y 是否到达地面基准线。在这类 H5 射击小游戏中状态机字段后面往往还会带 actionLock 之类的锁用于保证出枪动作没播完时不能切到跳跃。这个细节可以留到后面调手感时再说但数据结构从第一天开始就应该为它留位。3. 射击、敌人与碰撞魂斗罗突围的核心对抗循环位移做好之后游戏才真正开始。突围玩法的压迫感来自屏幕内同时存在的敌人数量与弹幕密度主角要在这些攻击中一路前推。这一章要解决的三件事恰好就是标题里“突围”二字的引擎基础子弹怎么高效生成与回收敌人怎么表现不同行为打中与被打中怎么判定。3.1 子弹对象池为什么不直接 new Bullet如果每按一次射击键就创建一个新对象子弹超出屏幕时再把它丢掉那么持续开火的 30 秒内会创建几百个短期对象引发频繁的 GC 停顿表现就是帧率周期性掉到 40 以下。成熟的 HTML5 小游戏都会用对象池来规避这个问题。const bulletPool []; const MAX_BULLETS 80; function getBullet() { for (let i 0; i bulletPool.length; i) { if (!bulletPool[i].active) { bulletPool[i].active true; return bulletPool[i]; } } if (bulletPool.length MAX_BULLETS) { const b { x: 0, y: 0, vx: 0, vy: 0, active: false, friendly: true, }; bulletPool.push(b); return b; } return null; // 池子已满本次不发射 } function shoot(sx, sy, angle, speed, friendly) { const bullet getBullet(); if (!bullet) return; bullet.x sx; bullet.y sy; bullet.vx Math.cos(angle) * speed; bullet.vy Math.sin(angle) * speed; bullet.friendly friendly; } function updateBullets(delta) { for (let i 0; i bulletPool.length; i) { const b bulletPool[i]; if (!b.active) continue; b.x b.vx * delta; b.y b.vy * delta; if (b.x -10 || b.x canvas.width 10 || b.y -10 || b.y canvas.height 10) { b.active false; } } }getBullet 函数先遍历池子找空闲槽位找不到并且池子还没到上限才新建。MAX_BULLETS 在这里有两层作用它既是性能上限也是弹幕敌人的压制器——如果这个数设得太大比如 1000大量子弹同时更新和绘制仍然会拖慢帧率设得太小比如 20玩家密集射击时子弹会被静默丢弃显著影响爽快感。updateBullets 里统一推进所有子弹把超出屏幕边界的子弹置为不活跃。注意这里没有销毁对象只是把 active 置为 false下一次 getBullet 直接复用这个槽位。3.2 敌人行为的几种典型 AI巡逻、追击、炮台既然叫突围“被敌人围攻”就是核心体验。敌人不需要多聪明但必须行为可区分。常见的做法是给敌人挂一个 type 字段update 时用 switch 分发。function updateEnemy(e, delta, player) { switch (e.type) { case patrol: e.x e.dir * e.speed * delta; if (e.x e.minX || e.x e.maxX) { e.dir * -1; } break; case chase: e.dir Math.sign(player.x - e.x); e.x e.dir * e.speed * delta; break; case turret: { e.fireTimer delta; if (e.fireTimer e.fireInterval) { e.fireTimer 0; spawnEnemyBullet(e); } break; } } }patrol 类型负责在 minX 和 maxX 之间往返它模拟的是清道夫式的小兵不会主动改变移动方向。chase 类型直接朝玩家的水平方向移动Math.sign 返回 -1、0、1 三态之一它构成了最基础的追击逻辑。turret 是固定炮台每隔 fireInterval 秒向固定方向打一发子弹这个间隔在关卡配置表里单独调。在设计敌人时我发现一个细节追击型敌人也要设一个 minX 和 maxX否则它会把玩家堵在墙角。边界值在 JSON 关卡配置里配置两个值代表它的活动范围超出即调头。这样既保留压迫感又避免了敌人无限逼近玩家出生点这种失衡情况。3.3 碰撞判定AABB 矩形重叠与像素级检测的取舍碰撞是整个小游戏里最容易“看起来不对劲”的部分。最常见也最实用的方案是 AABB 矩形重叠检测也就是判断两个轴对齐矩形的 x、y、width、height 是否相交。function aabbHit(a, b) { return Math.abs(a.x - b.x) * 2 (a.width b.width) Math.abs(a.y - b.y) * 2 (a.height b.height); }这个写法是a.x a.width b.x这种四段式判断的等价形式利用中心距小于半宽之和的原理写起来更简洁。实际项目里更推荐给每个对象配置一个独立的 hitbox 属性而不是直接用绘制尺寸参与碰撞比如人物图片 40 像素宽碰撞盒只取中间的 20 像素宽。这样玩家擦着子弹边缘过去时会得到“明明没打中”的生存判定大幅提升手感。像素级碰撞在魂斗罗里完全没有必要。getImageData 逐像素检测的开销太大而且 H5 小游戏的目标平台覆盖各种配置的机器AABB 已经能够覆盖全部场景。如果你看到某份源码里对普通子弹做像素级检测那基本属于炫技且得不偿失。3.4 玩家受击与无敌帧突围玩法里玩家面对的是多方向火力受击后必须有无敌帧否则会被连续命中瞬间秒杀。常见实现方式是击中后给玩家一个 invincibleTimer时间窗内不参与碰撞同时通过闪屏提示玩家。function hitPlayer() { if (player.invincibleTimer 0) return; player.lives - 1; player.invincibleTimer 2.0; // 2 秒无敌 } // 在 update 中递减 player.invincibleTimer Math.max(0, player.invincibleTimer - delta);无敌帧时长要放在迎敌密度和难度之间找平衡。2 秒在 H5 射击小游戏里是常见取值既能保证玩家有反应和走位的时间又不会让玩家站着硬吃弹幕。渲染时通过奇偶帧隐藏角色 sprite 来实现闪烁也就是Math.floor(timestamp / 80) % 2 0时跳过绘制。4. 关卡配置、资源加载与源码包里的文件怎么摆一个能称得上“附完整源码”的 H5 小游戏源码组织直接影响别人能不能读下去。很多开源小游戏项目最大的问题就是所有代码挤在一个 index.html 里找逻辑要滚动半天。这一章讲关卡数据为什么要拆出配置、资源预加载怎么做以及一份典型源码包长什么样。4.1 关卡数据用 JSON 配置而不是硬编码突围游戏的关卡本质是“一串随时间触发的敌人生成事件”。如果把这些事件写死在 JavaScript 逻辑代码里每次调难度都要打开逻辑文件很容易误改逻辑。把关卡配置抽成 JSON 是更可维护的做法。{ name: 突围·第一战区, worldWidth: 9600, playerStart: { x: 60, y: 400 }, targetX: 9200, waves: [ { at: 0, enemies: [ { type: patrol, x: 800, y: 420, speed: 80, minX: 760, maxX: 1100 } ] }, { at: 30, enemies: [ { type: turret, x: 4800, y: 360, fireInterval: 1.2 } ] } ], boss: { type: heavy, hp: 300, bulletSpeed: 240 } }主循环里根据游戏运行时间检查 waves 数组把已经到时间的波次实例化成敌人。这里的关键参数如下表所示字段类型作用常见取值范围worldWidthnumber整关横向总长度决定镜头滚动范围4000 - 12000waves[].atnumber该波敌人出现的秒数从关卡开始计时0 到关卡总时长enemies[].typestring敌人行为类型对应 updateEnemy 的分支patrol / chase / turretenemies[].speednumber敌人移动速度像素每秒60 - 160enemies[].minX / maxXnumber巡逻敌人的活动区间防止堵墙角相对本波出生点前后 200 - 500boss.hpnumberBoss 受击次数上限200 - 600关卡表只负责“何时何地生成什么敌人”至于敌人如何行动交给第 3 章的 updateEnemy。这种分工让不同关卡之间的差异变成纯配置差异不需要动代码。如果你后续想做关卡编辑器这套 JSON 结构也能直接导出导入。4.2 资源预加载图片与音频的加载进度条H5 小游戏最常见的启动现象是页面打开了角色却是一团黑影等图片慢慢加载完成才开始渲染。这是因为图片加载是异步的而游戏主循环早已启动。正确做法是写一个资源加载器等所有图片、音频加载完成后才开始游戏。function loadAssets(resources) { const tasks resources.map(res { return new Promise((resolve, reject) { if (res.type image) { const img new Image(); img.onload () resolve({ key: res.key, value: img }); img.onerror reject; img.src res.src; } }); }); return Promise.all(tasks).then(items { const assets {}; items.forEach(it { assets[it.key] it.value; }); return assets; }); } loadAssets([ { type: image, key: player, src: assets/player.png }, { type: image, key: enemyPatrol, src: assets/enemy_patrol.png }, ]).then(assets { window.assets assets; startGame(); });加载进度条的实现很直接onload 回调里维护一个计数器每成功加载一个资源就累加进度就是已加载数除以总数。注意 Promise 版本里 onerror 要 reject否则某个资源缺失会导致整个游戏永久卡在加载阶段。音频资源的加载方式和图片类似但有一点特殊iOS Safari 上 AudioContext 必须由用户手势激活也就是说在页面加载后静默调用 play 会被拒绝需要在首次点击或触摸时调用 audioContext.resume()。4.3 源码包的文件划分与改动入口整理这类 HTML5 小游戏源码时我通常会按照“入口、绘制、逻辑、配置”四个维度划分文件。一个完整的魂斗罗突围小游戏源码目录大致是index.html 页面骨架与 canvas 挂载点 js/main.js 主循环、update 与 render 调度 js/player.js 角色状态机、移动、受击 js/enemy.js 敌人生成、行为切换、子弹发射 js/collision.js AABB 碰撞判定工具 js/level.js 关卡 JSON 的载入与波次触发 assets/ 图片、音频资源index.html 只放 canvas 元素和 script 引用不要在页面里堆逻辑。main.js 是唯一一个“知道全局”的文件它负责创建游戏对象、启动主循环、调用各模块的 update/render。player.js 和 enemy.js 分别封装玩家与敌人的行为对外暴露必要的属性和方法。level.js 被 main.js 调用负责把 JSON 关卡配置解析成波次事件。如果你想改这份源码两个最常碰的入口是手感改 player.js 里的 speed 和 jumpForce难度改 JSON 关卡配置里的 speed、fireInterval、hp。理解文件边界之后修改不会波及无关功能。5. 帧率监控、性能上限与两个高频排错点游戏做出来只是第一步能稳定运行才算完成。最后给几个接地气的调优排错手段。5.1 三分钟的碰撞盒体检我最先做的一步永远是打开调试开关把玩家的碰撞盒画出来看。一句代码就能做到// 渲染函数末尾调试用 ctx.strokeStyle #00ff00; ctx.strokeRect(player.x, player.y, player.width, player.height);把碰撞盒显示出来你能立刻发现两类问题一是碰撞盒比图片大很多导致玩家被“空气墙”挡住二是趴下状态下碰撞盒高度变化没生效躲子弹时明明蹲下了还是被打中。绑定一个布尔开关比如DEBUG_HITBOX true上线前关掉即可。5.2 帧率监控与性能上限设定H5 小游戏的性能问题很少来自渲染多数出在对象数量和重复计算上。建议在左上角绘制一个实时 FPS 计数器let frameCount 0; let fpsTimer 0; function updateFPS(delta) { frameCount 1; fpsTimer delta; if (fpsTimer 0.5) { const fps Math.round(frameCount / fpsTimer); ctx.fillText(FPS: fps, 16, 30); frameCount 0; fpsTimer 0; } }在手机上跑如果 FPS 持续低于 50优先检查同屏敌人上限、子弹数量上限、以及是否对画布做了缩放。背景如果每帧重绘也可以事先放到离屏 Canvas 上绘制一次之后每帧用 drawImage 整体贴出。5.3 音效不响与场景卡死音效不响在 H5 小游戏里是一个高频卡点根因多半是 iOS 的 AudioContext 未解锁。排查方法是在用户触摸事件回调里调用一次audioCtx.resume()之后所有音效都从这里触发。另一个常见问题是切后台再切回来游戏时间戳出现巨大跳变虽然主循环里做了 delta 限幅但如果物理位置还是在切后台期间被推进就会出现角色卡在墙里的现象此时需要把位移验证也放进碰撞圈的尽力处理中。给所有移动对象在移动后做一次边界 clamp是杜绝这类越界 bug 的最直接手段。这套调试流程做完游戏手感、稳定性和可维护性都会提升一个台阶。本文还有配套的精品资源点击获取
简介这是一份基于HTMLCSSJS开发的“魂斗罗之突围”H5小游戏完整源码包适合前端初学者、游戏开发爱好者及个人网站站长参考。资源通过纯前端技术实现了角色移动、射击、敌人生成等经典玩法无需后端即可部署使用也可直接嵌入个人站点作为互动娱乐模块。压缩包共36个文件主要包含1个HTML入口文件、3个JavaScript逻辑脚本与32张PNG图像素材仅432KB轻量易用。其中脚本覆盖游戏主循环、碰撞处理及jQuery辅助功能图片素材则包含角色、敌人、子弹、背景地图等完整序列帧。目前已有490人学习下载源码目录结构清晰素材命名规范便于二次修改与学习研究对理解H5游戏开发流程颇有帮助。1. 为什么是 H5 魂斗罗突围一个“老玩法”在小游戏时代的复现横版射击动作游戏在 HTML5 小游戏里一直是个特殊存在它不需要后端不需要网络同步甚至不需要复杂的物理引擎核心逻辑只有位移、射击、碰撞三件事。但恰恰是这三件事决定了游戏“像不像那么回事”。魂斗罗之突围这个标题最吸引我的一点是它没有停留在“做一个能开枪的角色”而是把玩法收敛成“从敌方包围圈中杀出一条路”这一条主线条。相比改一版马里奥或者拼一个 2048这样一个完整的射击突围 Demo 更适合作为 html5 网页设计作业也适合刚接触 Canvas 游戏开发的人拿来拆解。这篇博文会把这类 H5 小游戏在工程上拆成什么样子、源码包里的文件怎么组织、哪些参数直接决定手感以及最容易踩的坑在哪里一条线讲清楚。2. 先立技术底座Canvas 渲染与角色移动的 H5 实现魂斗罗突围小游戏在浏览器里跑起来第一个要解决的问题不是画敌人而是让角色按照玩家的意图移动。而移动背后又牵出渲染循环、按键监听、状态切换三件事。大多数初学者在这一步最容易犯的错是把移动逻辑写在 keydown 事件里按一下走一格——这在射击游戏里完全不可用。正确思路是维护一个“当前按键状态表”游戏每帧读取这张表来决定角色速度。2.1 画布、游戏主循环与增量时间HTML5 小游戏的主循环用 requestAnimationFrame 是标配它和屏幕刷新率同步用户切走标签页时浏览器会自动暂停回调不会在后台白跑。const canvas document.getElementById(game); const ctx canvas.getContext(2d); let lastTime 0; function gameLoop(timestamp) { const delta Math.min((timestamp - lastTime) / 1000, 0.05); lastTime timestamp; update(delta); render(ctx); requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop);这里需要重点说明的是 delta 的换算逻辑。timestamp 是浏览器提供的高精度毫秒时间戳除以 1000 转成秒后update 函数里的速度就能用“每秒多少像素”来定义。Math.min 限幅 0.05 秒是为了防止用户切到其他标签页几秒再切回来时游戏一下子推进几秒的物理量导致角色穿越地形。如果你把这段代码写成固定间隔的 setInterval会遇到刷新率不匹配、切后台后积压回调等一系列问题所以不要用 setInterval 作为游戏主循环的载体。2.2 键盘输入映射与主角位移按键状态表是魂斗罗类横版游戏的输入标准做法。整个页面只需要监听一次 keydown 和 keyup把按键状态存进一个对象游戏循环里再查表。const keys {}; window.addEventListener(keydown, e { keys[e.code] true; }); window.addEventListener(keyup, e { keys[e.code] false; }); function update(delta) { let dx 0, dy 0; if (keys[ArrowLeft] || keys[KeyA]) dx - 1; if (keys[ArrowRight] || keys[KeyD]) dx 1; if (keys[ArrowUp] || keys[KeyW]) dy - 1; if (keys[ArrowDown] || keys[KeyS]) dy 1; // 斜向移动时做归一化避免速度变成 1.41 倍 if (dx ! 0 dy ! 0) { dx * 0.7071; dy * 0.7071; } player.vx dx * player.speed; player.vy dy * player.speed; }为什么不直接监听 keydown 修改坐标而要在 update 里做移动因为 keydown 事件会触发系统级的按键重复而且它发生在渲染循环之外无法和帧周期对齐。把状态存起来、每帧统一读取才能保证“按住方向键角色持续平滑移动”和“斜向走不比直线慢”。代码里 dx、dy 先被赋成 -1、0、1再在 update 里乘以速度这个中间层让输入逻辑和移动逻辑解耦。0.7071 是 1 除以根号 2 的近似值斜向移动时两个方向分速度各乘以它合成速度仍与直线速度一致。另外我建议用e.code而不是e.keyCode因为后者与键盘布局相关前者绑定物理键位对 AZERTY 等非美式布局也更友好。2.3 用状态机管理“站立 / 跑动 / 跳跃 / 趴下”魂斗罗的“手感”很大程度来自角色动作状态的切换。翻源码时你会看到一个 state 字段这就是一个轻量状态机。const player { x: 40, y: 300, vx: 0, vy: 0, width: 34, height: 52, state: idle, onGround: true, speed: 220, jumpForce: -520, }; function switchState(next) { if (player.state next) return; player.state next; if (next duck) { player.height 26; player.gunOffsetY 8; } else { player.height 52; player.gunOffsetY 20; } }状态切换不只是换一张图它还同步修改了碰撞盒的高度。趴下时如果碰撞盒不跟着变矮敌人的子弹会打在一个透明空气墙上这在实际试玩里非常出戏。跳跃逻辑在 update 里通过重力累积实现先给 player.vy 赋一个负的初速度比如 -520每帧把 vy 加上重力加速度常见值是 1200再让 y 累加 vy 乘以 delta。着地判定是 y 是否到达地面基准线。在这类 H5 射击小游戏中状态机字段后面往往还会带 actionLock 之类的锁用于保证出枪动作没播完时不能切到跳跃。这个细节可以留到后面调手感时再说但数据结构从第一天开始就应该为它留位。3. 射击、敌人与碰撞魂斗罗突围的核心对抗循环位移做好之后游戏才真正开始。突围玩法的压迫感来自屏幕内同时存在的敌人数量与弹幕密度主角要在这些攻击中一路前推。这一章要解决的三件事恰好就是标题里“突围”二字的引擎基础子弹怎么高效生成与回收敌人怎么表现不同行为打中与被打中怎么判定。3.1 子弹对象池为什么不直接 new Bullet如果每按一次射击键就创建一个新对象子弹超出屏幕时再把它丢掉那么持续开火的 30 秒内会创建几百个短期对象引发频繁的 GC 停顿表现就是帧率周期性掉到 40 以下。成熟的 HTML5 小游戏都会用对象池来规避这个问题。const bulletPool []; const MAX_BULLETS 80; function getBullet() { for (let i 0; i bulletPool.length; i) { if (!bulletPool[i].active) { bulletPool[i].active true; return bulletPool[i]; } } if (bulletPool.length MAX_BULLETS) { const b { x: 0, y: 0, vx: 0, vy: 0, active: false, friendly: true, }; bulletPool.push(b); return b; } return null; // 池子已满本次不发射 } function shoot(sx, sy, angle, speed, friendly) { const bullet getBullet(); if (!bullet) return; bullet.x sx; bullet.y sy; bullet.vx Math.cos(angle) * speed; bullet.vy Math.sin(angle) * speed; bullet.friendly friendly; } function updateBullets(delta) { for (let i 0; i bulletPool.length; i) { const b bulletPool[i]; if (!b.active) continue; b.x b.vx * delta; b.y b.vy * delta; if (b.x -10 || b.x canvas.width 10 || b.y -10 || b.y canvas.height 10) { b.active false; } } }getBullet 函数先遍历池子找空闲槽位找不到并且池子还没到上限才新建。MAX_BULLETS 在这里有两层作用它既是性能上限也是弹幕敌人的压制器——如果这个数设得太大比如 1000大量子弹同时更新和绘制仍然会拖慢帧率设得太小比如 20玩家密集射击时子弹会被静默丢弃显著影响爽快感。updateBullets 里统一推进所有子弹把超出屏幕边界的子弹置为不活跃。注意这里没有销毁对象只是把 active 置为 false下一次 getBullet 直接复用这个槽位。3.2 敌人行为的几种典型 AI巡逻、追击、炮台既然叫突围“被敌人围攻”就是核心体验。敌人不需要多聪明但必须行为可区分。常见的做法是给敌人挂一个 type 字段update 时用 switch 分发。function updateEnemy(e, delta, player) { switch (e.type) { case patrol: e.x e.dir * e.speed * delta; if (e.x e.minX || e.x e.maxX) { e.dir * -1; } break; case chase: e.dir Math.sign(player.x - e.x); e.x e.dir * e.speed * delta; break; case turret: { e.fireTimer delta; if (e.fireTimer e.fireInterval) { e.fireTimer 0; spawnEnemyBullet(e); } break; } } }patrol 类型负责在 minX 和 maxX 之间往返它模拟的是清道夫式的小兵不会主动改变移动方向。chase 类型直接朝玩家的水平方向移动Math.sign 返回 -1、0、1 三态之一它构成了最基础的追击逻辑。turret 是固定炮台每隔 fireInterval 秒向固定方向打一发子弹这个间隔在关卡配置表里单独调。在设计敌人时我发现一个细节追击型敌人也要设一个 minX 和 maxX否则它会把玩家堵在墙角。边界值在 JSON 关卡配置里配置两个值代表它的活动范围超出即调头。这样既保留压迫感又避免了敌人无限逼近玩家出生点这种失衡情况。3.3 碰撞判定AABB 矩形重叠与像素级检测的取舍碰撞是整个小游戏里最容易“看起来不对劲”的部分。最常见也最实用的方案是 AABB 矩形重叠检测也就是判断两个轴对齐矩形的 x、y、width、height 是否相交。function aabbHit(a, b) { return Math.abs(a.x - b.x) * 2 (a.width b.width) Math.abs(a.y - b.y) * 2 (a.height b.height); }这个写法是a.x a.width b.x这种四段式判断的等价形式利用中心距小于半宽之和的原理写起来更简洁。实际项目里更推荐给每个对象配置一个独立的 hitbox 属性而不是直接用绘制尺寸参与碰撞比如人物图片 40 像素宽碰撞盒只取中间的 20 像素宽。这样玩家擦着子弹边缘过去时会得到“明明没打中”的生存判定大幅提升手感。像素级碰撞在魂斗罗里完全没有必要。getImageData 逐像素检测的开销太大而且 H5 小游戏的目标平台覆盖各种配置的机器AABB 已经能够覆盖全部场景。如果你看到某份源码里对普通子弹做像素级检测那基本属于炫技且得不偿失。3.4 玩家受击与无敌帧突围玩法里玩家面对的是多方向火力受击后必须有无敌帧否则会被连续命中瞬间秒杀。常见实现方式是击中后给玩家一个 invincibleTimer时间窗内不参与碰撞同时通过闪屏提示玩家。function hitPlayer() { if (player.invincibleTimer 0) return; player.lives - 1; player.invincibleTimer 2.0; // 2 秒无敌 } // 在 update 中递减 player.invincibleTimer Math.max(0, player.invincibleTimer - delta);无敌帧时长要放在迎敌密度和难度之间找平衡。2 秒在 H5 射击小游戏里是常见取值既能保证玩家有反应和走位的时间又不会让玩家站着硬吃弹幕。渲染时通过奇偶帧隐藏角色 sprite 来实现闪烁也就是Math.floor(timestamp / 80) % 2 0时跳过绘制。4. 关卡配置、资源加载与源码包里的文件怎么摆一个能称得上“附完整源码”的 H5 小游戏源码组织直接影响别人能不能读下去。很多开源小游戏项目最大的问题就是所有代码挤在一个 index.html 里找逻辑要滚动半天。这一章讲关卡数据为什么要拆出配置、资源预加载怎么做以及一份典型源码包长什么样。4.1 关卡数据用 JSON 配置而不是硬编码突围游戏的关卡本质是“一串随时间触发的敌人生成事件”。如果把这些事件写死在 JavaScript 逻辑代码里每次调难度都要打开逻辑文件很容易误改逻辑。把关卡配置抽成 JSON 是更可维护的做法。{ name: 突围·第一战区, worldWidth: 9600, playerStart: { x: 60, y: 400 }, targetX: 9200, waves: [ { at: 0, enemies: [ { type: patrol, x: 800, y: 420, speed: 80, minX: 760, maxX: 1100 } ] }, { at: 30, enemies: [ { type: turret, x: 4800, y: 360, fireInterval: 1.2 } ] } ], boss: { type: heavy, hp: 300, bulletSpeed: 240 } }主循环里根据游戏运行时间检查 waves 数组把已经到时间的波次实例化成敌人。这里的关键参数如下表所示字段类型作用常见取值范围worldWidthnumber整关横向总长度决定镜头滚动范围4000 - 12000waves[].atnumber该波敌人出现的秒数从关卡开始计时0 到关卡总时长enemies[].typestring敌人行为类型对应 updateEnemy 的分支patrol / chase / turretenemies[].speednumber敌人移动速度像素每秒60 - 160enemies[].minX / maxXnumber巡逻敌人的活动区间防止堵墙角相对本波出生点前后 200 - 500boss.hpnumberBoss 受击次数上限200 - 600关卡表只负责“何时何地生成什么敌人”至于敌人如何行动交给第 3 章的 updateEnemy。这种分工让不同关卡之间的差异变成纯配置差异不需要动代码。如果你后续想做关卡编辑器这套 JSON 结构也能直接导出导入。4.2 资源预加载图片与音频的加载进度条H5 小游戏最常见的启动现象是页面打开了角色却是一团黑影等图片慢慢加载完成才开始渲染。这是因为图片加载是异步的而游戏主循环早已启动。正确做法是写一个资源加载器等所有图片、音频加载完成后才开始游戏。function loadAssets(resources) { const tasks resources.map(res { return new Promise((resolve, reject) { if (res.type image) { const img new Image(); img.onload () resolve({ key: res.key, value: img }); img.onerror reject; img.src res.src; } }); }); return Promise.all(tasks).then(items { const assets {}; items.forEach(it { assets[it.key] it.value; }); return assets; }); } loadAssets([ { type: image, key: player, src: assets/player.png }, { type: image, key: enemyPatrol, src: assets/enemy_patrol.png }, ]).then(assets { window.assets assets; startGame(); });加载进度条的实现很直接onload 回调里维护一个计数器每成功加载一个资源就累加进度就是已加载数除以总数。注意 Promise 版本里 onerror 要 reject否则某个资源缺失会导致整个游戏永久卡在加载阶段。音频资源的加载方式和图片类似但有一点特殊iOS Safari 上 AudioContext 必须由用户手势激活也就是说在页面加载后静默调用 play 会被拒绝需要在首次点击或触摸时调用 audioContext.resume()。4.3 源码包的文件划分与改动入口整理这类 HTML5 小游戏源码时我通常会按照“入口、绘制、逻辑、配置”四个维度划分文件。一个完整的魂斗罗突围小游戏源码目录大致是index.html 页面骨架与 canvas 挂载点 js/main.js 主循环、update 与 render 调度 js/player.js 角色状态机、移动、受击 js/enemy.js 敌人生成、行为切换、子弹发射 js/collision.js AABB 碰撞判定工具 js/level.js 关卡 JSON 的载入与波次触发 assets/ 图片、音频资源index.html 只放 canvas 元素和 script 引用不要在页面里堆逻辑。main.js 是唯一一个“知道全局”的文件它负责创建游戏对象、启动主循环、调用各模块的 update/render。player.js 和 enemy.js 分别封装玩家与敌人的行为对外暴露必要的属性和方法。level.js 被 main.js 调用负责把 JSON 关卡配置解析成波次事件。如果你想改这份源码两个最常碰的入口是手感改 player.js 里的 speed 和 jumpForce难度改 JSON 关卡配置里的 speed、fireInterval、hp。理解文件边界之后修改不会波及无关功能。5. 帧率监控、性能上限与两个高频排错点游戏做出来只是第一步能稳定运行才算完成。最后给几个接地气的调优排错手段。5.1 三分钟的碰撞盒体检我最先做的一步永远是打开调试开关把玩家的碰撞盒画出来看。一句代码就能做到// 渲染函数末尾调试用 ctx.strokeStyle #00ff00; ctx.strokeRect(player.x, player.y, player.width, player.height);把碰撞盒显示出来你能立刻发现两类问题一是碰撞盒比图片大很多导致玩家被“空气墙”挡住二是趴下状态下碰撞盒高度变化没生效躲子弹时明明蹲下了还是被打中。绑定一个布尔开关比如DEBUG_HITBOX true上线前关掉即可。5.2 帧率监控与性能上限设定H5 小游戏的性能问题很少来自渲染多数出在对象数量和重复计算上。建议在左上角绘制一个实时 FPS 计数器let frameCount 0; let fpsTimer 0; function updateFPS(delta) { frameCount 1; fpsTimer delta; if (fpsTimer 0.5) { const fps Math.round(frameCount / fpsTimer); ctx.fillText(FPS: fps, 16, 30); frameCount 0; fpsTimer 0; } }在手机上跑如果 FPS 持续低于 50优先检查同屏敌人上限、子弹数量上限、以及是否对画布做了缩放。背景如果每帧重绘也可以事先放到离屏 Canvas 上绘制一次之后每帧用 drawImage 整体贴出。5.3 音效不响与场景卡死音效不响在 H5 小游戏里是一个高频卡点根因多半是 iOS 的 AudioContext 未解锁。排查方法是在用户触摸事件回调里调用一次audioCtx.resume()之后所有音效都从这里触发。另一个常见问题是切后台再切回来游戏时间戳出现巨大跳变虽然主循环里做了 delta 限幅但如果物理位置还是在切后台期间被推进就会出现角色卡在墙里的现象此时需要把位移验证也放进碰撞圈的尽力处理中。给所有移动对象在移动后做一次边界 clamp是杜绝这类越界 bug 的最直接手段。这套调试流程做完游戏手感、稳定性和可维护性都会提升一个台阶。本文还有配套的精品资源点击获取
