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'>
<meta charset='utf-8'>
<title>Color Quest</title>
<link rel="stylesheet" href="game.css">
<!-- game content here -->
<script src='js/game.js'></script>
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:
<div class="row">
<h1>Color Quest</h1>
Search WWH ::

Custom Search