S2JS - A First Game : Ticking the time down

Like most things in programming, there's a bunch of different ways we could go about this -- each with their own pluses and minuses. Two alternatives that come to mind are:

We could create another timer that fires every 1000 milliseconds (once per second), and which subtracts 1 from time_remaining
Or, we could use our 40FPS timer, and subtract 1/40th of a second from time_remaining each time.

We'll take the second approach. Obviously that will lead to some funky fractional values in time_remaining, but we'll just round it as we display it:

time_remaining = time_remaining - 1/40; ctx.fillText("Time Remaining: " + Math.round(time_remaining), 0, 45);

<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); time_remaining = time_remaining - 1/40; ctx.fillText("Time Remaining: " + Math.round(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>