矩形与圆形碰撞检测的核心是判断圆心到矩形最近点的距离平方是否小于等于半径平方。先计算最近点坐标，再通过提前排除（如|dx|>r）优化性能。
矩形与圆形碰撞检测的核心判断逻辑
矩形和圆形是否相交，本质是看圆心到矩形的最短距离是否小于圆半径。不能直接用圆心和矩形中心距离判断——那样会漏判（比如圆贴着矩形边但没进角）；也不能逐边做线段-圆检测——开销大且易出错。
正确做法是：先求圆心 cx, cy 到矩形（轴对齐，即 rect.x, rect.y, rect.width, rect.height）的「最近点」坐标 closestX, closestY，再算该点与圆心的距离平方（避免开方）是否 ≤ radius * radius。
关键步骤用 javaScript 表达就是：
function isRectCircleCollision(rect, circle) { const closestX = math.max(rect.x, Math.min(circle.x, rect.x + rect.width)); const closestY = Math.max(rect.y, Math.min(circle.y, rect.y + rect.height)); const dx = circle.x - closestX; const dy = circle.y - closestY; return dx * dx + dy * dy <= circle.radius * circle.radius; }为什么用“clamp”方式求最近点而不是 if-else 分支
很多人写成一堆 if 判断圆心在矩形左/右/上/下/内，既冗长又容易漏边界。而 Math.max(a, Math.min(b, c)) 是标准 clamp 模式：把圆心坐标限制在矩形对应轴的范围内，天然覆盖所有情况（包括圆心在矩形内部时 closestX === circle.x）。
立即学习“前端免费学习笔记（深入）”；
这个技巧依赖矩形是轴对齐的（html5 canvas 默认绘制的矩形都是），如果矩形旋转了，就得转坐标系或用分离轴定理（SAT），复杂度陡增，一般小游戏应避免。
- 矩形必须是轴对齐，否则
closestX/closestY计算失效 - 所有坐标需在同一坐标系下（比如都相对于 Canvas 左上角）
- 注意 Canvas 的 y 轴向下，但数学计算不受影响，只要一致即可
性能敏感场景下的简化与提前退出
在每帧要检测上百对对象时，平方根和乘法仍是瓶颈。可加两层快速过滤：
第一层：用 AABB（矩形包围盒）粗筛。先判断圆的外接正方形（即以圆心为中心、边长为 2 * radius 的正方形）是否和矩形相交。不相交则直接返回 false，跳过后续计算。
第二层：在距离平方计算前，先检查 dx 或 dy 是否已超半径——比如 Math.abs(dx) > circle.radius 就不用算 dy 和平方和了。
示例优化片段：
const dx = circle.x - closestX; if (Math.abs(dx) > circle.radius) return false; const dy = circle.y - closestY; if (Math.abs(dy) > circle.radius) return false; return dx * dx + dy * dy <= circle.radius * circle.radius;Canvas 坐标与游戏逻辑坐标的常见错位问题
很多开发者发现碰撞“看起来不准”，大概率是坐标没对齐。典型坑点：
-
canvas.getBoundingClientRect()返回的是屏幕像素位置，而mouseEvent.clientX/clientY是相对于视口的，二者需手动对齐（减去left/top偏移） - Canvas 被 CSS 缩放（如
style="width: 600px"但实际 canvas.width=1200）会导致绘图坐标和事件坐标比例不一致，此时必须用devicePixelRatio校正 - 游戏里角色用中心锚点（
x,y是中心），但矩形检测用的是左上角锚点，传参前忘了转换（比如把player.x - w/2当作rect.x）
建议统一在游戏主循环中维护一套逻辑坐标（如全部以左上角为原点），渲染时再做偏移或缩放，别混用两套坐标体系。
真正麻烦的不是公式本身，而是坐标系没理清就急着套代码。跑通一次后，记得把坐标对齐逻辑单独抽成 getCanvasMousePos(event) 这样的工具函数复用。