A collision function two prevent two rectangular sprites from overlapping. Optionally, bounce them apart

rectangleCollision

/*
#### rectangleCollision

Use it to prevent two rectangular sprites from overlapping.
Optionally, make the first retangle bounceoff the second rectangle.
Parameters:
a. A sprite object with `x`, `y` `center.x`, `center.y`, `halfWidth` and `halfHeight` properties.
b. A sprite object with `x`, `y` `center.x`, `center.y`, `halfWidth` and `halfHeight` properties.
c. Optional: true or false to indicate whether or not the first sprite
should bounce off the second sprite.
*/

function rectangleCollision(r1, r2, bounce) {
  var collision, combinedHalfWidths, combinedHalfHeights,
      overlapX, overlapY, vx, vy;

  //Set `bounce` to a default value of `true`
  if(bounce === undefined) bounce = false;

  //Find the collision vector
  vx = r1.centerX - r2.centerX;
  vy = r1.centerY - r2.centerY;
 

  //Figure out the combined half-widths and half-heights
  combinedHalfWidths = r1.halfWidth + r2.halfWidth;
  combinedHalfHeights = r1.halfHeight + r2.halfHeight;

  //Check whether vx is less than the combined half widths
  if (Math.abs(vx) < combinedHalfWidths) {
    //A collision might be occurring!
    //Check whether vy is less than the combined half heights
    if (Math.abs(vy) < combinedHalfHeights) {
      //A collision has occurred! This is good!
      //Find out the size of the overlap on both the X and Y axes
      overlapX = combinedHalfWidths - Math.abs(vx);
      overlapY = combinedHalfHeights - Math.abs(vy);

      //The collision has occurred on the axis with the
      //*smallest* amount of overlap. Let's figure out which
      //axis that is

      if (overlapX >= overlapY) {
        //The collision is happening on the X axis
        //But on which side? vy can tell us
        if (vy > 0) {
          collision = "top";
          //Move the rectangle out of the collision
          r1.y = r1.y + overlapY;
        } else {
          collision = "bottom";
          //Move the rectangle out of the collision
          r1.y = r1.y - overlapY;
        }
        //Bounce
        if (bounce) {
          r1.vy *= -1;

          /*Alternative
          //Find the bounce surface's vx and vy properties
          var s = {};
          s.vx = r2.x - r2.x + r2.width;
          s.vy = 0;

          //Bounce r1 off the surface
          //bounceOffSurface(r1, s);
          */
        }
      } else {
        //The collision is happening on the Y axis
        //But on which side? vx can tell us
        if (vx > 0) {
          collision = "left";
          //Move the rectangle out of the collision
          r1.x = r1.x + overlapX;
        } else {
          collision = "right";
          //Move the rectangle out of the collision
          r1.x = r1.x - overlapX;
        }
        //Bounce
        if (bounce) {
          r1.vx *= -1;
        }
      }
    } else {
      //No collision
    }
  } else {
    //No collision
  }
  //Return the collision string. it will be either "top", "right",
  //"bottom", or "left" depening on which side of r1 is touching r2.
  return collision;
}