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

What we've got is a great structure to deal with our array of bats. Now we just need to add some bats.

The technique is very similar to that used in the Scratch program.

We define a function I've chosen to call AddNewBat
In the function we do a new MySprite(), and put the result in a temporary variable I've chosen to call noobat
Set noobat's y_velocity to a random number between 1 and 3
Push noobat into the bats array (push is a standard, predefined method available to arrays)
Finally, use setTimeout to create a single-shot timer that will call AddNewBat again in a random period of time, not more than three seconds.

All that remains is to start the flow of bats. In the Scratch program, we used "when green flag is clicked, create a clone of myself" to get the first one started. Here, we just make a single unconditional call to AddNewBat. Once the first bat occurs, the others will surely follow.

setInterval which we've used before creates a timer that continues firing at regular intervals without you having to do anything.

setTimeout creates a timer that fires one-time only for each time you make the call.

<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 } } 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 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>