HTML and CSS Reference
In-Depth Information
<head>
<meta charset="UTF-8"/>
<title>Alien Invasion</title>
<link rel="stylesheet" href="base.css" type="text/css" />
</head>
<body>
<div id='container'>
<canvas id='game' width='320' height='480'></canvas>
</div>
<script src='game.js'></script>
</body>
</html>
The only external files so far are the
base.css
file, an external style sheet, and a nonexistent
game.js
file that will contain the JavaScript code for the game. Drop the HTML from
Listing 1-1
into a new directory,
and call it
index.html
.
In
base.css
you need two separate sections. The first is a CSS reset. CSS resets make sure all elements
look the same in all browsers and any per-element styling and padding is removed. To do this, the reset sets the
size of all elements to 100% (16 pixels for fonts) and removes all padding, borders, and margins. The reset used
is the well-known Eric Meyer reset:
http://meyerweb.com/eric/tools/css/reset/
.
You can simply copy the CSS code verbatim to the top of
base.css
.
Next, you need to add two additional styles to the CSS file, as shown in
Listing 1-2
.
Listing 1-2:
Base canvas and container styles
/* Center the container */
#container {
padding-top:50px;
margin:0 auto;
width:480px;
}
/* Give canvas a background */
canvas {
background-color: black;
}
The first container style gives the container a little padding at the top of the page and centers its content in
the middle of the page. The second style gives the canvas element a black background.
Getting Started with Canvas
You hopefully noticed a
canvas
tag in the middle of the HTML on the page (as shown in
Listing 1-2
)
:
<canvas id='game' width='320' height='480'></canvas>
This is where all the action for the game takes place—so much exciting stuff you can do in such an unassum-
ing tag.
