S2JS - A First Game : Falling watermelons in Javascript2

But before we draw the image, we'll adjust it's y-position so it's a little further down the screen than for the previous frame. A bit of trial-and-error showed me that with a frame-rate of 40FPS, moving 3 pixels per frame seemed about right:

melon_y = melon_y + 3;

When it gets to the bottom, it just keeps going past the limit of the visible canvas. It will travel miles and miles past the bottom, but invisible.

<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"; function Do_a_Frame () { bug_y = myCanvas.height - BugImg.height; ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); ctx.drawImage(BugImg, bug_x, bug_y); melon_y = melon_y + 3; ctx.drawImage(MelonImg, melon_x, melon_y); } setInterval(Do_a_Frame, 25); </script> </body> </html>