Canvas Games: Part II - HTML5 Canvas - page 758

context . globalAlpha = 1 ;

}

NOTE

You can find the entire source code for Geo Blaster Extended ( Example A-2 ) in Appendix A .

The renderPlayer() functiondividesthe player.rotation by 10 todeterminewhichofthe
36 tiles in the shipTiles image instance to display on the canvas. If the player is in thrust
mode, the shipTiles2 image is used instead of shipTiles .

This works because we have set the ship to rotate by 10 degrees with each press of the left or
right arrow key. In the Chapter 8 version of the game, we set this to 5 degrees. If we had cre-
ated a 72-frame tile sheet, with the player ship rotated in 5-degree increments, we could have
keptthe player.rotationalVelocity at5.For GeoBlasterExtended ,wedrewonly36tiles
for the player ship, so we are using the value 10 for the rotational velocity. We certainly could
use 72 or even 360 frames for the player ship rotation tiles. This is limited only by creative
imagination (and patience with a drawing tool).

Let's look at the rotationalVelocity value assigned earlier in the gameStateNewGame()
function:

function function gameStateNewGame (){

ConsoleLog . log ( "gameStateNewGame" )
//setup new game
level = 0 ;
score = 0 ;
playerShips = 3 ;
player . maxVelocity = 5 ;
player . width = 32 ;
player . height = 32 ;
player . halfWidth = 16 ;
player . halfHeight = 16 ;
player . hitWidth = 24 ;
player . hitHeight = 24 ;
player . rotationalVelocity = 10 ; //how many degrees to turn the ship
player . thrustAcceleration = . 05 ;
player . missileFrameDelay = 5 ;
player . thrust = false

false ;
player . alpha = 1 ;
player . rotation = 0 ;
player . x = 0 ;