Game Development Reference
In-Depth Information
The message container
This section of HTML is displayed atop a semitransparent element to give the ap-
pearance of an overlay box. The widget is primarily meant to be a generic commu-
nication tool, through which we can inform the player of events, such as letting them
know that the game is over, or that he or she won or lost the game. Additionally, we
have added four other elements to it in order to make the game more engaging.
The message title
Very similar in styling and purpose to main game title widget, this element simply no-
tifies the user of the contents of the rest of the message container widget.
The new champion form
The idea behind this form is to simulate those old-school leaderboards used in old
arcade games. Once you win a game against Mr. Snooty McSnootington, you are
given the opportunity to enter your name and e-mail address to be shown in the lead-
erboard as in the following screenshot. Of course, that information is symbolic, and
only serves the purpose of illustrating how we can use HTML5's web forms. The in-
formation generated by the form is not saved anywhere, and thus, it goes away after
each page refresh (or when the game is closed or navigated away from). Again, it
would be a trivial task to either email the contents of that form, save it to a backend
server, or even stored it locally in the browser, through any one of the many persist-
ence or storage APIs that we'll discuss in
Chapter 4
,
Using HTML5 to Catch a snake
,
later in the topic.
Leaderboard
Any data entered in the new champion form (provided that the data entered is valid)
is displayed here. The number next to each name simply shows the order that each
name was entered. The asterisk to the right of the name indicates the difficulty level
that the game was played (level 1—easy; in this particular case). For a more enga-
ging experience, we could have kept track of how long it took the player to complete
the game, how many mistakes were made, or somehow calculate an overall score
and display it here. The reason we chose a full name and an email address was
to show how to perform form validation in HTML5. This alone is probably the most
