chkMapMove - Scrolls background objects

(use arrow keys to move character)

NOTE: This uses Spritify 1.0.3 and does not work on my website as I have switched to the 2.x version. I will be rewriting this for the 2.x version shortly.

 
  $(document).ready(function() {
    $('#character').spritify({ 
      image : '/sites/all/themes/epiphany/scripts/spritify/character.png',
      collisionDetection : chkScrollMove
    });
 
  function chkScrollMove(settings,obj,dir) {
 
    //set the map object
    var map = $('#map');
 
    switch(dir) {
      case'front':
        // if the obj is less than or equal to 2x distanceOnPress from the bottom of the stage
        // AND the obj is not greater than or equal to 2x distanceOnPress from the top of the stage
        // AND the "map" graphic is not at the bottom
        // AND the obj will not collide
        if (obj.position().top <= (obj.parent().height() - (settings.distanceOnPress * 2)) 
          && obj.position().top >= (settings.distanceOnPress * 2)
          && (Math.abs(map.position().top) + obj.parent().height()) < (map.height() - settings.distanceOnPress)
          && chkCollisions(settings,obj,dir)) {
            //move all background objects and NOT the main object
            obj.siblings().each(function() {
              $(this).animate({top: '-='+settings.distanceOnPress}, settings.charSpeed, "linear");
          });
        } 
        else if (obj.position().top + settings.distanceOnPress < obj.parent().height()
          && chkCollisions(settings,obj,dir)) { 
            //move main object
            return true;
        } 
        break;
      case'back':
        // if the obj is greater than or equal to 2x distanceOnPress from the bottom of the stage
        // AND the obj is less than 2x distanceOnPress from the top of the stage
        // AND the "map" graphic is not at its top
        // AND the obj will not collide
        if (obj.position().top >= (settings.distanceOnPress * 2) 
          && obj.position().top < (obj.parent().height() - (settings.distanceOnPress * 2))
          && map.position().top < (0 - settings.distanceOnPress)
          && chkCollisions(settings,obj,dir)) {
            //move all background objects and NOT the main object
            obj.siblings().each(function() {
              $(this).animate({top: '+='+settings.distanceOnPress}, settings.charSpeed, "linear");
            });
        } 
        else if (obj.position().top - settings.distanceOnPress >= 0
          && chkCollisions(settings,obj,dir)) { 
            //move main object
            return true;
        } 
        break;
      case'left':
        // if the obj is less than 2x distanceOnPress from the left of the stage
        // AND the obj is greater than or equal to 2x distanceOnPress from the right of the stage
        // AND the "map" graphic is not at the right
        // AND the obj will not collide
        if (obj.position().left < (obj.parent().width() - (settings.distanceOnPress * 2)) 
          && obj.position().left >= (settings.distanceOnPress * 2)
          && map.position().left < (0 - settings.distanceOnPress)
          && chkCollisions(settings,obj,dir)) {
            //move all background objects and NOT the main object
            obj.siblings().each(function() {
              $(this).animate({left: '+='+settings.distanceOnPress}, settings.charSpeed, "linear");
            });
        } 
        else if (obj.position().left - settings.distanceOnPress >= 0
          && chkCollisions(settings,obj,dir)) { 
            //move main object
            return true;
        } 
        break;
      case'right':
        // if the obj is less than or equal to 2x distanceOnPress from the left of the stage
        // AND the obj is greater than or equal to 2x distanceOnPress from the right of the stage
        // AND the "map" graphic is not at the left
        // AND the obj will not collide
        if (obj.position().left <= (obj.parent().width() - (settings.distanceOnPress * 2)) 
          && obj.position().left >= (settings.distanceOnPress * 2)
          && (Math.abs(map.position().left) + obj.parent().width()) < (map.width() - settings.distanceOnPress)
          && chkCollisions(settings,obj,dir)) {
            //move all background objects and NOT the main object
            obj.siblings().each(function() {
              $(this).animate({left: '-='+settings.distanceOnPress}, settings.charSpeed, "linear");
            });
        } 
        else if (obj.position().left + settings.distanceOnPress < obj.parent().width()
          && chkCollisions(settings,obj,dir)) { 
            //move main object
            return true;
         } 
        break;
    }
    //end switch
 
    //no validation occured, do not allow movement
    return false;
 
  }  //END chkScrollMove
 
 
  function chkCollisions(settings,obj,dir) {
 
    var collisionClass = $('.impassable');
    var objPos = getPositions(obj);
 
    //add the movement distance to the current position
    switch(dir) {
      case'front':
        objPos[1][0] += settings.distanceOnPress;
        objPos[1][1] += settings.distanceOnPress; 
        break;
      case'back':
        objPos[1][0] -= settings.distanceOnPress;
        objPos[1][1] -= settings.distanceOnPress;
        break;
      case'left':
        objPos[0][0] -= settings.distanceOnPress;
        objPos[0][1] -= settings.distanceOnPress; 
        break;
      case'right':
        objPos[0][0] += settings.distanceOnPress;
        objPos[0][1] += settings.distanceOnPress;
        break;
    }  //end switch
 
    var collided = false;
 
    collisionClass.each(function() {
 
      var divPos = getPositions($(this));
      var chkWidth = comparePositions(objPos[0], divPos[0]);
      var chkHeight = comparePositions(objPos[1], divPos[1]);
 
      if (chkWidth && chkHeight) collided = true;
 
    });
 
    if (collided) {
      return false;
    }
    else {
      return true;
    }
 
  } //END chkCollisions
 
  function getPositions(obj) {
      var pos, width, height;
      pos = $(obj).position();
      width = $(obj).width();
      height = $(obj).height();
      return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }
 
  function comparePositions(p1,p2) {
    var r1, r2;
    //set r1 = to the furthest left element
    //set r2 = the other element
    r1 = p1[0] < p2[0] ? p1 : p2;
    r2 = p1[0] < p2[0] ? p2 : p1;
    //return 'true' if the value of the width of the far left element is intersected by the next element
    //OR return 'true; if the two objects are in line
    return r1[1] > r2[0] || r1[0] === r2[0];
  }
});
<style type="text/css">
#character {
  position: absolute;
  top: 32px;
}
 
