Question

为了更好地理解三角函数在游戏开发中的工作原理，我一直在CodePen上创建一些小的javascript片段。

我设法创建了一个使用Math.atan2()在鼠标光标处指向像素艺术霰弹枪的示例。

现在，我正在尝试使用Math.atan()函数完成同样的事情，但它无法正常运行。

这是我正在使用的逻辑代码：

canvas.onmousemove = function(event) {
  Mouse = {
    x: event.pageX,
    y: event.pageY
  }

  // These length variables use the distance formula
  var opposite_length = Math.sqrt((Mouse.x - Mouse.x) * (Mouse.x - Mouse.x) + (Mouse.y - y) * (Mouse.y - y));

  var adj_length = Math.sqrt((Mouse.x - x) * (Mouse.x - x) + (y - y) * (y - y));


  var angle_in_radians = Math.atan(opposite_length / adj_length);

  //var angle_in_radians = Math.atan2(Mouse.y - y, Mouse.x - x);

  angle = angle_in_radians * (180 / Math.PI);
}

在我的draw（）函数中，我使用以下方法将枪旋转到角度var：

cxt.rotate(angle*(Math.PI/180));

如果您取消注释以// var angle_in_radians开头的行，则一切都会突然发挥作用。

所以，atan2正在运作，但atan正在产生我想要的结果。

我知道opposite_lengt h和adj_length是准确的，因为当我在console.log（）时，它们是正确的值。

您可以查看正在使用的代码on CodePen以获取实例。

有很多初始化的东西，但你只需要关注canvas.onmousemove = function(event)部分，从第50行开始。你也可以在第68行查看我的绘图功能。

Answer 1

请注意，您的atan计算等同于

atan2( abs(mouse.y-y), abs(mouse.x-x) )

屏幕坐标与笛卡尔坐标的方向相反。要从屏幕坐标获得笛卡尔角，请使用

atan2( y-mouse.y, mouse.x-x )

使用ATAN而不是ATAN2将图像旋转到面向鼠标点

1 个答案: