javascript - 如何使某物以一定速度移向光标或组件？

我正在尝试使用HTML，JavaScript和CSS制作一个小游戏。它以2012年最著名的游戏-Slender：The Three Pages为例。我想使Slenderman组件向鼠标光标或组件移动。

<!DOCTYPE html>
 <html>
  <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
     canvas {
     border:2px solid grey;
     background-color: forestgreen;
     }
    </style>
   </head>
 <body onload="startForest()">

<script>
  var Slendyman;

  function startForest() {
    Slendyman = new component(15, 15, "black", 675, 1330);
    Forest.start();
  }

  var Forest = {
    canvas : document.createElement("canvas"),
    start : function() {
      this.canvas.width = 1350;
      this.canvas.height = 1350;
      this.canvas.style.cursor = "none"; //hide the original cursor
      this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
      this.interval = setInterval(updateForest, 20);
      window.addEventListener('mousemove', function (e) {
        Forest.x = e.pageX;
        Forest.y = e.pageY;
      })
    },
    clear : function(){
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
  }
  function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
      ctx = Forest.context;
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }

  function updateForest() {
    Forest.clear();
    if (Forest.x && Forest.y) {
      Slendyman.x = Forest.x;
      Slendyman.y = Forest.y;
    }
    Slendyman.update();
  }
</script>
</body>
</html>

我希望Slendyman向播放器或鼠标移动。但是我想花点时间，因为立即去不是我想要的。我希望它以恒定的速度移动，可以通过变量进行更改。在这种情况下，我需要一个变量“ Pages”来更改速度。例如，Pages的数量越大，Slendyman移动的速度就越快。（就像在真实游戏中一样。）
不同的部分是事实，它以恒定的速度向着光标或可以移动的组件移动，并且可以通过变量来更改速度。

我的代码发生的事情是，它只是立即到达光标所在的位置。我不知道该如何更改，因为我只是从HTML入手，而我的学习方式却非常艰辛-乱七八糟。我需要一个很好的解释以了解其工作原理。

最佳答案

您只是将目标坐标直接复制到要移动的对象上：

  Slendyman.x = Forest.x;
  Slendyman.y = Forest.y;

这就是立即将Slendyman传输到Forest的原因。您需要做的是：

将Slendyman的运动矢量指向Forest。
沿该向量移动Slendyman一定量。

基本上，您需要做的是三角函数（在高中阶段，永远不要忽略数学！）。

好。因此，首先我们需要找到我们要移动的方向：

                           o  Forest
                          /.
                         / .
                        /  .   DY
                       /   .
                      /    .
          Slendyman  o . . .

                        DX

首先，我们计算出Slendyman和Forest之间的X和Y距离：

var DX = Forest.x - Slendyman.x;
var DY = Forest.y - Slendyman.y;

从中我们可以得到Slendyman和Forest之间的角度。您会注意到，如果所需角度在X轴与连接Slendyman和Forest的线之间，则该角度的正切值为DY / DX。因此，角度为arctan(DY/DX)。

但是，这有一个问题。请记住，tan的值有时可以是无穷大。这将使我们的程序崩溃。最安全的选择是使用arcsin或arccos。为此，我们首先需要知道斜边的长度（连接Slendyman和Forest的线）。我们可以使用毕达哥拉斯：

var HYP = Math.sqrt(DX*DX + DY*DY);

好。现在，我们已经找到了Slendyman应当移动的方向。我们使用sine。我们知道sine是opposite / hypotenuse，所以我们想要的角度是arcsine(opposite / hypotenuse)：

var direction = Math.asin(DY / HYP);

现在我们有了方向，我们可以前进了。假设您要移动10个像素：

var move_distance = 10;
var y_motion = move_distance * Math.sin(direction);
var x_motion = move_distance * Math.cos(direction);

Slendyman.x += x_motion;
Slendyman.y += y_motion;

您可以通过更改move_distance来更改速度。

关于javascript - 如何使某物以一定速度移向光标或组件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47764331/