Game Development Reference
In-Depth Information
stylesheets, and JavaScript scripts (to learn more about all available elements, see the Other Resources
section).
The most recently released version of the HTML specification is HTML4, but for several years the fifth
version has been a work in progress and its release is imminent. But “HTML5” as a buzzword describes
more than just the next version of HTML: it includes new HTML5 tags, new (JavaScript) APIs like canvas,
video, audio, geolocation, drag and drop, and more.
Writing HTML5 is straightforward. All HTML source code should start with a doctype, a meta comment that
describes the nature of a document. For HTML5, it's simply
<!DOCTYPE html>
.
This doctype must be followed by an
<html>
tag containing all the HTML content.
This tag will contain two tags:
The
<head>
tag contains all the metadata and resources to load.
The
<body>
tag contains the body of the page; in other words, the content to display.
Listing 3-1.
Hello world in HTML
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
Bootstrapping our game
It is good practice is to keep HTML code simple, readable, semantic, and valid. Again, HTML should only
focus on “the content.” This will help to keep your application portable. A good reference for how to best
control your HTML content to keep the code simple is
Pro HTML5 and CSS3 Design Patterns
by Michael
Bowers, Dionysios Synodinos, and Victor Sumner (Apress, 2010). This topic provides solid templates and
guidelines to minimize verbosity in your HTML code.
Now let's analyze how a game is structured. You often have different pages, like the menu page, the
settings page, the about page, the help page, the high score page, and the game page itself.
For our chess game, we'll just have a menu page, a game page, and a help page.
Listing 3-2.
game.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1;" />
<title>A Chess Game</title>
<link href="game.css" rel="stylesheet">
