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 .
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 ();
}
Search WWH ::




Custom Search