S2JS - Objects: a game with more sprites : The finished game

To finish off, we make the canvas be whatever size the browser window is, and move a few things around for neatness.

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.

Things to experiment with:

Can you make more or fewer bats?
Can you make bats more diagonally? (hint: randomly set the x_velocity)?
Can you make faster falling bats worth more points?
Can you make bats randomly change speed and direction as they fall?

<html> <head> <title> Bat avoiding game using Objects</title> </head> <body> <canvas id="myCanvas" width=300 height=300 style="background:url('/img/etc/night city.png'); background-size: cover"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second var score = 0; var game_over = false; function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; } MySprite.prototype.Do_Frame_Things = function() { if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing } MySprite.prototype.GoRandomX = function() { this.x = Math.random() * (myCanvas.width - this.MyImg.width); // pick a random x-position, always fully visible } function ImagesTouching(thing1, thing2) { // // This function detects whether two MySprites are touching - very useful function // if (!thing1.visible || !thing2.visible) return false; if (thing1.x >= thing2.x + thing2.MyImg.width || thing1.x + thing1.MyImg.width <= thing2.x) return false; if (thing1.y >= thing2.y + thing2.MyImg.height || thing1.y + thing1.MyImg.height <= thing2.y) return false; return true; } var bug = new MySprite("http://s2js.com/img/etc/ladybug.png"); // The bug var bats = []; // The bats function AddNewBat() { var noobat= new MySprite("http://s2js.com/img/etc/bat.png"); noobat.velocity_y = (Math.random()*2) + 1; // velocity is between 1 and 3 noobat.GoRandomX(); // position randomly bats.push(noobat); // add the noob to the array setTimeout(AddNewBat, Math.random()*3000); // never more than 3 secs between bats } function restart_game() { // This gets called when the 'S' key is pressed and just sets // some important variables back to the start. // score = 0; // no score game_over = false; // not over yet bats = []; // no bats AddNewBat(); // get the bats started } function ShowScore() { ctx.fillStyle= "purple"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, 0, 20); } function ShowGameOver() { ctx.fillStyle= "red"; ctx.font = "bold 50px Arial"; 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"; } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the background ShowScore(); // show the score bug.y = myCanvas.height - bug.MyImg.height; // ensure bug always at bottom of canvas bug.Do_Frame_Things(); // bug does what bugs do if (game_over) ShowGameOver() // if game over else { for (var i=0; i < bats.length; i++) { // otherwise for every bat: bats[i].Do_Frame_Things(); // all the bats do what all the bats do if (ImagesTouching(bug, bats[i])) game_over= true; // check for touching if (bats[i].y > myCanvas.height) { // if it's gone past the bottom bats.splice(i, 1); // delete the bat score++; // bump the score i--; // don't skip the next element } } } } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37 && bug.x > 0) {bug.x = bug.x - 10}; // left if (MyEvent.keyCode == 39 && bug.x + bug.MyImg.width < myCanvas.width) {bug.x = bug.x+10}; // right if (MyEvent.keyCode == 83 && game_over) restart_game(); // S to restart } myCanvas.width = window.innerWidth - 20; // fill the entire browser width myCanvas.height = window.innerHeight - 20; // fill the entire browser height setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes restart_game(); // and start </script> </body> </html>