HTML and CSS Reference
In-Depth Information
Figure 5-9.
All systems go.
Ship controls
With the ship now built, let's get its controls working. As we mentioned, it has three controls: turn left, turn
right, and fire rocket, mapped to the left, right, and up keys, respectively. The basic structure of this
example is similar to
08-acceleration-3.html
, listed earlier in the chapter, with handlers for the
keydown
and
keyup
events and a
switch
statement to handle the keys that were pressed. Because we're
drawing a white ship in outer space, we need to change the canvas element background color to black—
so we can see it. We can do this by adding a CSS style to the document header. First, here's the code for
the complete file, then we'll step through it (example
11-ship-sim.html)
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ship Sim</title>
<link rel="stylesheet" href="style.css">
<style>
#canvas {
background-color: #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ship.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ship = new Ship(),
vr = 0,
vx = 0,
vy = 0,
