S2JS - Objects: a game with more sprites : Adding methods

But it gets even better.

We can also add behaviours (called methods) to our object.

Every sprite in our program is going to need to draw itself for each frame, so we add the drawing behaviour as a method of MySprite.

Then, in our Do_a_Frame function, we can just call:

bug.Do_Frame_Things();

Notice that our MySprite definition also includes velocity_x and velocity_y properties, and the Do_Frame_Things method also automatically takes care of adjusting the x and y positions based on the velocity.

In a later lesson, we'll add gravity and bounciness to our MySprites, and the really cool thing is that we only have to add it in one place, and all our MySprites automatically get it.

<html> <head> <title> Bat avoiding game using Objects</title> </head> <body> <canvas id="myCanvas" width=300 height=300 style="background:url('/img/etc/night city.png'); background-size: cover"> </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.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; } MySprite.prototype.Do_Frame_Things = function() { 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 } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the background bug.Do_Frame_Things(); } var bug = new MySprite("http://s2js.com/img/etc/ladybug.png"); setInterval(Do_a_Frame, 1000/FPS); </script> </body> </html>