web-dev-qa-db-ja.com

オブジェクトを回転させて、mousemoveでマウスポインタを向く

ゲームにマウス移動カーソルがあり、オブジェクトがマウスカーソルに向かって発射されます。オブジェクトを常に回転させて、マウスカーソルに合​​わせます。カーソルが置かれている場所のXとYを、オブジェクトを回転させる角度に変換するにはどうすればよいですか？

私のフィドルがプレーヤーを回転させることで私が意味することを少し明確にすることを願っています（黒いブロック）： http://jsfiddle.net/3nEUv/4/

これが私のmouseMove関数です。カーソルがバウンディングボックス内にあることを確認するだけ

function mouseMove(e) {
    if (cursor) {
        if (e.rawX && e.rawY) {
            cursorBoundingBox(e.rawX, e.rawY);
        }
    }
}
javascripthtmlhtml5-canvastrigonometry
18
CaptainCarl

基本的には、ボックスの中心の点とマウスカーソルの点の間のベクトルを見つけ、角度を計算して度に変換する必要があります。次に、CSSで角度を適用します。

_var box=$(".box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];

var angle = Math.atan2(e.pageX - boxCenter[0], - (e.pageY - boxCenter[1]) )*(180/Math.PI);      

box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});    
box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
_

[〜＃〜]何[〜＃〜]

これを分解してみましょう。これは私たちが持っているものです：

enter image description here

ベクトルABは、ボックスの中心とマウスの位置の間にあります。 X軸とABの間の角度であるΘ（シータ）を計算しました。 ABはX軸とY軸を持つ三角形を作成するので、Arctan関数を使用してそれを計算できます。より正確には、便利な関数 Arctan2 を使用します。これにより、y> 0の場合は正の角度、y <0の場合は負の角度が得られます。

atan2は度数をradiansで返します。CSSはdegreesで機能するため、_180/Math.PI_を使用して2つを変換します。 （ラジアンは、円の中心角を描いたときに、長さが円の半径の長さに等しい円弧を横切る角度の尺度です。- here から取得）

最後の注意点-ブラウザではY軸が反転しているため（つまり、ページを下に行くほど、Y値が高くなります）、Y軸を反転させる必要がありました。マイナス記号を追加して、 Y項：

- (e.pageY - boxCenter[1])

これがいくつかのことをクリアするのに役立つことを願っています...

これが分離された jsfiddleの例 です。

ところで、あなたのゲームは難しいです！ :)

52
OpherV

すべてのhtml要素に対して、回転角度を渡して回転スクリプトを作成しました。

それが役に立てば幸い

function MouseRotate(e, elt) {
  var offset = elt.offset();
  var center_x = (offset.left) + (elt.width() / 2);
  var center_y = (offset.top) + (elt.height() / 2);
  var mouse_x = e.pageX;
  var mouse_y = e.pageY;
  var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
  var degree = (radians * (180 / Math.PI) * -1) + 90;
  $(elt).css('-moz-transform', 'rotate(' + degree + 'deg)');
  $(elt).css('-webkit-transform', 'rotate(' + degree + 'deg)');
  $(elt).css('-o-transform', 'rotate(' + degree + 'deg)');
  $(elt).css('-ms-transform', 'rotate(' + degree + 'deg)');
}

$(document).ready(function() {
  $('#'+tagVal).mousedown(function(e) {
    $(document).bind('mousemove', function(e2) {
      rotateOnMouse(e2,$('#'+tagVal));
    });
  });
  $(document).mouseup(function(e) {
    $(document).unbind('mousemove');
  });
});
2
Devdutt Sharma