Learn HTML5 by Creating Fun Games: Learning should be fun, especially when it comes to getting to grips with HTML5 Game Development. Each chapter of this book teaches a new concept for learning HTML5 by helping you develop a relevant game. It's education without the effort.

For lack of creativity, and to steer away from a possible lawsuit from a grumpy game company, we'll name this first game simply Typography Game. I know, that's not the most impressive game you've heard of, but at least it does a great job of explaining what the game is generally about.

The overall storyline for the game, as well as its general point, goes as follows: correctly type a phrase that is shown to you word-by-word, and win your dream boat. If you don't type each character correctly and fast enough then Snooty McSnootington wins the boat and you lose the game skills.

It's hard to convey all the details about this user interface from a single screenshot, but the waves in that beautiful ocean are actually very smoothly animated, as well as the boat, which floats freely and is tossed about by the waves. Also, although there are exactly six images in the entire game, all of the components used in this game are DOM elements. The boat, the waves, and the characters are done using...

There were nine HTML5 elements used in this game. Each will be explained within its main category of either HTML, CSS, or JavaScript. The game itself is composed of roughly 15 elements, as depicted in the illustrations as follows:

The main game screen, with a subtle options widget as part of it.

After a game is finished, whether or not the player wins the game, a score board is shown, where the player is given the opportunity to enter his or her name as well as start a new game.

The preceding screenshot shows a messaging widget to indicate that the player has won or lost, as well as a leaderboard widget.

In order for us to easily identify each of the major visual game components, we'll list them as follows:

Now that we've discussed what all of the game elements are and how each HTML5 feature was used to fulfill that role, let's take a deeper look at how to make the most out of each of these APIs. For each of the following APIs, we'll provide a more concrete definition of the feature, what its intended use is, and a code example will follow. You may also refer to the complete source code attached at the end of the chapter in order to fill the gap between the code sample and how that feature fits in with the rest of the game code base. It is also recommended that you code along and play with the various settings and values in order to experiment with and more fully understand each API.

Now that you are familiar with the HTML5 APIs used in this fun game, let's look under the covers and see how the game was put together. Due to brevity and ease of explanation, only the main portions of the source code for this game will be listed or explained here. Be sure to download the complete source code for the game at the book's website.

<section class="tracks">
  <div class="track">
    <span data-name="badGuy" data-speed="0"...

In this chapter, we finally jumped off the spring board we set up in the previous chapter, and dove headfirst into the very deep world of HTML5 game development. We started out by setting up the project structure used in constructing this game and discussed the main goals and objectives of the game. Next, we looked at each of the components used in the game and discussed how and why they were used. Finally, we look a deeper look at each of the HTML5 APIs, that make up each of these components, and looked at some code examples to make them work.

Since the complete source code for the game is fairly lengthy, we only took a brief peek at the main structure of the code, so that when you download the full source from Packt's website, the code looks somewhat familiar to you. Again, I want to remind you that because the focus of this book is not game development but rather HTML5, the methods and techniques used to make this game may or may not be the most optimal approach to game development...