S2JS - Objects: a game with more sprites : Restart

Our "game over" message says you can press 'S' to restart, but we haven't done that bit yet. So here it is:

Define a function I've chosen to name restart_game which sets all our key variables up to how they should be at the start. In particular, notice that we set the bats array back to empty, and we call AddNewBat to get the bats started again.
Alter the keydown handler to check for 'S' and, if the game was over, call restart_game
Finally, instead of calling AddNewBat once, unconditionally to get things started, we instead call reset_game. Much neater.

<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; var game_over = false; 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 } function ShowScore() { ctx.fillStyle= "purple"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, 0, 20); } 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--; } } } } function restart_game() { // This gets called when the 'S' key is pressed and just sets // some important variables back to the start. // // Alternatively they could just reload the page score = 0; game_over = false; bats = []; AddNewBat(); } 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 if (MyEvent.keyCode == 83 && game_over) restart_game(); // S to restart } restart_game(); setInterval(Do_a_Frame, 1000/FPS); addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes </script> </body> </html>