如何在 Matter.js 中精确计算跳跃初速度以抵达目标点？-js教程-PHP中文网

本文详解 matter.js 中基于抛体运动公式计算角色（如小球）跳跃初速度的方法，涵盖坐标修正、重力缩放因子、碰撞时机选择等关键细节，并提供可运行的完整代码示例。

本文详解 matter.js 中基于抛体运动公式计算角色（如小球）跳跃初速度的方法，涵盖坐标修正、重力缩放因子、碰撞时机选择等关键细节，并提供可运行的完整代码示例。

在使用 Matter.js 实现“精准跳跃”——例如让一个小球从当前平台弹起后，准确落于下一个矩形平台顶部——时，仅靠直觉调整 Body.setVelocity() 往往导致轨迹严重偏移：球体频繁飞越目标、提前坠落或滑出平台。根本原因并非公式错误，而是对 Matter.js 物理引擎底层行为（如碰撞响应时机、重力缩放机制、坐标系约定）缺乏适配。本文将系统性地拆解并解决这一典型问题。

✅ 正确的物理建模：从理想抛体到 Matter.js 实现

经典二维抛体运动中，若已知发射角 θ、水平位移 dx、垂直位移 dy、重力加速度 g，则初速度大小 v₀ 满足：

$$ v_0 = \frac{dx}{\cos\theta} \cdot \sqrt{\frac{g/2}{dy + dx \cdot \tan\theta}} $$

但直接套用该公式在 Matter.js 中会失效，原因有三：

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

坐标系方向：Matter.js 的 y 轴向下为正，因此垂直初速度应为负值（向上跳），即 vy = -v₀·sinθ；
目标点定位偏差：不能简单用矩形中心 target.position.y，而应取其上边界 target.bounds.min.y（因矩形静止，bounds.min.y 即其顶部 y 坐标）；同时需减去球体半径 ball.circleRadius，确保球心恰好落在目标表面；
重力缩放因子：Matter.js 的实际重力加速度并非 engine.gravity.y，而是
g = engine.gravity.y * engine.gravity.scale * (Body._baseDelta)²。
其中 Body._baseDelta 是引擎内部时间步长（默认 60 Hz → ≈ 0.01667 s），平方项源于运动学公式 y = v₀t − ½gt² 中的二次时间依赖。忽略此项将导致计算出的初速度偏大数倍。

⚙️ 关键实现要点与代码优化

1. 选择正确的事件钩子：collisionActive 替代 collisionStart

❌ collisionStart 触发时，碰撞冲量尚未应用，但后续帧中引擎仍会叠加该冲量，导致 setVelocity() 被覆盖；
✅ collisionActive 在碰撞持续期间触发，此时冲量已生效，立即重设速度可确保轨迹可控。

2. 清除干扰因素

ball.frictionAir = 0;                    // 关闭空气阻力（简化模型）
Body.setAngularVelocity(ball, 0);        // 归零角速度，避免旋转导致的异常滑脱

3. 完整核心逻辑（含坐标校准与重力修正）

Events.on(engine, "collisionActive", (event) => {
  event.pairs.forEach((pair) => {
    if (pair.bodyA === ball) {
      const idx = rectangles.indexOf(pair.bodyB);
      let target = rectangles[idx + 1];
      if (!target) target = rectangles[0]; // 循环跳跃

      // ✅ 精确坐标：目标上表面 - 球半径
      const dx = target.position.x - ball.position.x;
      const dy = target.bounds.min.y - ball.position.y - ball.circleRadius;

      // ✅ Matter.js 实际重力（含 timeStep² 缩放）
      const g = engine.gravity.y * engine.gravity.scale * (Body._baseDelta ** 2);
      const angle = deg2rad(60); // 发射角（弧度）

      // ✅ 抛体初速度公式（经坐标与重力修正）
      const v0 = (dx / Math.cos(angle)) * 
                 Math.sqrt((0.5 * g) / (dy + dx * Math.tan(angle)));

      if (isFinite(v0) && v0 > 0) {
        Body.setVelocity(ball, {
          x: v0 * Math.cos(angle),
          y: -v0 * Math.sin(angle) // 向上为负
        });
        Body.setAngularVelocity(ball, 0);
      }
    }
  });
});