How do I rotate my rocket image to point towards the mouse position on screen

Question

How do I rotate my rocket image to point towards the mouse position on screen

Am working on a JavaScript game I want to rotate my rocket to point towards the position of the mouse

Answer 1

The answer varies a lot based on whether youre using vanilla JS or tools like Phaser, Babylon so on.

Going with direct approach, You could divide the problem and solve. But this may not be what as the question being unclear:

• Get cursor position (cx,cy) - more details from the source here
• Get image position (ix,iy). This can be simply retrieved by imgElement.getBoundingRect()
• Compute the angle of rotation as arctan((cy-iy) / (cx-ix))
• Apply this angle as css transform style for image.