javascript - 数学返回 NaN

Question

我试图让粒子移动到 Canvas 上被点击的位置，但是公式返回 NaN。为什么会这样，我该如何解决？

• 第 1 步:将粒子正确放置在 player.x、player.y。
• 第 2 步:首先勾选粒子到 Canvas 的左上角，没有 x,y 位置。

Screenie of particle props

example at jsfiddle

粒子对象

function Shuriken(mouseX, mouseY) {
    this.rot = 0;
    this.vel = 2;
    this.angle = 0;
    this.x = player.x || WIDTH / 2;
    this.y = player.y || HEIGHT / 2;
    this.mouseX = mouseX || WIDTH /2;
    this.mouseY = mouseY || HEIGHT /2
    this.width = shurikenImg.width;
    this.height = shurikenImg.height;
}

滴答更新

Shuriken.prototype.move = function() {
    this.angle = Math.atan2(this.mouseY, this.x) * (180 / Math.PI);
    this.x += this.vel * Math.cos(this.angle);
    this.y += this.vel * Math.sin(this.angle);
}

Answer 1

1. 您将 Angular 从弧度转换为度数。更好地调试(因为学位仍然在学校教授)但是唉，下一行中的 sin 和 cos 希望它们的参数再次以弧度为单位。当然，这些功能应该仍然有效；但你得到的值(value)不再是你所期望的。

2. this.vel 在 jsfiddle 中未定义。这很可能是导致观察到的 NaN 的原因。

3. 这是一个错误的计算:

   this.x = this.vel * Math.cos(this.angle);
   this.y = this.vel * Math.sin(this.angle);
   

   您不希望以这种方式计算 x 和 y 位置。从 x/y 坐标中添加或减去(调整后的)速度。