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);
return(true);
}
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.
