Question

我正在尝试使用HTML，JavaScript和CSS制作一个小游戏。它的模仿可能是2012年最着名的游戏 - Slender：The Eight 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向玩家或鼠标移动。但我希望它需要时间，因为即时进入它并不是我想要的。我希望它以恒定的速度移动，我可以用变量改变。在这种情况下，我想要一个变量＆＃34; Pages＆＃34;来改变速度。就像在，页数越高，Slendyman移动得越快。（就像在真实游戏中一样。）不同的部分是它以恒定的速度朝向光标或可以移动的组件移动，并且速度可以通过变量来改变。

我的代码会发生什么，它只是到达光标即时的位置。我不知道如何改变它，因为我只是从HTML开始，而我学习的方式非常困难 - 弄乱了一些东西。我需要一个很好的解释来理解它是如何工作的。

Answer 1

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

  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的线之间，则角度的 tan 是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来更改速度。

如何使某些东西以特定速度向光标或组件移动？

1 个答案: