Game Development Reference
In-Depth Information
powerful and exciting feature of HTML5 used in this game. What used to take deve-
lopers hundreds of lines of code, and often lots of repeated code, now only takes a
couple of HTML attributes that the browser enforces.
Game controls
Finally, the message container widget includes controls that allows the player to start
a new game.
Note
In order to make the code more concise and easier to explain, we'll be aiming at
less portable code, where the only requirement will be that the code runs prop-
erly in at least one browser.
Most of the APIs used are indeed very portable (meaning that the code executes
the same in most major browsers), but certainly not all of it, especially any ex-
perimental CSS APIs that require vendor prefixes. For maximum compatibility
with the following examples, I recommend you use the latest version of Google
Chrome
or Google
Chromium
, or at least any webkit-based browser, such as
Apple Safari.
The reason for this approach, first and foremost, is to simplify the teaching pro-
cess. There's no need to explain a given feature, then show code example that
is 99 percent identical, but differs only in the first part of the feature name, which
is the vendor name. The reasoning behind selecting webkit as the browser en-
gine of choice is also very simple; we had to choose something, so why not web-
kit? Besides, Google Chrome and Apple Safari have great market penetration,
as well as an incredible set of tools to help us in the development process (such
as Google Chrome's Developer Tools).
Finally, the
nine
HTML5 elements used in the game, along with their corresponding
category:
