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

To detect a "game over" situation, we do the following:

Declare a variable which I've chosen to name game_over. It's a boolean, and we'll use it to keep track of whether the game has finished or not.
Created a function I've chosen to name ShowGameOver, which does a series of fillTexts to display an appropriate message. Again, I could have done it inside Do_a_Frame, but it's nice to keep things short and readable.
In Do_a_Frame, if the game_over flag is true, we call ShowGameOver. Otherwise we do the for-loop that handles all the bats.
Finally, inside the for-loop, we check each bat to see if it's touching the bug. If it is, we set the game_over flag.

<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 var score = 0; 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 } MySprite.prototype.GoRandomX = function() { this.x = Math.random() * (myCanvas.width - this.MyImg.width); // pick a random x-position, always fully visible } 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 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 function ShowScore() { ctx.fillStyle= "purple"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, 0, 20); } var game_over = false; function ShowGameOver() { ctx.fillStyle= "red"; ctx.font = "bold 50px Arial"; ctx.textAlign="center"; ctx.fillText("Game Over", myCanvas.width / 2, myCanvas.height / 2); ctx.font = "bold 20px Arial"; ctx.fillText("Press S to play again", myCanvas.width / 2, (myCanvas.height / 2)+50); ctx.textAlign="left"; } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the background ShowScore(); bug.y = myCanvas.height - bug.MyImg.height; // ensure bug always at bottom of canvas bug.Do_Frame_Things(); // bug does what bugs do if (game_over) ShowGameOver() else { for (var i=0; i < bats.length; i++) { bats[i].Do_Frame_Things(); // all the bats do what all the bats do if (ImagesTouching(bug, bats[i])) game_over= true; // check for touching if (bats[i].y > myCanvas.height) { // if it's gone past the bottom bats.splice(i, 1); // delete the bat score++; // bump the score i--; } } } } setInterval(Do_a_Frame, 1000/FPS); addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes </script> </body> </html>