Javascript 如何使我的角色沿对角线移动？

我正在尝试使用HTML5画布和Javascript创建一个游戏，但我不知道如何（正确地）在用鼠标单击画布后使角色沿对角线移动。我确实设法使角色沿对角线移动，但我无法设置速度，以便无论距离有多远，它都能以相同的速度移动。。。你点击得越远，它移动得越快，你点击得越近，它移动得越慢。我希望无论在何处单击，速度都相同

以下是我到目前为止的情况：

---

如何在画布上沿对角线移动角色？

您应该测量从起点到终点的距离，然后根据该距离计算移动的持续时间

距离测量：

function lineDistance( point1, point2 )
{
  var xs = 0;
  var ys = 0;
  xs = point2.x - point1.x;
  xs = xs * xs;
  ys = point2.y - point1.y;
  ys = ys * ys;
  return Math.sqrt( xs + ys );
}

---

设置动画的时间是结果*速度。尝试

speed

值，直到你得到你想要的

事实上，我做了很多改变。我试着把每一个都检查一遍

我做的第一件事就是删除了大量的

setTimout

调用。移动和渲染实际上不需要单独的一个。我还让它停止检查游戏是否在实际加载后加载。现在，一旦游戏加载，它将开始渲染

您的

onclick

事件也在超时时间内，这是不需要的。我把它搬到外面去了。更好的方法和未来阅读的主题是使用

addEventListener

我在顶部添加的另一件事是一个垫片，因为在

setTimeout

上使用它要好得多，如果您注意到它在不支持动画帧的浏览器上运行，它将在超时时回退

现在来谈谈手头的问题

 var tx = newX - posX,
     ty = newY - posY,

tx

和

ty

是目标x和目标y。它们是从玩家坐标中减去的鼠标坐标。然后可以使用这些来执行距离检查，如下所示

dist = Math.sqrt(tx * tx + ty * ty);

接下来我检查距离是否大于速度，如果是，我们需要靠近我们的位置

if (dist >= speed) {

下一部分计算所需的速度。我们取目标x和目标y，然后除以距离，这将使用我们到达目标所需的像素量。然后，我们将这个数字乘以速度，这给了我们每滴答声移动的距离。然后将这些速度添加到玩家的位置以移动玩家（需要更好的解释..我不擅长解释任何数学概念：？）

完整代码

(function () {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

canvas.width = canvas.height = 500;

var gameReady = true;
var players = [];
var posX = 350;
var posY = 200;
var newX = 350;
var newY = 200;

// new vars needed for movement
var velX = 0;
var velY = 0;
var speed = 5;

function movePlayer() {

  var tx = newX - posX,
    ty = newY - posY,
    dist = Math.sqrt(tx * tx + ty * ty);

  if (dist >= speed) {
    velX = (tx / dist) * speed;
    velY = (ty / dist) * speed;
    posX += velX;
    posY += velY;
  }
}

function isGameReady() {
  if (gameReady) {
    drawCanvas();
  } else {
    setTimeout(isGameReady, 100);
  }
}

canvas.onmousedown = function (e) {
  newX = e.offsetX; // -33;
  newY = e.offsetY; // - 55.25;
}


function drawCanvas() {
  movePlayer();
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillRect(posX, posY, 10, 10);
  requestAnimationFrame(drawCanvas);
}

isGameReady();

---

当然，速度取决于你点击的位置，因为你是这样编程的。你在点击处理程序中设置了speedX和speedY。这就是我所能想到的使它沿对角线移动的所有方法。。。我不是一个数学爱好者，所以我不知道该怎么做。如果你不想改变速度，那就不要改变它。我想我不明白你想要实现什么，以及为什么你要点击事件处理程序。没问题，如果它似乎没有在鼠标光标处停下来，那么就玩一下这个

if（dist>=speed）{

如果你使用

if（dist>=2）{

等等。你可能会得到更好的结果。

(function () {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

canvas.width = canvas.height = 500;

var gameReady = true;
var players = [];
var posX = 350;
var posY = 200;
var newX = 350;
var newY = 200;

// new vars needed for movement
var velX = 0;
var velY = 0;
var speed = 5;

function movePlayer() {

  var tx = newX - posX,
    ty = newY - posY,
    dist = Math.sqrt(tx * tx + ty * ty);

  if (dist >= speed) {
    velX = (tx / dist) * speed;
    velY = (ty / dist) * speed;
    posX += velX;
    posY += velY;
  }
}

function isGameReady() {
  if (gameReady) {
    drawCanvas();
  } else {
    setTimeout(isGameReady, 100);
  }
}

canvas.onmousedown = function (e) {
  newX = e.offsetX; // -33;
  newY = e.offsetY; // - 55.25;
}


function drawCanvas() {
  movePlayer();
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillRect(posX, posY, 10, 10);
  requestAnimationFrame(drawCanvas);
}

isGameReady();