S2JS - Costumes, sounds and a 2-D scroller : Animating by timer

One option is be to make a function that causes the next costume to be selected.

function Make_kid_switch_to_next_costume() { kid.costume++; if (kid.costume > 4) kid.costume= 0; }

We could call this function from a timer every 125ms:

setInterval(Make_kid_switch_to_next_costume, 125);

It works pretty well !

Try changing the code below to make the kid walk faster or slower.

<html> <head> <title>Costumes test program</title> </head> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:pink" > </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, width) { // This function creates a MySprite this.x = 0; this.y = 0; // Where is it? Start it at x=0, y=0 this.costume = 0; // Which costume is displayed ? this.costume_width = width; // How wide is each costume this.visible= true; this.velocity_x = 0; // How fast is it moving? this.velocity_y = 0; this.MyImg = new Image(); // Store the image in an Image object this.MyImg.src = img_url ; // Load the image from a 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(); // Save the drawing context state if (!this.costume_width) this.costume_width = this.MyImg.width; this.h = this.MyImg.height; // height of the image file this.w = this.costume_width; // width of a costume ctx.translate(this.x + this.w/2, this.y + this.h/2); // positioning ctx.rotate(this.angle * Math.PI / 180); // rotating if (this.flipV) ctx.scale(1,-1); // flipping if (this.flipH) ctx.scale(-1,1); if (this.visible) ctx.drawImage(this.MyImg, this.costume * this.w, 0, this.w, this.h, -this.w/2, -this.h/2, this.w, this.h); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing ctx.restore(); // unwarp the context } var bun= new MySprite("http://s2js.com/img/etc/bun.png"); bun.x=170; var kid = new MySprite("http://www.s2js.com/img/etc/boywalking.png", 115); kid.costume = 0; function Make_kid_switch_to_next_costume() { kid.costume++; if (kid.costume > 4) kid.costume= 0; } setInterval(Make_kid_switch_to_next_costume, 125); function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); bun.Do_Frame_Things(); kid.Do_Frame_Things(); } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>