S2JS - Objects: a game with more sprites : Using Objects

Remember a few lessons back our very useful, but kind of unwieldy, ImagesTouching function?

The inside of the function was a bit complicated, but even if we accepted the function as magic provided for our use, it was still pretty awkward to make use of:

if (ImagesTouching(bug_x, bug_y, BugImg, melon_x, melon_y, MelonImg)) { score= score + 1; }

Now, thanks to objects, each variable is not just a single variable, but a package of everything we need to know about that particular game sprite, and all the properties travel together.

Once we redefine ImagesTouching to use our objects, it becomes much more pleasant to use:

if (ImagesTouching(bug, melon)) { score= score + 1; }

The definition of ImagesTouching is perhaps slightly more obscure than it was before, but we don't care too much about that. It's only defined once, but we'll use this function time and time again.

<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 Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the background } 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 ; } function ImagesTouching(thing1, thing2) { // // This function detects whether two MySprites are touching - very useful function // if (thing1.x >= thing2.x + thing2.MyImg.width || thing1.x + thing1.MyImg.width <= thing2.x) return false; if (thing1.y >= thing2.y + thing2.MyImg.height || thing1.y + thing1.MyImg.height <= thing2.y) return false; return true; } setInterval(Do_a_Frame, 1000/FPS); </script> </body> </html>