#stage {
	  position: relative;
          float: right;
	  width: 320px;
	  height: 320px;
	  margin-left: 10px;
	  border: solid 2px #000;
	  overflow: hidden;
  }
 
  #map {
	  position: absolute;
	  width: 800px;
	  height: 800px;
	  background: url('/sites/all/themes/epiphany/scripts/spritify/map.jpg') no-repeat;
  }
 
  #object1 {
	position: absolute;
	width: 800px;
	height: 32px;
	top: 0px;
	left: 0px;
  }
  #object2 {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 32px;
	left: 96px;
  }
 #object3 {
	position: absolute;
	width: 64px;
	height: 32px;
	top: 32px;
	left: 224px;
  }
#object4 {
	position: absolute;
	width: 64px;
	height: 32px;
	top: 32px;
	left: 416px;
  }
#object5 {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 32px;
	left: 608px;
  }
#object6 {
	position: absolute;
	width: 96px;
	height: 384px;
	top: 96px;
	left: 0px;
  }
#object7 {
	position: absolute;
	width: 416px;
	height: 32px;
	top: 96px;
	left: 192px;
  }
#object8 {
	position: absolute;
	width: 96px;
	height: 384px;
	top: 96px;
	left: 704px;
  }
#object9 {
	position: absolute;
	width: 32px;
	height: 352px;
	top: 128px;
	left: 192px;
  }
#object10 {
	position: absolute;
	width: 32px;
	height: 352px;
	top: 128px;
	left: 576px;
  }
#object11 {
	position: absolute;
	width: 192px;
	height: 32px;
	top: 448px;
	left: 192px;
  }
#object12 {
	position: absolute;
	width: 160px;
	height: 32px;
	top: 448px;
	left: 416px;
  }
