Imposta lo sprite verso la direzione del mouse

Sto costruendo un gioco html5 su tela e ho bisogno di un modo per ottenere il mio sprite per affrontare il cursore del mouse. Ho le coordinate X e Y per lo sprite e anche le coordinate X e Y del puntatore. Tutto quello in cui sono bloccato è la matematica coinvolta nel rendere lo sprite rivolto verso il puntatore. È tutto in un mondo 2D, quindi non riesco a immaginare che sarà troppo complicato, ma ho poca esperienza con queste cose.

Anche qualsiasi link utile ad articoli / post di blog su questo genere di cose sarebbe fantastico (programmazione di giochi 2D in generale, non specificamente Javascript).

Per aggiungere, dovrei notare che ho bisogno di un angolo in gradi che mi indicherà il cursore usando le sue posizioni X e Y.

Come posso conoscere le coordinate del cursore e dove posso mettere tutte queste cose?

2d html5 html-canvas

— Robinson
fonte

Ciao, ho avuto un problema simile come te, con il tiro con l'arco. Dai un'occhiata al mio blog, se vuoi: yannbane.blogspot.com .

— jcora,

possibile duplicato di Orientamento di un modello per affrontare un bersaglio

— Nicol Bolas

Non conoscendo le API a tua disposizione, ecco la matematica di base per ottenere un angolo in gradi:

angle = math.atan2(y2 - y1, x2 - x1) * 180 / math.pi;

Lo * 180 / math.pi;converte da radianti a gradi.

— William Mariager
fonte

Si noti che l'angolo prodotto da atan2presuppone che il sistema di coordinate sia + x a destra e + y in alto . Se il tuo scende, dovrai annullare l'angolazione. Presuppone inoltre che l'oggetto sarà rivolto nella direzione (1, 0) (a destra) quando l'angolo è 0. Se è rivolto in una direzione diversa, è necessario compensare l'angolo. La mia risposta qui spiega come farlo.

— Nicol Bolas,