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 に答える