如何让我的角色沿对角线移动

How can I make my character move diagonally?

本文关键字：对角线 移动 角色 我的      更新时间：2023-09-26

我正在尝试使用HTML5 Canvas和Javascript创建一款游戏，我无法弄清楚如何(正确地)使角色在用鼠标点击画布后对角线移动。我确实设法让角色沿对角线移动，但我无法设置一个速度，以便无论距离如何，它都会以相同的速度移动……你点击得越远，它移动得越快，你点击得越近，它移动得越慢。我想要的速度是相同的，无论你点击哪里。

下面是我到目前为止的内容:http://pastebin.com/hUJBiQHq

如何在画布上对角线移动字符?

我实际上做了一些改变。

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

您还在超时内设置了onclick事件，这是不需要的。我把它搬到了外面。一个更好的方法和未来阅读的主题是使用addEventListener，这里解释得很好

我在顶部添加的另一件事是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();

你应该测量从原点到终点的距离，然后在此基础上计算出移动的持续时间。

距离测量:

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

相关文章：