Acknowledgments

Chapter 
2
Taking the First Steps
In This Chapter
■ 
Setting out the rules and mechanics of the game
■ 
Identifying various stages of the game
■ 
Setting up the basic HTML
■ 
Creating the first JavaScript modules
■ 
Making a splash screen using web fonts
WITH THE BACKGROUND 
and technological context covered in the previous chapter, it’s 
now time to get your hands dirty. However, before you start writing code and markup, it’s 
important to understand the project. In the first part of this chapter, I describe the rules, goals, 
and mechanics of the game. I also define the key stages of the game and identify the individual 
screens that make up the application.
With the game clearly defined, you can finally start putting down some code. Starting with 
the basics, I show you how to set up an HTML page with some simple structure to support 
the game. From there, I add some preliminary CSS and show how you can use JavaScript to 
control dynamic loading of extra scripts. I also introduce the first two JavaScript modules, 
the main application module, and a helper module to make Document Object Model (DOM) 
manipulation easier.
Finally, I turn to the first of the game stages and use web fonts to create a splash screen with 
a fancy game logo.

---

H T M L 5 G A M E S
20
Understanding the Game
The game I walk you through in this book is a match-three puzzle game, a game type made 
popular mainly by the Bejeweled game series by casual game developer PopCap Games. I 
have named the game Jewel Warrior; feel free to pick a better and more creative name as you 
go through the process.
Before you begin actually building the game, you explore the components and processes of the 
game—the core mechanics and rules of the game and the different stages of the game. From 
the initial launch of the application to the point where the player exits the game, the users see 
different stages of the application that all behave differently. Take a look at the mechanics of 
the actual game and leave other key stages such as menus and loading screens for later.