如何讓我的角色沿對角線移動？

Question

我正在嘗試使用 HTML5 Canvas 和 Javascript 創建游戲，但在用鼠標單擊畫布后，我無法弄清楚如何（正確）使角色沿對角線移動。 我確實設法讓角色沿對角線移動，但我無法設置速度，以便無論距離如何，它都會以相同的速度移動……您單擊越遠，它移動得越快，單擊得越近，它移動得越慢。 無論您單擊何處，我都希望速度相同。

這是我到目前為止所擁有的： http : //pastebin.com/hUJBiQHq

如何在畫布上對角移動角色？

Answer 1

我實際上繼續前進並做了很多改變。 我會試着檢查每一個。

我做的第一件事是刪除了很多setTimout調用。 你真的不需要單獨的移動和渲染。 我還讓它停止檢查游戲是否在實際加載后加載。 現在，一旦游戲加載完畢，它將開始渲染。

您還在不需要的超時內設置了onclick事件。 我把它搬到外面去了。 更好的方法和未來閱讀的主題是使用addEventListener很好地解釋here

我在頂部添加的另一件事是requestAnimationFrame的墊片，在setTimeout上使用它會更好，如果您注意到它在不支持動畫幀的瀏覽器上運行，它將在超時時回退。 此處解釋了使用它的許多好處。

現在進入手頭的問題！

 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;

現場演示一切正常

完整代碼

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

Answer 2

您應該進行從起點到終點的距離測量，然后根據該距離計算出移動的持續時間。

距離測量：

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值，直到你得到你想要的。