It's time to add a bat.
But not just one bat; we're going to have an array of bats. So we declare a variable as being an empty array.
var bats = [];
We also change our Do_a_Frame function. At the moment, it calls bug.
Do_Frame_Things(); and we also want to do that for
every bat in the bats array.
We do this using a classic for-loop, of the sort we've seen before.
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
}
}
If you're a
bit hazy on for-loops and arrays, it may be a good idea to go back to the topic on "Control, functions, loops, if-then-else" and work forward again.
Of course, no bats are appearing in the canvas
because our bats array is empty.