S2JS - A First Game : Stopping the game

Clearly we're going to check when time_remaining gets to zero and then do something. But because we're ticking down in 1/40's of a second, it's possible that it'll never be exactly equal to zero so we'll check for zero or less:

if (time_remaining <= 0) {

If it is, we'll display our game over message. There's no need to do that using an image (as we did in Scratch) - we can just write the words we want.

We'll select a large bold font, and we'll make it red. For the x and y position, we'll specify the exact middle of the canvas (half the height, half the width).

More interestingly, we'll introduce a new feature of the canvas called textAlign, which says that instead of displaying the text starting at the x-y specified, it will be centred at the x-y specified.

ctx.fillStyle= "red"; ctx.font = "bold 50px Arial"; ctx.textAlign="center"; ctx.fillText("Game Over", myCanvas.width / 2, myCanvas.height / 2); ctx.textAlign="left";

But how to stop the script? The magic in this lies in the else part of the if -- it includes all those things we don't want to do once the game is over, including changing the score, changing the time, and moving the melon.

<html> <body> <canvas id="myCanvas" width=300 height=300 style="border:1px solid"> </canvas> <script> var ctx = myCanvas.getContext("2d"); function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37 && bug_x > 0) {bug_x = bug_x - 10}; if (MyEvent.keyCode == 39 && bug_x+BugImg.width < myCanvas.width) {bug_x = bug_x+10}; } addEventListener("keydown", MyKeyDownHandler); var bug_x = 0; var bug_y = 0; var BugImg = new Image(); BugImg.src = "http://s2js.com/img/etc/ladybug.png"; var melon_x = 0; var melon_y = 0; var MelonImg = new Image(); MelonImg.src = "http://s2js.com/img/etc/watermelon2.png"; var score = 0; function ImagesTouching(x1, y1, img1, x2, y2, img2) { if (x1 >= x2+img2.width || x1+img1.width <= x2) return false; // too far to the side if (y1 >= y2+img2.height || y1+img1.height <= y2) return false; // too far above/below return true; // otherwise, overlap } var time_remaining = 20; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); ctx.fillStyle= "purple"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, 0, 20); bug_y = myCanvas.height - BugImg.height; ctx.drawImage(BugImg, bug_x, bug_y); ctx.fillText("Time Remaining: " + Math.round(time_remaining), 0, 45); if (time_remaining <= 0) { ctx.fillStyle= "red"; ctx.font = "bold 50px Arial"; ctx.textAlign="center"; ctx.fillText("Game Over", myCanvas.width / 2, myCanvas.height / 2); ctx.textAlign="left"; } else { time_remaining = time_remaining - 1/40; melon_y = melon_y + 3; if (melon_y > myCanvas.height) { melon_y= 0; melon_x= Math.random() * (myCanvas.width - MelonImg.width); } } ctx.drawImage(MelonImg, melon_x, melon_y); if (ImagesTouching(bug_x, bug_y, BugImg, melon_x, melon_y, MelonImg)) { score= score + 1; melon_x= -MelonImg.width; } } setInterval(Do_a_Frame, 25); </script> </body> </html>