HTML and CSS Reference
In-Depth Information
In the
index.html
file, we will construct a basic HTML structure, which is shown as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiply Defense</title>
<link rel="stylesheet" href="styles/game.css">
</head>
<body>
<header>
<div class="row">
<h1>Multiply Defense</h1>
</div>
</header>
<section id="game" class="row">
</section>
<section class="how-to-play row">
<h2>How to Play?</h2>
<p>Run as far away as possible.</p>
</section>
<footer>
<div class="row">
<p>Copyright goes here.</p>
</div>
</footer>
<script src="vendors/easeljs-0.7.1.min.js"></script>
<script src="scripts/game.js"></script>
</body>
</html>
Engage thrusters
It's ime to deine the canvas of the game and the component's skeleton.
1. First, let's put a canvas element into our HTML file:
<section id="game" class="row">
<canvas id="canvas" width="300" height="480"></canvas>
</section>
2. In CSS, we set the dimension of the game's secion and basic posiioning for both
the game and canvas elements:
#game {
position: relative;
width: 300px;
