HTML and CSS Reference
In-Depth Information
During the missions, we need several graphics iles, including the background and butons;
you can find the graphics from the sample code. Put all the images into a directory named
images
. The created file structure is shown in the following screenshot:
Engage thrusters
Use the following steps to create the basic game structure:
1. We will enter the following HTML code in the
index.html
file. It is a basic HTML
structure that includes the CSS ile in the head and the script tag at the botom:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Color Quest</title>
<link rel="stylesheet" href="game.css">
</head>
<body>
<!-- game content here -->
<script src='js/game.js'></script>
</body>
</html>
2. Right after the opening of the
<body>
tag and before our
<script>
tag, we add
the following HTML code for the game page. The content is divided into four parts:
header, game secion, the how-to-play secion, and footer. The game secion is
where all the game logic happens. The
#element-template
is the template of
game elements that will be used for cloning later:
<header>
<div class="row">
<h1>Color Quest</h1>
</div>
</header>
