HTML and CSS Reference
In-Depth Information
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 will 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 poses 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 will also have new hitWidth and hitHeight attributes. We
will modify the boundingBoxCollide() function from Geo Blaster Basic to use these new
values for all collision testing:
function boundingBoxCollide(object1, object2) {
var left1 = object1.x;
var left2 = object2.x;
var right1 = object1.x + object1.hitWidth;
var right2 = object2.x + object2.hitWidth;
var top1 = object1.y;
var top2 = object2.y;
var bottom1 = object1.y + object1.hitHeight;
var bottom2 = object2.y + object2.hitHeight;
if (bottom1 < top2) return(false);
if (top1 > bottom2) return(false);
if (right1 < left2) return(false);
if (left1 > right2) return(false);
Next, we will take a quick look at how we will use these same ideas to render the rest
of the game objects with the new tile sheets.
Search WWH ::

Custom Search