JavaScript游戏开发：循环与碰撞检测技巧

本文深入解析了JavaScript游戏开发中两大基石——稳定的游戏循环与精准的碰撞检测，手把手教你用requestAnimationFrame结合deltaTime实现帧率无关的流畅运动，并详解AABB矩形碰撞与圆形碰撞的原理、优化技巧及实用代码封装；不依赖框架，直击核心逻辑，助你从零搭建高性能、可扩展的HTML5小游戏骨架。

JavaScript 游戏开发的核心在于两个基础机制：稳定的游戏循环（Game Loop）和准确的碰撞检测（Collision Detection）。前者保证画面流畅、逻辑同步；后者决定角色是否碰到敌人、拾取道具或触发事件。不依赖框架也能实现，关键在于理解原理并合理组织代码。

游戏循环：requestAnimationFrame + 时间差控制

浏览器推荐使用 requestAnimationFrame 替代 setInterval，它能与屏幕刷新率同步（通常 60fps），更节能、更顺滑。但要注意：不能直接假设每帧 16.6ms，需记录时间戳计算实际间隔，用于物理更新和动画平滑。

• 用 performance.now() 获取高精度时间戳（毫秒级，带小数）
• 每一帧计算 deltaTime = 当前时间 - 上一帧时间，单位为秒（如 0.016 表示约 16ms）
• 将物理位移、速度更新等乘以 deltaTime，实现帧率无关运动（例如 player.x += speed * deltaTime）
• 可加入“累计帧”逻辑处理低帧率下的逻辑滞后（如固定 timestep 的插值方案，进阶可选）

矩形碰撞检测：轴对齐包围盒（AABB）

2D 游戏中最常用、性能最好的基础碰撞方式。适用于方块、角色精灵、平台等常见对象。前提是物体用 矩形边界（x, y, width, height）描述。

• 判断条件简洁：两个矩形不相交 ⇔ 水平分离 或 垂直分离
• 相交即碰撞：!((a.x > b.x + b.width) || (a.x + a.width b.y + b.height) || (a.y + a.height
• 实际中常封装成函数：function collides(a, b) { ... return true/false; }
• 若需碰撞方向（如只在落地时判定“踩到平台”），可进一步比较重叠量（overlapX vs overlapY）判断优先接触面

圆形碰撞检测：距离平方比较

适合球体、子弹、头像类元素。比 AABB 更自然，且旋转无关。

• 两圆心距离 ≤ 半径之和 即碰撞
• 为避免开方运算（性能敏感），比较 距离的平方 ≤ 半径和的平方
• 代码示意：const dx = a.x - b.x; const dy = a.y - b.y; const distSq = dx*dx + dy*dy; return distSq
• 若需碰撞点或反弹方向，可用归一化向量（dx/distance, dy/distance）做后续计算

简单碰撞响应：位置校正与状态标记

检测到碰撞后，不能只返回 true/false，还需让游戏知道“发生了什么”。常见做法是结合状态管理和轻量校正。

• 为对象添加属性如 isGrounded、wasHit、invulnerableTimer，在碰撞时置位或重置
• 平台游戏中，若玩家从上方下落撞到平台，可立即将其 y 设为 platform.y - player.height，防止穿模
• 避免“连续多帧重复触发同一碰撞”，可用标志位或冷却计时器（如 hitCooldown > 0）过滤
• 复杂场景建议用碰撞对缓存（如 Set 或 Map 记录已处理的 a-b 对），防重复逻辑执行

不复杂但容易忽略。写好循环和碰撞，再叠加输入处理、资源加载、状态机，一个可玩的 HTML5 小游戏骨架就立住了。

今天关于《JavaScript游戏开发：循环与碰撞检测技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！