S2JS - Rotating, flipping, pointing - another game : The angle to the mouse

First we're going to calculate the x and y distance between the mouse-pointer and the centre of the image.

The centre of the image is its top/left plus half its height/width.

var distance_x = target_x - (this.x + this.MyImg.width/2); var distance_y = target_y - (this.y + this.MyImg.height/2);

Then we calculate the angle using some trigonometry magic, specifically a special type of arc-tangent called atan2 which is like a normal arctan but extended for game-coding.

Don't worry if you haven't studied this level of trigonometry yet -- just be happy the Greek's invented it 2000 years ago and it still works today.

this.angle = (Math.atan2(distance_y, distance_x) * 180 / Math.PI) + 90;

If you don't understand the trig, don't sweat it -- this stuff gets embedded in an object and just works. It's good to understand things, but trigonometry is a big area to get your head around, and if you're not already doing so, just accept it as alien magic and use it.

Move the mouse or slide your finger over the canvas.

<html> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:MediumSeaGreen"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second var mouse_x = 0; var mouse_y = 0; // Where is the mouse function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; this.angle = 0; // How many degrees we are rotated this.flipV = false; // Are we flipped vertically this.flipH = false; // Are we flipped horizontally } MySprite.prototype.Do_Frame_Things = function() { ctx.save(); ctx.translate(this.x + this.MyImg.width/2, this.y + this.MyImg.height/2); ctx.rotate(this.angle * Math.PI / 180); if (this.flipV) ctx.scale(1,-1); if (this.flipH) ctx.scale(-1,1); if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width/2, -this.MyImg.height/2); ctx.restore(); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing } function MyTouchMoveHandler(MyEvent) { var rect = myCanvas.getBoundingClientRect(); mouse_x = MyEvent.touches[0].clientX - rect.left; mouse_y = MyEvent.touches[0].clientY - rect.top; MyEvent.preventDefault() } addEventListener("touchmove", MyTouchMoveHandler); addEventListener("touchstart", MyTouchMoveHandler); function MyMouseMoveHandler (MyEvent) { var rect = myCanvas.getBoundingClientRect(); mouse_x= MyEvent.clientX - rect.left; mouse_y= MyEvent.clientY - rect.top; } addEventListener("mousemove", MyMouseMoveHandler); MySprite.prototype.Point_Towards = function(target_x, target_y) { var distance_x = target_x - (this.x + this.MyImg.width/2); var distance_y = target_y - (this.y + this.MyImg.height/2); this.angle = (Math.atan2(distance_y, distance_x) * 180 / Math.PI) + 90; } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame jelly.Point_Towards(mouse_x, mouse_y); // tell jelly to point to mouse jelly.Do_Frame_Things(); // let the jelly do its thing } var jelly= new MySprite("http://s2js.com/img/etc/jellyfish2.png"); jelly.x=120; jelly.y=120; setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>