重力加速度需用 requestAnimationFrame 结合 deltaTime 实时累加：vy += gravity × deltaTime × 0.016，y += vy × deltaTime × 0.016；反弹时精确置位、乘恢复系数并设静止阈值。
重力加速度怎么用 requestAnimationFrame 累加速度
重力不是“一跳就掉到底”，而是每帧按时间增量持续加速下落。关键在：用 deltaTime（上一帧到当前帧的毫秒差）乘以重力系数，避免帧率波动导致下落忽快忽慢。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别直接写
y += 5这类固定偏移——它在 30fps 和 60fps 下物理表现完全不同 - 记录上一帧时间戳
lastTime，每次进入requestAnimationFrame回调时计算deltaTime = now - lastTime - 速度更新写成
vy += gravity * deltaTime * 0.016（0.016是把毫秒转为秒的归一化系数，让gravity = 980对应现实单位 cm/s²） - 位置更新始终用
y += vy * deltaTime * 0.016，保持运动学一致性
反弹时如何正确衰减速度而非硬设固定值
真实反弹不是“碰到地板就变成 -0.8×原速”，而是要考虑碰撞法向、能量损失和最小阈值——否则小球会高频抖动或永远停不下来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测到地面碰撞（如
y + radius >= canvas.height）后，先将小球y精确置为canvas.height - radius，避免因浮点误差卡进地面 - 反弹速度写成
vy = -vy * restitution，其中restitution是恢复系数（0.7–0.9 较自然），不是固定负数 - 加一个“静止阈值”判断：
if (math.abs(vy) ，否则低速时反复微弹 - 若同时有水平速度
vx，地面摩擦可额外乘个friction = 0.995，但别在碰撞瞬间清零——那会丢失滚动感
Canvas 坐标系下重力方向为什么是 +y 而不是 -y
html5 Canvas 的 y 轴正向朝下，所以重力加速度必须是正值，否则物体会往上飘。这是初学者最常翻车的地方——照着物理课本写 g = -9.8，结果角色飞天。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一约定：所有坐标、速度、加速度变量都按 Canvas 原生方向定义，不引入“世界坐标系”抽象
-
gravity就设为980（单位：像素/秒²），vy初始为0，下落时它自然变正、y 坐标增大 - 如果用了矩阵变换（如
ctx.scale(1, -1)）翻转 y 轴，那重力才需取负——但强烈不建议这么做，会干扰鼠标坐标、图像绘制等所有逻辑
为什么不用 setInterval 模拟物理，哪怕它看起来更“稳定”
setInterval 的定时器无法对齐屏幕刷新节奏，容易出现“三帧只画两帧”或“一帧画两次”的撕裂，且无法获取真实帧间隔，deltaTime 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 物理更新必须和渲染共用同一
requestAnimationFrame循环，哪怕你暂时没做插值渲染 - 不要为了“省事”把物理和渲染拆成两个独立定时器——它们的时序错位会立刻暴露为跳跃或拖影
- 如果担心
requestAnimationFrame在后台标签页降频，可在循环内加检测：if (deltaTime > 100) deltaTime = 16，防止切回页面时一次补多帧导致瞬移
物理模拟的复杂点不在公式，而在边界处理和数值稳定性。比如小球卡进墙里、连续两帧都检测到碰撞却只反弹一次、或者 deltaTime 突然飙升导致穿模——这些问题不会报错，但会让手感明显“假”。多打几次断点，盯着 vy 和 y 的变化节奏看，比死磕公式管用。