S2JS - A First Game : Detecting collisions2

A bit of a conundrum is where and when to do the collision check. For best effect, I like to do it just after I've drawn the sprites in their current locations. That way, the judgement is made based on how they last appeared. Of course at 40 FPS (frames per second), you'd need to be pretty eagle-eyed, but it may as well be as perfect as we can make it.

Here's the code:

if (ImagesTouching(bug_x, bug_y, BugImg, melon_x, melon_y, MelonImg)) { score= score + 1; melon_x= -MelonImg.width; }

Using the function is pretty straightforward -- we simply call it, passing in as parameters the x, y and image variables for the bug and the melon. The function returns a true/false result, and we use that in an if statement (remembering to use an extra set of parentheses).

If the two images are found to be touching, we add one to the score.

Recall that in Scratch, we had to hide the sprite otherwise the score would rocket upward as the melon passed through the bug? Well, it's the same here. A simple way to hide is to move into a non-visible part of the canvas, so we set its x-position to a negative value -- we move it as far off screen as it is wide: we set it's x-position to it's negative width.

<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 } 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); 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>