(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>
