S2JS - Rotating, flipping, pointing - another game : Rotation working properly

Here's that idea expressed in code:

ctx.translate(this.x + this.MyImg.width/2, this.y + this.MyImg.height/2); ctx.rotate(this.angle * Math.PI / 180); if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width/2, -this.MyImg.height/2);

Give it a try - it's pretty much perfect.

This was a pretty complicated process, but because of objects we can wrap the complexity up in our sprite object and not have to worry about it all the time.

But it's important for you to understand how it works so you can change it and do your own things.

Flipping the image is much easier.

<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 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 } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {thing.angle = thing.angle - 15}; // left if (MyEvent.keyCode == 39) {thing.angle = thing.angle + 15}; // right MyEvent.preventDefault(); } addEventListener("keydown", MyKeyDownHandler); 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.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 } var thing= new MySprite("http://s2js.com/img/etc/cat_grumpy.png"); thing.x=120; thing.y=120; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame thing.Do_Frame_Things(); // let the thing do its thing } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>