The next problem is the bats fall through the bottom of the canvas, but they
keep on going. You can't see them, but they're there. You'll eventually have thousands of non-visible bats plummeting miles beneath your canvas. Very untidy.
It's easy enough to check each bat's y position, and if it's greater than the height of the canvas, we'll make the bat go away.
We do it inside the Do_a_Frame function, and we also do it inside the for-loop, so the test is being done for every bat, every frame.
if (bats[i].y > myCanvas.height) {
bats.splice(i, 1);
i--;
}
Splice is a standard method available to arrays which can slice and dice arrays in all sorts of useful ways. The way we're using it here, it just
deletes a particular element of the array.
The "i--" is a little more subtle. Try taking it out and see what happens -- you may notice some of the bats blink slightly whenever a bat goes off the bottom of the screen. You can either accept it's necessary, or read below.
Imagine we're stepping through an array of five elements, numbered 0 through 4. The elements are A, B, C, D and E. We'll print them out as we go through, but if we see C, we'll delete it instead. After three times through the loop, we're looking at element number 2 - the C. We delete it, and go onto the next element, which will be number 3. But which element is number three now (remembering we count from zero)? It will be E. We will have skipped D entirely.
You need to be very careful deleting array elements as you step through them!