Obracanie obiektu do myszy na myszy myszką

Question

Mam kursor myszy w mojej grze, który spowoduje, że mój obiekt będzie strzelał w kierunku mojego kursora myszy. Chciałbym, aby mój obiekt zawsze się obracał, aby był zgodny z moim kursorem myszy. Jak mogę przekonwertować X i Y miejsca, w którym kursor znajduje się pod kątem, aby obrócić obiekt?

Mam nadzieję, że moje skrzypce będzie dokonać rzeczy nieco jaśniejsze od tego co mam na myśli, obracając odtwarzacz (Czarny Blok): http://jsfiddle.net/3nEUv/4/

oto moja funkcja mouseMove teraz; Tylko upewniając się, że kursor pozostaje w jego obwiedni

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

Answer 1

Zasadniczo trzeba znaleźć wektor między punktem w centrum swojej skrzynce, a punkt kursora myszy, a następnie obliczyć kąt i przekształcić go do stopni. Następnie wystarczy zastosować kąt poprzez 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)'}); 

CO

Ok, weźmy to od siebie. To, co mamy:

Wektor AB przechodzi pomiędzy środku pola i pozycji myszy. Poszliśmy obliczyć Θ (theta), który jest kątem między osią X i AB. Ponieważ AB tworzy trójkąt z osiami X i Y, możemy użyć funkcji Arctan do jej obliczenia. Dokładniej, używamy funkcji wygody Arctan2 co daje dodatni kąt gdy y> 0 i ujemny kąt gdy y < 0.

atan2 zwraca wartość kąta w radianachi CSS współpracuje z stopni, więc przekonwertuj między tymi dwoma używając 180/Math.PI. (Radian jest miarą kąta, który po narysowaniu środkowego kąta okręgu przechwytuje łuk, którego długość jest równa długości promienia okręgu. - Wzięto z here)

Ostatnie zastrzeżenie - Ponieważ w przeglądarce oś Y jest odwrócona (co oznacza, im dalej w dół na stronie, tym wyższa wartość Y), musieliśmy odwrócić oś Y: Zrobiliśmy to, dodając znak minus na Y:

- (e.pageY - boxCenter[1])

mam nadzieję, że to pomaga usunąć niektóre rzeczy ...

Oto jest olated jsfiddle example

BTW, Twoja gra jest trudna! :)

Answer 2

Mam utworzyć skrypt rotacyjny dla każdego elementu html z podaniem kąta obrotu.

nadzieję, że pomoże

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'); 
    }); 
});