Rotating object to face puntatore del mouse su mousemove

Question

Nel mio gioco ho un cursore mousemove che farà scattare il mio oggetto verso il mio cursore del mouse. Vorrei che il mio oggetto ruotasse sempre per essere in linea con il mio mousecursor. Come posso convertire le X e Y di dove il cursore è in un angolo di gradi per ruotare il mio oggetto?

Spero che il mio violino renderà le cose un po 'più chiaro di quello che voglio dire a ruotando il giocatore (blocco nero): http://jsfiddle.net/3nEUv/4/

Ecco la mia funzione mouseMove ora; Solo assicurandosi che il cursore rimane in esso è casella di delimitazione

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

Answer 1

Fondamentalmente è necessario trovare il vettore tra il punto al centro della vostra scatola, e il punto del cursore del mouse, quindi calcolare l'angolo e convertirlo in gradi. Poi basta applicare l'angolo tramite 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)'}); 

COSA

Ok, prendiamo questa parte. Questo è ciò che abbiamo:

Il vettore AB va tra il centro della scatola e la posizione del mouse. Siamo andati a calcolare Θ (theta), che è l'angolo tra l'asse X e AB. Poiché AB crea un triangolo con gli assi X e Y, possiamo usare la funzione Arctan per calcolarlo. Più precisamente, si usa la funzione di comodità di Arctan2 che dà un angolo positivo quando y> 0 e angolo negativo quando y < 0.

atan2 restituisce i gradi in radianti , e CSS lavora con gradi, così abbiamo convertire tra i due utilizzando 180/Math.PI. (Un radiante è la misura di un angolo che, quando viene disegnato un angolo centrale di un cerchio, intercetta un arco la cui lunghezza è uguale alla lunghezza del raggio del cerchio. - Presa da here)

Un ultimo avvertimento - Dal momento che nel browser l'asse Y è invertito (cioè, più in basso vai nella pagina, maggiore è il valore di Y), abbiamo dovuto capovolgere l'asse Y: lo abbiamo fatto aggiungendo un segno meno sul termine Y:

- (e.pageY - boxCenter[1])

spero che questo aiuti chiare alcune cose ...

Ecco un è olated jsfiddle example

BTW, Il tuo gioco è difficile! :)

Answer 2

Ho creato uno script di rotazione per ogni elemento html con angolo di rotazione di passaggio.

auguriamo che contribuiscano

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