Canvas物理引擎核心是坐标、速度、边界、碰撞四要素的闭环链；坐标系统以左上为原点，对象用x/y/width/height或radius定位；移动靠vx/vy更新；碰撞用AABB或圆心距判定，检测后可计算重叠量校正。
Canvas 实现简单物理引擎，关键不在堆砌公式，而在把坐标、速度、边界和碰撞这四件事串成一条可预测的链。坐标转换负责“物体在哪”，碰撞判定负责“它碰到了什么”，两者配合才能让移动看起来真实。
坐标系统与对象定位
Canvas 默认以左上角为原点 (0, 0)，x 向右递增，y 向下递增——这和数学坐标系相反，但符合屏幕显示逻辑。每个可动对象（比如小球或方块）至少需维护：x、y（左上角位置）、width、height（用于矩形判定），或 radius（用于圆形判定）。不要直接操作 DOM 元素的 style.left/top，所有位置计算都在 JS 中完成，再统一用 ctx.fillRect() 或 ctx.drawImage() 渲染。
- 移动时更新 x += vx，y += vy，其中 vx/vy 是每帧的速度增量
- 若需旋转或缩放，用 ctx.save() + ctx.translate() + ctx.rotate() + ctx.scale() 组合变换，但注意：变换后坐标系已变，碰撞检测仍应基于原始逻辑坐标（即未变换前的 x/y）进行
- 建议将对象位置统一存为世界坐标（world space），避免嵌套变换带来的坐标混乱
轴对齐矩形碰撞（AABB）
这是最常用也最轻量的判定方式，适用于不旋转的方块、角色、平台等。核心是判断两个矩形在 x 和 y 轴上是否同时重叠。
- 条件很简单：objA.x objB.x && objA.y objB.y
- 不要用中心点加半宽/半高去算，容易出错；坚持用左上角 + 宽高，逻辑清晰且易调试
- 检测到碰撞后，可进一步计算重叠量（penetration depth），用于简易反弹或位置校正，例如：dx = Math.min(objA.x + objA.width - objB.x, objB.x + objB.width - objA.x)
圆形与圆-矩形碰撞
圆形适合子弹、粒子、头像类元素；圆与矩形碰撞则常用于角色与地面/墙体的接触判断。
- 圆与圆：算圆心距离，比较是否小于半径之和。用 dx*dx + dy*dy
- 圆与矩形：先找矩形上离圆心最近的点（clamp 圆心 x/y 到矩形 x 范围和 y 范围内），再算该点到圆心距离是否 ≤ 半径
- 代码片段示例：
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
基础物理响应：反弹与边界约束
碰撞本身只是布尔判断，真正体现“物理感”的是后续响应逻辑。
- 碰到左右墙：vx *= -0.9（保留部分动能，模拟摩擦）
- 碰到上下边界或地面：vy *= -0.8；同时 y = groundY - height（防止卡进地面）
- 多个物体碰撞时，优先处理垂直方向（如落地判定），再处理水平方向（如侧向滑动），避免“穿透”或抖动
- 帧率波动会影响物理表现，建议用时间步长（deltaTime）做速度归一化：x += vx * deltaTime，而非固定每帧加 1 像素
