HTML and CSS Reference
In-Depth Information
Figure 8-4. The player ship with thrust engaged
The
drawScreen()
function code to add this extra “thrust” graphic is very simple; see
Example 8-3. Drawing the player ship with thrust
function
function
drawScreen
() {
// draw background and text
context
.
fillStyle
=
'#000000'
;
context
.
fillRect
(
0
,
0
,
200
,
200
);
context
.
fillStyle
=
'#ffffff'
;
context
.
font
=
'20px sans-serif'
;
context
.
textBaseline
=
'top'
;
context
.
fillText
(
"Player Ship - Thrust"
,
0
,
180
);
//drawShip
context
.
strokeStyle
=
'#ffffff'
;
context
.
beginPath
();
context
.
moveTo
(
10
,
0
);
context
.
lineTo
(
19
,
19
);
context
.
lineTo
(
10
,
9
);
context
.
moveTo
(
9
,
9
);
context
.
lineTo
(
0
,
19
);
context
.
lineTo
(
9
,
0
);
//draw thrust
context
.
moveTo
(
8
,
13
);
context
.
lineTo
(
11
,
13
);
context
.
moveTo
(
9
,
14
);
context
.
lineTo
(
9
,
18
);
context
.
moveTo
(
10
,
14
);
context
.
lineTo
(
10
,
18
);
context
.
stroke
();
context
.
closePath
();
}