S2JS - A First Game : End game in Javascript

The steps are similar in Javascript, but without the sprite.

First we make a variable:

var time_remaining = 20;

And we display it inside our frame function:

ctx.fillText("Time Remaining: " + time_remaining, 0, 45);

I chose 45 as y-position for time remaining based on the fact I'm using a font size of 20 pixels, combined with a bit of trial-and-error to see what looked good.

It's not counting down, but that's next.

<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); ctx.fillText("Time Remaining: " + time_remaining, 0, 45); bug_y = myCanvas.height - BugImg.height; ctx.drawImage(BugImg, bug_x, bug_y); 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>