Building HTML5 Games with ImpactJS

Chapter 7. Creating Game Screens and HUDs

Every game needs screens. These are usually displayed at the beginning and end of the game, along with additional screens like credits and settings. In this section, we are going to go over creating three simple screens for our game, and I’ll show you how to connect them all.

Extending Impact’s Game Class

When it comes to creating game screens, there are several approaches you can take. Use HTML to display elements on top of your game and never build any of the game screens inside of Impact; or you could easily use divs and control them via jQuery and even directly with JavaScript; or you can make your screen from custom-built levels with entities as graphics in them and use some kind of level-loading manager to switch between them. The advantages would be having one game class and being able to use the level editor to create your screens. The downside would be that any custom code you have to run your level in the game class would also run while in a game screen.

The approach I find works the best is to simply create new ig.Game classes and switch between them. This allows you to create encapsulated custom logic to handle each different game screen while maintaining code separation, as well as being able to build upon your own base game screen class. We briefly touched on Impact’s Game class early on in the book, but didn’t talk about how it really works under the hood or how you can use it to create different screens in your game.

The ig.Game ...