Establecer el sprite para orientar la cara del mouse

Estoy construyendo un juego de lienzo html5 y necesito una forma de hacer que mi sprite mire el cursor del mouse. Tengo las coordenadas X e Y para el sprite, y también las coordenadas X e Y del puntero. Todo lo que estoy atrapado es la matemática involucrada para hacer que el sprite mire al puntero. Todo está en un mundo 2D, por lo que no puedo imaginar que sea demasiado complicado, pero tengo muy poca experiencia con estas cosas.

Además, cualquier enlace útil a artículos / publicaciones de blog sobre este tipo de cosas sería increíble (programación de juegos 2D en general, no específicamente Javascript).

Para agregar, debo tener en cuenta que necesito un ángulo en grados que me apunte hacia el cursor usando su posición X e Y.

¿Cómo puedo saber las coordenadas del cursor y dónde coloco todo esto?

2d html5 html-canvas

— Robinson
fuente

Hola, tuve un problema similar como tú, con el tiro con arco. Mira mi blog, si quieres: yannbane.blogspot.com .

— jcora

posible duplicado de Orientar un modelo para enfrentar un objetivo

— Nicol Bolas

Sin conocer las API a su disposición, aquí están las matemáticas básicas para obtener un ángulo en grados:

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

La * 180 / math.pi;convierte de radianes a grados.

— William Mariager
fuente

Tenga en cuenta que el ángulo producido por atan2supone que el sistema de coordenadas es + x derecha y + y arriba . Si el suyo se cae, deberá negar el ángulo. También supone que el objeto estará orientado hacia la dirección (1, 0) (derecha) cuando el ángulo sea 0. Si está orientado en una dirección diferente, entonces necesita compensar el ángulo. Mi respuesta aquí explica cómo hacer eso.

— Nicol Bolas