javascript - 我怎样才能让我的 Angular 色沿对 Angular 线移动？

Question

我正在尝试使用 HTML5 Canvas 和 Javascript 创建游戏，但我无法弄清楚如何(正确地)让 Angular 色在用鼠标单击 Canvas 后沿对 Angular 线移动。我确实设法让 Angular 色沿对 Angular 线移动，但我无法设置速度，这样无论距离多远，它都会以相同的速度移动......你点击越远，它移动得越快，你点击得越近，它移动得越慢。无论您点击哪里，我都希望速度相同。

这是我目前拥有的:http://pastebin.com/hUJBiQHq

如何在 Canvas 上沿对 Angular 线移动 Angular 色？

Answer 1

实际上，我继续进行了很多更改。我会尝试检查每一个。

我做的第一件事是删除了很多 setTimout 调用。您实际上并不需要单独的一个用于移动和 渲染。我还让它停止检查游戏是否在实际加载后加载。现在，一旦游戏加载完毕，它就会开始渲染。

您的 onclick 事件也在超时内，这不是必需的。我把它移到了外面。更好的方法和 future 阅读的主题是使用 addEventListener explained nicely here

我在顶部添加的另一件事是 requestAnimationFrame 的垫片最好在 setTimeout 上使用它，如果您注意到它在不支持动画帧的浏览器上运行，它将在超时时回退。 There are many benefits to using it explained here .

现在进入手头的问题!

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

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

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

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

if (dist >= speed) {

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

    velX = (tx / dist) * speed;
    velY = (ty / dist) * speed;
    posX += velX;
    posY += velY;

Live Demo of it all working

完整代码

(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();