Вращение объектного указателя мыши на mousemove

У меня есть курсор mousemove в моей игре, который заставит объект стрелять к моему курсору мыши. Я бы хотел, чтобы мой объект всегда вращался, чтобы соответствовать моей мышике. Как я могу преобразовать X и Y, где курсор находится под углом градуса, чтобы повернуть мой объект?

Надеюсь, моя скрипка немного улучшит то, что я имею в виду, повернув игрока (черный блок): http://jsfiddle.net/3nEUv/4/

Здесь моя функция mouseMove теперь; Только убедитесь, что курсор остается в нем ограничивающей рамкой

function mouseMove(e) {
    if (cursor) {
        if (e.rawX && e.rawY) {
            cursorBoundingBox(e.rawX, e.rawY);
        }
    }
}

Ответы

Ответ 1

В основном вам нужно найти вектор между точкой в ​​центре вашего поля и точкой курсора мыши, а затем вычислить угол и преобразовать его в градусы. Затем просто примените угол через 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 возвращает градусы в радианах, а CSS работает со степенями, поэтому мы конвертируем между ними с помощью 180/Math.PI. (Радиан - это мера угла, который при наведении центрального угла круга перехватывает дугу, длина которой равна длине радиуса круга. - Взято из здесь)

Последнее предостережение. Поскольку в браузере ось Y инвертирована (что означает, что чем дальше вы идете по странице, тем выше значение Y), нам пришлось перевернуть ось Y: мы сделали это, добавив знак минус на члене Y:

- (e.pageY - boxCenter[1])

Надеюсь, это поможет прояснить некоторые вещи...

Здесь изолированный пример jsfiddle

Кстати, твоя игра сложная!:)

Ответ 2

Я создал поворот script для каждого элемента 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');
  });
});