#leftTreeinGrave{
	position: absolute;
	width: 32px;
	height: 32px;
	top: 128px;
	left: 224px;
  }
#rightTreeinGrave{
	position: absolute;
	width: 32px;
	height: 32px;
	top: 128px;
	left: 544px;
  }
#graveFlowers{
	position: absolute;
	width: 160px;
	height: 32px;
	top: 224px;
	left: 320px;
  }
#grave{
	position: absolute;
	width: 32px;
	height: 32px;
	top: 256px;
	left: 384px;
  }
#leftTreeRow {
	position: absolute;
	width: 32px;
	height: 160px;
	top: 480px;
	left: 0px;
  }
#leftRock {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 608px;
	left: 32px;
  }
#blTreeRow {
	position: absolute;
	width: 160px;
	height: 32px;
	top: 640px;
	left: 0px;
  }
#object13Tree {
	position: absolute;
	width: 32px;
	height: 64px;
	top: 640px;
	left: 160px;
  }
#blTreeVertRow {
	position: absolute;
	width: 32px;
	height: 128px;
	top: 672px;
	left: 128px;
  }
#verybottomtreerow {
	position: absolute;
	width: 640px;
	height: 32px;
	top: 768px;
	left: 160px;
  }
#nextbottomtreerow {
	position: absolute;
	width: 416px;
	height: 32px;
	top: 736px;
	left: 192px;
  }
#nextbottomtree1 {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 736px;
	left: 640px;
  }
#nextbottomtree2 {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 736px;
	left: 704px;
  }
#bottomtreerow3 {
	position: absolute;
	width: 64px;
	height: 32px;
	top: 704px;
	left: 384px;
  }
#bottomtreerow3two {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 704px;
	left: 576px;
  }
#bottomtreerow4 {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 672px;
	left: 416px;
  }
#rightTreeRow {
	position: absolute;
	width: 32px;
	height: 160px;
	top: 480px;
	left: 768px;
  }
#bush1 {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 544px;
	left: 160px;
  }
#tree1 {
	position: absolute;
	width: 32px;
	height: 64px;
	top: 512px;
	left: 256px;
  }
#bush2 {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 608px;
	left: 512px;
  }
#rock2 {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 608px;
	left: 672px;
  }
</style>
<div id="stage">
  <div id="character"></div>
  <div id="map"></div>
  <div id="object1" class="impassable"></div>
  <div id="object2" class="impassable"></div>
  <div id="object3" class="impassable"></div>
  <div id="object4" class="impassable"></div>
  <div id="object5" class="impassable"></div>
  <div id="object6" class="impassable"></div>
  <div id="object7" class="impassable"></div>
  <div id="object8" class="impassable"></div>
  <div id="object9" class="impassable"></div>
  <div id="object10" class="impassable"></div>
  <div id="object11" class="impassable"></div>
  <div id="object12" class="impassable"></div>
  <div id="leftTreeinGrave" class="impassable"></div>
  <div id="rightTreeinGrave" class="impassable"></div>
  <div id="graveFlowers" class="impassable"></div>
  <div id="grave" class="impassable"></div>
  <div id="leftTreeRow" class="impassable"></div>
  <div id="leftRock" class="impassable"></div>
  <div id="blTreeRow" class="impassable"></div>
  <div id="object13Tree" class="impassable"></div>
  <div id="blTreeVertRow" class="impassable"></div>
  <div id="verybottomtreerow" class="impassable"></div>
  <div id="nextbottomtreerow" class="impassable"></div>
  <div id="nextbottomtree1" class="impassable"></div>
  <div id="nextbottomtree2" class="impassable"></div>
  <div id="bottomtreerow3" class="impassable"></div>
  <div id="bottomtreerow3two" class="impassable"></div>
  <div id="bottomtreerow4" class="impassable"></div>
  <div id="rightTreeRow" class="impassable"></div>
  <div id="bush1" class="impassable"></div>
  <div id="tree1" class="impassable"></div>
  <div id="bush2" class="impassable"></div>
  <div id="rock2" class="impassable"></div>
</div>