Game Development Reference
In-Depth Information
HTML
Both of the HTML features used in this game can be used in JavaScript or by the
browser directly. The web form elements and attributes add great functionality to the
browser out of the box, while the data attributes are more meaningful when tied to
the JavaScript. In the game of our
Typography Game
, we have built these elements
within a context that made sense, but we could certainly have used other techniques
(such as storing the data represented by the data attributes strictly in code), or used
the elements and attributes we did use in different ways.
The web form
The new form API added in HTML5 is one of the most visible additions to the lan-
guage. With it you have access to 13 new input types, as well as countless new at-
tributes that make form development fast, fun, and fascinating. Most of the additions
will probably look familiar to you visually, since the effects that they add natively to
the browser had already been done for a long time. These effects include things such
as placeholder text, form validation, auto focusing fields, and so on so forth.
Two of the 13 new input types were used in the game, along with a handful of attrib-
utes for each of them, including form validation and field placeholders. Following is a
brief explanation of how these elements were used in the game. An in-depth discus-
sion of how they work and how to use them is found the the next section.
Range input
The new range input type is a slider that allows the user to select a value by moving
the slider horizontally. In the game, we used the range input as a means to select a
difficulty level. The range specified in this game is from 1 to 3, with 1 being the easi-
est difficulty level and 3 being the toughest.
