2

为了更好地理解三角函数在游戏开发中的工作原理，我一直在 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_length 并且adj_length是准确的，因为当我 console.log() 它们时，它们是正确的值。

您可以查看CodePen上使用的代码以获取实时示例。

有很多初始化的东西，但您只需要真正关注该canvas.onmousemove = function(event)部分，从第 50 行开始。您还可以查看我在第 68 行的绘制函数。

4

1 回答 1

2

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

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

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

atan2( y-mouse.y, mouse.x-x )
于 2016-06-24T19:33:00.680 回答