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

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.

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 ...