S2JS - A First Game : Falling watermelons in Javascript

We will set up our watermelon "sprite" as before: declaring a couple of variables to hold the x & y position, an image variable, and load the image itself. Routine stuff, but for a watermelon instead of a bug.

We also add an extra line to our Do_a_Frame function to draw the image at the appropriate coordinates:

ctx.drawImage(MelonImg, melon_x, melon_y);

<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); ctx.drawImage(MelonImg, melon_x, melon_y); } setInterval(Do_a_Frame, 25); </script> </body> </html>