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?
quelle
Antworten:
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:
Das
* 180 / math.pi;rechnet es vom Bogenmaß in Grad um.quelle
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.