Atur sprite ke arah wajah mouse

Saya sedang membangun permainan kanvas HTML5 dan saya perlu cara untuk mendapatkan sprite saya untuk menghadapi kursor mouse. Saya memiliki koordinat X dan Y untuk sprite, dan juga koordinat X dan Y dari pointer. Yang saya terjebak dengan adalah matematika yang terlibat untuk membuat sprite menghadapi pointer. Semuanya ada di dunia 2D, jadi saya tidak bisa membayangkannya akan terlalu rumit, tapi saya punya sedikit pengalaman dengan hal ini.

Juga setiap tautan bermanfaat ke artikel / posting blog tentang hal semacam ini akan luar biasa (pemrograman game 2D pada umumnya, tidak secara khusus Javascript).

Untuk menambahkan, saya harus perhatikan bahwa saya memerlukan sudut dalam derajat yang akan mengarahkan saya ke kursor menggunakan posisi X dan Y.

Bagaimana saya bisa tahu koordinat kursor dan di mana saya meletakkan semua barang ini?

2d html5 html-canvas

— Robinson
sumber

Halo, saya punya masalah yang sama seperti Anda, dengan memanah. Lihat blog saya, jika Anda mau: yannbane.blogspot.com .

— jcora

kemungkinan duplikat dari Berorientasi model untuk menghadapi target

— Nicol Bolas

Tidak mengetahui API yang Anda inginkan, inilah matematika dasar di balik mendapatkan sudut dalam derajat:

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

The * 180 / math.pi;mengkonversi dari radian ke derajat.

— William Mariager
sumber

Perhatikan bahwa sudut yang dihasilkan oleh atan2mengasumsikan bahwa sistem koordinat adalah + x benar dan + y naik . Jika milik Anda turun, maka Anda harus meniadakan sudutnya. Ini juga mengasumsikan bahwa objek akan menghadap ke arah (1, 0) (kanan) ketika sudutnya 0. Jika menghadap ke arah yang berbeda, maka Anda perlu mengimbangi sudutnya. Jawaban saya di sini menjelaskan cara melakukannya.

— Nicol Bolas