Game Development Reference
In-Depth Information
The code
Now that you are familiar with the HTML5 APIs used in this fun game, let's look under
the covers and see how the game was put together. Due to brevity and ease of ex-
planation, only the main portions of the source code for this game will be listed or
explained here. Be sure to download the complete source code for the game at the
topic's website.
The HTML structure
The first component of this game was the HTML structure. The main pieces of it are
the tracks where each player moves, along with each individual player, and the con-
tainers that show the text that needs to be typed by the user. There is also a second
container that displays whatever text the player actually types in. For customization,
there is an input type range that allows the player to change the difficulty level of the
game, which for all practical purposes, only increases the speed attribute of the en-
emy player.
<section class="tracks">
<div class="track">
<span data-name="badGuy"
data-speed="0"></span>
</div>
<div class="track">
<span data-name="goodGuy"
data-speed="0"></span>
</div>
</section>
<section id="mainContainer">
<div id="wordsToWrite"></div>
<div id="wordsWritten"></div>
<button data-intent="play">Play</button>
</section>
