Now that we have our environment set up, we're ready to take a deep dive into the actual code behind HTML5. This is where the book begins to take off, since no matter how much theory you learn, it's very difficult to master a programming language without some keyboard time.
The game we'll be developing in this chapter will be a typing game, with some emphasis in the typography aspect of it. Again, I remind you that the focus of this book is not to teach game development, but rather to teach you all about HTML5. Thus, the general approach we'll take to coding the games will not necessarily be most optimal for general game development, although all of the games covered in the book will perform fairly well in most major browsers.
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 divs, images, and other semantic HTML5 elements. All of the animations are done using native CSS3 features.
The rest of the chapter will list all of the HTML, CSS, and JavaScript features used in the game, show examples of how to use them, and how they were used in the game. The coding style used is geared towards simplicity, so don't mind the global variables, the inconsistent use of object oriented principles, and the overall rudimentary graphics. With the basic HTML5 concepts in place, you can take the game to the next level by applying whatever additional improvements you may feel are necessary to make the game more polished or scalable from a development perspective.
We'll organize the game into three separate files: an index.html file, where we'll host all of the HTML structures and bring together the other two files, namely a CSS file and a JavaScript file. This should be a pretty standard file structure but feel free to adjust things to best fit your needs and habits.
Following the file structure convention we created last chapter when we built our web portal, we'll need to create a directory inside the root directory of our project, and call it typography. Inside this directory, we'll create the following files and directories:
packt/typographypackt/typography/index.htmlpackt/typography/fontspackt/typography/csspackt/typography/css/style.csspackt/typography/jspackt/typography/main.jspackt/typography/img