2D游戏开发：已知射击起止点与距起点距离，求障碍物坐标

核心思路 #

不用三角函数，直接通过向量缩放计算更高效——本质是从起点出发，沿着指向终点的方向移动指定距离，得到障碍物坐标。

计算步骤 #

1. 计算起点到终点的坐标差：
   • 横向差值：dx = x2 - x1
   • 纵向差值：dy = y2 - y1
2. 计算起点到终点的直线总距离：
   • totalDistance = Math.sqrt(dx*dx + dy*dy)
3. 计算移动距离的比例（指定距离占总距离的比值）：
   • ratio = d / totalDistance

   注意：若totalDistance为0（起点与终点重合），需做边界处理，避免除以0错误

4. 计算障碍物坐标：
   • x = x1 + dx * ratio
   • y = y1 + dy * ratio

高效JS实现 #

function calculateObstaclePos(x1, y1, x2, y2, d) {
    // 处理起点终点重合的边界情况
    if (x1 === x2 && y1 === y2) {
        return { x: x1, y: y1 }; // 可根据游戏逻辑自定义返回值
    }

    const dx = x2 - x1;
    const dy = y2 - y1;
    const totalDistance = Math.hypot(dx, dy); // 原生方法更高效，精度更稳定
    const ratio = d / totalDistance;

    // 避免障碍物出现在目标后方，符合射击拦截逻辑
    const clampedRatio = Math.min(ratio, 1);

    return {
        x: x1 + dx * clampedRatio,
        y: y1 + dy * clampedRatio
    };
}

说明 #

• 使用Math.hypot替代手动开根号：该方法经过原生优化，处理大数时精度更高，性能优于手动计算
• 加入clampedRatio：防止指定距离超过起点到终点的总长度，避免不符合游戏逻辑的坐标输出
• 全程无三角函数调用：向量运算的性能远高于三角函数计算，更适合游戏中的高频调用场景

内容的提问来源于stack exchange，提问作者Nicholas Mueller