S2JS - A First Game : The finished game

To finish, we'll tidy up a few things:

Instead of mentioning 25 in one place and 1/40 in another, we'll declare a FPS variable
Instead of hard-coding 3 pixels per frame, we'll declare a melon_speed variable
We'll re-order a few things, just in the interests of neatness and grouping related items
I've added comments to help make the code self-explanatory
At the end of the game, you can press 'S' to restart the game
The melons fall slightly faster each time you catch one
The game uses the entire browser screen, whatever size it happens to be
There's also a background image, because everything looks better with a background

You can now copy this game to your private work area inside S2JS.

Recall you can use S2JS as a tutor, as a place to create, store and share your own programs,
or split the screen and use our tutorials for reference and copy/paste code fragments while
you work on your own projects.

If you haven't already registered a userid, click the button to do so. Otherwise click the
button to log on and copy this program to your own area.

Once you've done so, you can enhance the game, make changes, make it your own and share it
with your friends simply by emailing them the website address to your program.

Use different images
Make the game last longer
Make the melon fall faster to begin with
Advanced: Make the melon fall on slight random diagonals
Advanced: Lose a point every time you miss a melon

<html> <head> <title> My Melon Falling Game </title> </head> <body> <canvas id="myCanvas" width=300 height=300 style="background:url('/img/etc/boardwalk.png'); background-size: cover"> </canvas> <script> var ctx = myCanvas.getContext("2d"); var bug_x = 0; var bug_y = 0; var BugImg = new Image(); BugImg.src = "http://s2js.com/img/etc/ladybug.png"; // The bug var melon_x = 0; var melon_y = 0; var MelonImg = new Image(); MelonImg.src = "http://s2js.com/img/etc/watermelon2.png"; // The melon var score = 0; var melon_speed = 3; var FPS = 40; // How many frames per second var time_remaining = 20; function restart_game() { // This gets called when the 'S' key is pressed and just sets // some important variables back to the start. // // Alternatively they could just reload the page time_remaining = 20; score = 0; melon_speed = 3; } function ImagesTouching(x1, y1, img1, x2, y2, img2) { // // This function detects whether two images are touching - very useful function // 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); // clear the background ctx.fillStyle= "purple"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, 0, 20); // display the score bug_y = myCanvas.height - BugImg.height; // ensure bug always at bottom of canvas ctx.drawImage(BugImg, bug_x, bug_y); // and draw it ctx.fillText("Time Remaining: " + Math.round(time_remaining), 0, 45); // display time remaining if (time_remaining <= 0) { // if the time has run out ctx.fillStyle= "red"; ctx.font = "bold 50px Arial"; // say so ctx.textAlign="center"; ctx.fillText("Game Over", myCanvas.width / 2, myCanvas.height / 2); ctx.font = "bold 20px Arial"; ctx.fillText("Press S to play again", myCanvas.width / 2, (myCanvas.height / 2)+50); ctx.textAlign="left"; } else { time_remaining = time_remaining - 1/FPS; // otherwise tick the time down melon_y = melon_y + melon_speed; // move the melon down the screen if (melon_y > myCanvas.height) { // if it's gone past the bottom melon_y= 0; // move it back to the top melon_x= Math.random() * (myCanvas.width - MelonImg.width); // pick a random x-position, always fully visible } } ctx.drawImage(MelonImg, melon_x, melon_y); // draw the melon if (ImagesTouching(bug_x, bug_y, BugImg, melon_x, melon_y, MelonImg)) { // check for touching score= score + 1; // add one to score melon_speed = melon_speed + 0.5; // and make it fall a bit faster melon_x= -MelonImg.width; // hide the melon so the score doesn't rocket } } setInterval(Do_a_Frame, 1000/FPS); // Call our frame renderer every this many milliseconds function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37 && bug_x > 0) {bug_x = bug_x - 10;} // left if (MyEvent.keyCode == 39 && bug_x+BugImg.width < myCanvas.width) {bug_x = bug_x+10;} // right if (MyEvent.keyCode == 83) restart_game(); // S to restart MyEvent.preventDefault(); } addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes myCanvas.width = window.innerWidth - 20; // fill the entire browser width myCanvas.height = window.innerHeight - 20; // fill the entire browser height </script> </body> </html>