Combining Bitmaps and Sound - HTML5 Canvas - page 452

You will find the entire source code for Geo Blaster Extended ( Exam-
ple 9-1 ) later, in “Geo Blaster Extended Full Source” on page 468 .
The renderPlayer() function divides the player.rotation by 10 to determine which of
the 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 Chapter 8 's version of the game, we set this to 5 degrees. If
we had created a 72-frame tile sheet, with the player ship rotated in 5-degree incre-
ments, we could have kept the player.rotationalVelocity at 5. For Geo Blaster Ex-
tended , we only drew 36 tiles for the player ship, so we are using the value 10 for the
rotational velocity. There certainly is no reason why we could not use 72 or even 360
frames for the player ship rotation tiles. This is only limited by creative imagination
(and patience with a drawing tool).
Let's look at the rotationalVelocity value assigned earlier in the gameStateNewGame()
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;
player.alpha = 1;
player.rotation = 0;
player.x = 0;
player.y = 0;
fillBackground();
renderScoreBoard();
switchGameState(GAME_STATE_NEW_LEVEL)
}