Canvas Games: Part II - HTML5 Canvas - page 759

player . y = 0 ;

fillBackground ();
renderScoreBoard ();
switchGameState ( GAME_STATE_NEW_LEVEL )

}

Other new player attributes

Along with the change in the rotational velocity, we have also modified the player's width
and height attributes. These are both now 32 , which is the same as the tile width and height.
If you look at the first frame of the ship_tiles.png tile sheet, you see that the player ship does
not fill the entire 32×32 tile. It is centered in the middle, taking up roughly 24×24 of the tile,
which leaves enough space around the edges of the tile to eliminate clipping when the ship is
rotated. We also used this concept when we created the rock rotations.
The extra pixels of padding added to eliminate clipping during frame rotation pose a small
problem for collision detection. In the Chapter 8 version of the game, we used the width and
height values for bounding box collision detection. We will not use those values in this new
version because we have created two new variables to use for collision detection: hitWidth
and hitHeight . Instead of setting these values to 32 , they are 24 . This new, smaller value
makes our collision detection more accurate than if we used the entire tile width and height.

The new boundingBoxCollide() algorithm

All the other game objects also have new hitWidth and hitHeight attributes. Wemodify the
boundingBoxCollide() function from Geo Blaster Basic to use these new values for all col-
lision testing:

function function boundingBoxCollide ( object1 , object2 ) {

var var left1 = object1 . x ;

var

var left2 = object2 . x ;
var

var right1 = object1 . x + object1 . hitWidth ;
var

var right2 = object2 . x + object2 . hitWidth ;
var

var top1 = object1 . y ;
var var top2 = object2 . y ;

var

var bottom1 = object1 . y + object1 . hitHeight ;
var var bottom2 = object2 . y + object2 . hitHeight ;

iif ( bottom1 < top2 ) return return ( false false );

iif ( top1 > bottom2 ) return return ( false false );