Sprite rotation towards mouse

Question

I want to make a shooter game in HTML, CSS, JS and JQuery, and I want the player to be able to rotate in the direction of the mouse. Can anyone tell me how to do it?

Answer 1

use Math.cos(x),Math.tan(x),Math.sin(x) e.t.c......
use Pythagorean theorem and
pageX,pageY & transform:rotate(90deg)…………
are you good with maths?? ^_^

Answer 2

https://code.sololearn.com/WeYH0p168ZUp/?ref=app

Answer 3

@visph panics when it reaches y-intercept (low values of y-axis, dunno how to fix it… /;), activates only on "move" events……

Answer 4

@visph I do Y/X (tangent) and multiply by "45" then if mouse is on first or third quarter i do "deg=90-deg" and if it is on second or fourth i do "deg+=90" (…a bit advanced but no other workaround /; …)

Answer 5

Yes! when Y/X equals to "1" this means that angle is "45"………

Answer 6

@visph any clue on how to fix that "panic"?? (i tried setting angle to 0 when mouse is close to Y but not working…… ~_~)

Answer 7

For:
- C = (cx,cy) center of the element to rotate
- M = (mx,my) mouse position
- ra rotation angle of element, with 0 toward up
We need to calculate the angle between the vector up U (0,n) and the vector V formed by segment CM ( direction is important )...
V = (vx,vy) = (mx-cx,my-cy)
... and we keep only unit vectors, so we need calculate length vl of V:
vl = squareRootOf((mx-cx)²+(my-cy)²)
V'(vx',vy') = (vx/vl,vy/vl)
Maths, and mainly geometry tell that ( remember that we rotated the trigonometric circle of 90° ):
cos(ra) = vy'
... and sign of vx' give sign of angle 'ra', so:
ra = (vx'/vx')*arcCos(vy')
<=> (vx/vx)*arcCos(vy/vl)
<=> signOf(mx-cx)*arcCos((my-cy)/squareRootOf((mx-cx)²+(my-cy)²))
In JS built-in functions, we have:
var s = Math.sign(n); // return -1, 1, 0, -0 or NaN
var a = Math.acos(n); // for n in [-1;1] return arccosine in radian ( a in [0;π] )
var r = Math.sqrt(n); // return square root of n
So:
var cx,cy,mx,my;
// here you must assign particular values ^^
var vx=mx-cx;
var s=Math.sign(vx);
if (s==0) return 0; // particular case of zero angle don't need further calculation ;)
// here you can also handle the error case of (s===NaN)...
var vy=my-cy;
var vl=Math.sqrt(vx*vx+vy*vy);
var ra=s*Math.acos(vy/vl);
And just use the angle 'ra' so set css property 'transform:rotate()' ( remember that's in radian, you must convert it in degree to use with css )...

Answer 8

@VH:
Done.
https://code.sololearn.com/W548FW09039Q/#html

Answer 9

@VH:
I don't understand exactly what you do in your code ( it seems to not be as I would do, and not as you firstly suggest ), and cannot determine what make your rotating element "panic" sometimes ( quick erratic multi rotations )... Can you explain further please?

Answer 10

@VH Yep, but what's your algo' to derterminate/aplly the angle? You seems to consider only mouse pos' relative to viewport?

Answer 11

@VH:
XD
You're still on it ;)
More readable now: I got it ^^
You cheat and approximate an angle around 45 degrees, relatively to the distant of mouse on x axis between center of viewport :P

Answer 12

@VH: No :( ... and I guess I would more quick implement my solution than searching to fix yours ^^