Game Development Reference
In-Depth Information
<script type="text/javascript" src="game.js"></script>
</head>
<body>
<div id="pages">
<section id="menu" class="current"></section>
<section id="game"></section>
<section id="help"></section>
</div>
</body>
In the <head>
The
meta
viewport tag helps to display the game on smartphones and tablets, and avoids some default
web page behaviors like zooming.
We link the CSS stylesheet with a
link
tag, and the actual game logic JavaScript script with a
script
tag.
These two resources will be loaded and executed before the page displays.
In the <body>
Instead of having multiple content HTML files, we have chosen to represent each page of the game with
an HTML5 section tag. This gives us a simple maintainable codebase. These sections are wrapped in a
<div id="pages">
. Defining an id for each section is important in order to be easily styled in CSS and
accessed via JavaScript.
We must also identify which page is currently visible. This is the goal of the "
current
" class. And that's all
for the moment; but in the coming sections, we are going to style the page in CSS and make a page router
system in JavaScript.
Note
An important convention we have taken is to order pages by navigation level.
This means the menu page comes before the game page or the help page. This will help
us in the next CSS section.
We can now focus on the content of each page. See Listing 3-3.
Listing 3-3.
Menu Section
<section id="menu">
<h1><img src="icon.png"/> Chess</h1>
<ul>
<li><a class="showOnlyIfContinuableGame" href="#!/game/continue">Continue
Game</a></li>
<li><a href="#!/game/new">New Game</a></li>
<li><a href="#!/help">Help</a></li>
</ul>
</section>
The menu is simply a title followed by a list of links, where each link targets another page. We have
chosen to start the
href
of pages with a “
#!/
”. The JavaScript router explained in the JavaScript section
will work with this convention.
