S2JS - Objects: a game with more sprites : Positioning the bat

Obviously the bats are all falling in a line, but we want them to appear at random x-positions.

It'd be easy enough to add a line of code, but I'm going to do it by creating another method, just to show how our MySprite object can have lots of methods. In your own projects, you'll develop your objects with many, many methods so they become powerful subsystems in their own right.

Here's the new method. The calculation of the random x-position is the same as in the melon-catching game.

MySprite.prototype.GoRandomX = function() { this.x = Math.random() * (myCanvas.width - this.MyImg.width); // pick a random x-position, always fully visible }

To use it, we just call it in AddNewBat().

Even though the method is only a single line of code, making it part of the MySprite object means if we ever find something isn't quite right with that line of code, we only have to fix it in one place.

<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.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; } 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 } function ImagesTouching(thing1, thing2) { // // This function detects whether two MySprites are touching - very useful function // if (!thing1.visible || !thing2.visible) return false; 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; } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37 && bug.x > 0) {bug.x = bug.x - 10}; // left if (MyEvent.keyCode == 39 && bug.x + bug.MyImg.width < myCanvas.width) {bug.x = bug.x+10}; // right } var bug = new MySprite("http://s2js.com/img/etc/ladybug.png"); // The bug var bats = []; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the background bug.y = myCanvas.height - bug.MyImg.height; // ensure bug always at bottom of canvas bug.Do_Frame_Things(); // bug does what bugs do for (var i=0; i < bats.length; i++) { bats[i].Do_Frame_Things(); // all the bats do what all the bats do } } MySprite.prototype.GoRandomX = function() { this.x = Math.random() * (myCanvas.width - this.MyImg.width); // pick a random x-position, always fully visible } function AddNewBat() { var noobat= new MySprite("http://s2js.com/img/etc/bat.png"); noobat.velocity_y = (Math.random()*2) + 1; // velocity is between 1 and 3 noobat.GoRandomX(); bats.push(noobat); setTimeout(AddNewBat, Math.random()*3000); // never more than 3 secs between bats } AddNewBat(); // Unleash the flow of bats setInterval(Do_a_Frame, 1000/FPS); addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes </script> </body> </html>