How To Build Asteroids With the Impact HTML5 Game Engine: Ending the Game

By Rob Hawkes  |  eMail Email    Print Print  

Ending the game

So you now have a working game, but you can't die yet, which makes it a little pointless. The good news is that adding game over logic is super simple with Impact.

Open up the player.js entity file (for the last time, I promise), and the following code beneath the type property at the top:

  1. checkAgainst: ig.Entity.TYPE.B,

This should make sense; it's setting the player entity (which is type A) to check against objects that are type B (the asteroids). To make use of this you need to set up one more function, so add the following code above the update function:

  1. check: function(other) {

  2. // Game over

  3. this.health = 0;

  4. },

The check function is called whenever the current entity (the player) is overlapping another entity of the same type that is declared in the checkAgainst property. If the two entities are overlapping, then it's time to kill the player, so you set the health property to zero. This won't actually finish the game, but you'll add that logic next.

Open up the main.js file (for the last time) and add the following code below the background property at the top:

  1. gameOver: false,

You'll be using this property to let the game know when to be over. Add the following code above this.parent in the update function:

  1. // Run if the game is over

  2. if (this.gameOver) {

  3. if(ig.input.pressed("play") ) {

  4. ig.system.setGame(MyGame);

  5. };

  6. // Return to stop anything else updating

  7. return;

  8. };

This will stop the game from updating if the game is over, and will reset the game using the ig.system.setGame method when the enter key is pressed. Just a few lines of code can do so much!

To actually set the gameOver property you'll want to add the following code beneath this.parent in the update function:

  1. // Check for game over condition

  2. if (this.player.health == 0) {

  3. this.gameOver = true;

  4. };

If the player is dead, the game will be set to end on the next loop. Simple.

The final step in the entire game (nearly done) is to display a message when the game is over. Add the following code beneath this.background.draw in the draw function:

  1. // Game over screen

  2. if (this.gameOver) {

  3. this.font.draw("Game Over!", ig.system.width/2, 132, ig.Font.ALIGN.CENTER);

  4. this.font.draw("Press Enter", ig.system.width/2, 232, ig.Font.ALIGN.CENTER);

  5. this.font.draw("to Restart", ig.system.width/2, 272, ig.Font.ALIGN.CENTER);

  6. // Return to stop anything else drawing

  7. return;

  8. };

This uses the same code that was included with the Impact code at the beginning to display that little demo message, except this time you're using it to display a message over three separate lines. However, if you run this in your browser you'll notice that the font is absolutely tiny!

Figure 12

To fix you need to replace the 04b03.font.png in the media folder with the one from the game assets that came with this tutorial, or create your own font image using the Impact Font Tool. The result should be a much larger, more readable font.

Figure 13


The game that you've created is simple, but it shows you most of the core functionality that the Impact engine provides out of the box. I'd definitely suggest taking the game further by adding audio, bullets to destroy the asteroids, better graphics for the asteroids, and perhaps even touch-based controls for mobile devices.

So, you've now reached the end of this journey with the Impact game engine. I hope you found it as interesting and exciting as I did the first time I used it. In my opinion, Impact is a very powerful engine, and one which you should definitely consider when developing HTML5 games in the future.

If you’d like to see the game in action, check out the live demo or download the source code and run it yourself. Note that to run the demo, you’ll need to get a licensed copy of the Impact HTML5 game engine.

Good luck!


Page 4 of 4

Previous Page
1 2 3 4

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • Html5 Logo