HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Chapter 7

Creating the Game Display

In This Chapter

• Adding a progress bar to the splash screen

• Creating the game display module

• Drawing the jewel board with canvas

NOW THAT YOU'RE familiar with the canvas element, it's time to put that knowledge to work. The game is sorely missing some visuals, and you can now begin putting things on the screen.

The graphics you create in this chapter aren't complex. Rather, I focus on how to get the basic jewel board up and running. Before getting to that, though, I show you how you can modify the loader to preload game assets. You use that functionality to freshen up the splash screen with a progress bar as well as a new background.

I also show you the first of two different approaches to creating the graphics for the jewel board. In this chapter, you create the game graphics using the 2D canvas context; in Chapter 11, you find out how to use WebGL to create a similar display module with 3D graphics.

Tracking Load Progress

As the game evolves, more and more modules are added, so it's a good idea to provide feedback to users while the resources are loading. Currently, nothing happens until all scripts are loaded and executed. Only then is the jewel.setup() function called and the splash screen shown. If you call jewel.setup() as soon as the splash screen loads, a progress bar indicates how much has loaded. Listing 7-1 shows the changes to the loading sequence in index.html.

Listing 7-1 Calling setup earlier in the loading process