S2JS - Rotating, flipping, pointing - another game : Rotating properties

First we add a property to the sprite: a number that indicates how rotated the image should appear.

We'll make it so an angle of zero means the image isn't rotated at all. Positive numbers rotate clockwise; negative anti-clockwise.

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 }

<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 } MySprite.prototype.Do_Frame_Things = function() { if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing 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>