Game Physics - Building JavaScript Games for Phones, Tablets, and Desktop - page 336

xmin xmax

ymin

ymax

© Springer-Verlag Berlin Heidelberg 2013

Figure 26-3. Calculating the overlap rectangle using the minimum and maximum x- and y-coordinates

Now you can calculate the position and size of the overlap rectangle and return it from the method:

return new powerupjs.Rectangle(xmin, ymin, xmax - xmin, ymax - ymin);

In the collidesWith method in SpriteGameObject , you store the overlap rectangle by calling the
intersection method from the Rectangle class:

var intersect = this.boundingBox.intersection(obj.boundingBox);

Checking the Pixels in the Overlap Rectangle
The overlap rectangle's coordinates are expressed in world coordinates because both bounding
boxes are expressed in world coordinates. You first need to find out where the overlap rectangle
is locally in the two overlapping sprites. Therefore, you need to subtract the world position of each
sprite as well as its origin to find the local overlapping rectangle in each sprite:

var local = intersect.position.subtractFrom(this.worldPosition .subtractFrom(this.origin));
var objLocal = intersect.position.subtractFrom(obj.worldPosition .subtractFrom(obj.origin));

To check whether there is a collision within the overlap rectangle, you use a nested for instruction to
walk over all the pixels in the rectangle:

for (var x = 0; x < intersect.width; x++)
for (var y = 0; y < intersect.height; y++) {
// check transparency of pixel (x, y)...
}