javascript - 无论球的起始位置如何，我怎样才能始终以相同的速度将球移动到 (x,y) 位置

Question

这张图片很好地说明了我的问题:

球在靠近端点(橙色圆圈)时移动非常慢，但在远离端点时移动非常快。

发生这种情况的原因是因为我使用这段代码来计算球的垂直和水平速度

var startingBallSpeed = 100;
xDistance = targetX - this.x;
yDistance = targetY - this.y;

this.horizontalVelocity = (xDistance / startingBallSpeed);
this.verticalVelocity = (yDistance / startingBallSpeed);

问题:如何确保球以相同的速度行进并且仍会击中 targetX 和 targetY

当前行为:靠近端点的球移动缓慢，远离端点的球移动快速
期望的行为:无论球离终点有多近，它们都以相同的速度移动

JS: https://jsfiddle.net/7ct1ap53/1

ball1 = new Ball(400, 480, "green");
ball2 = new Ball(20, 480, "blue");

targetX = 500;
targetY = 400;
targetBall = new Ball(targetX, targetY, "magenta", radius=10)

var gameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 500;
    this.canvas.height = 500;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[4]);
    this.interval = setInterval(updateGame, 20); //20
  }
};

function Ball(x, y, color, radius=15) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color

  this.draw = function() {
    gameArea.context.beginPath();
    gameArea.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    gameArea.context.fillStyle = color;
    gameArea.context.fill();
    gameArea.context.closePath();
  }

  this.launch = function() {
    var startingBallSpeed = 100;
    xDistance = targetX - this.x;
    yDistance = targetY - this.y;

    this.horizontalVelocity = (xDistance / startingBallSpeed);
    this.verticalVelocity = (yDistance / startingBallSpeed);
  }

  this.updatePos = function() {
    this.x += this.horizontalVelocity;
    this.y += this.verticalVelocity;
  };
}


$(function() {
  startGame();
});


function updateGame() {
    gameArea.context.clearRect(0,0,500,500);
    ball1.updatePos();
  ball2.updatePos();

  ball1.draw();
  ball2.draw();
  targetBall.draw();
}

function startGame() {

  gameArea.start();
  ball1.launch();
  ball2.launch();
}

Answer 1

您需要对由 xDistance、yDistance 定义的向量进行归一化，以创建指定方向但长度为 1 的单位向量。然后您可以将其乘以所需的球速以获得速度。

除以长度归一化:

xDistance = targetX - this.x;
yDistance = targetY - this.y;
length = Math.sqrt((xDistance * xDistance) + (yDistance * yDistance));
if(length > 0) // avoid divide by zero
{
     xUnitVector = xDistance / length;
     yUnitVector = yDistance / length;

     this.horizontalVelocity = xUnitVector * startingBallSpeed;
     this.verticalVelocity = yUnitVector * startingBallSpeed;
}
else
{
     // cancel the launch because you are already at your destination
}

将你的球速调整到你需要的任何恒定速度