Stellen Sie das Sprite auf die Mausrichtung ein

Ich baue ein HTML5-Canvas-Spiel und brauche eine Möglichkeit, mein Sprite auf den Mauszeiger zu richten. Ich habe die X- und Y-Koordinaten für das Sprite und auch die X- und Y-Koordinaten des Zeigers. Alles, woran ich festhalte, ist die Mathematik, mit der das Sprite zum Zeiger wird. Es ist alles in einer 2D-Welt, also kann ich mir nicht vorstellen, dass es zu kompliziert wird, aber ich habe sehr wenig Erfahrung mit diesem Zeug.

Auch hilfreiche Links zu Artikeln / Blog-Posts über solche Dinge wären fantastisch (2D-Spielprogrammierung im Allgemeinen, nicht speziell Javascript).

Zum Hinzufügen sollte ich beachten, dass ich einen Winkel in Grad benötige, der mich mit seiner X- und Y-Position zum Cursor zeigt.

Wie kann ich die Koordinaten des Cursors kennen und wo lege ich all diese Dinge ab?

2d html5 html-canvas

— Robinson
quelle

Hallo, ich hatte ein ähnliches Problem wie Sie beim Bogenschießen. Schauen Sie sich meinen Blog an, wenn Sie möchten: yannbane.blogspot.com .

— JCora

Mögliches Duplikat der Ausrichtung eines Modells auf ein Ziel

— Nicol Bolas

Da Sie die APIs nicht kennen, die Ihnen zur Verfügung stehen, finden Sie hier die grundlegende Mathematik, um einen Winkel in Grad zu erhalten:

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

Das * 180 / math.pi;rechnet es vom Bogenmaß in Grad um.

— William Mariager
quelle

Beachten Sie, dass der von erzeugte Winkel atan2davon ausgeht, dass das Koordinatensystem + x rechts und + y oben ist . Wenn Ihre nach unten geht, müssen Sie den Winkel negieren. Es wird auch davon ausgegangen, dass das Objekt in die Richtung (1, 0) (rechts) zeigt, wenn der Winkel 0 ist. Wenn es in eine andere Richtung zeigt, müssen Sie den Winkel versetzen. Meine Antwort hier erklärt, wie das geht.

— Nicol Bolas