html5 - Html 5 canvas javascript collision detection x/y correction -


i'm creating way move boxes around on surface (example pallet/shelf/floor ) using canvas.

i have following layout of boxes start of with.

[{"a":0,"b":0,"c":500,"d":400},  {"a":0,"b":400,"c":500,"d":800},  {"a":500,"b":0,"c":1000,"d":400},  {"a":500,"b":400,"c":1000,"d":800}] 

surface

1200 x 800mm pal {pall : 1200 , palw : 800}  = x , b = y , c = x+box length , d = y+box length 

i'm using easlejs not should matter drag event returns x , y changes

so {x: -100, y: 50}

the box collision detection seems working when try , alter movedx , y distences place onto boundary of box hit, falls apart. first time i've ever done type of calculation before (as im sure can tell code below) can appreciated.

boxshape.on("pressmove", function (evt) {                     var originalx = this.x;                     var originaly = this.y;                     var movedx = math.floor(evt.stagex + this.offset.x);                     var movedy = math.floor(evt.stagey + this.offset.y);                     var box = this.boxcoords;                     var newbox = {                         a: box.a + math.floor(movedx / fac),                         b: box.b + math.floor(movedy / fac),                         c: box.c + math.floor(movedx / fac),                         d: box.d + math.floor(movedy / fac)                     };                     this.newboxcoords = newbox;                      // check collision pallet.                     if(newbox.c > pal.pall) {                         var dif = (newbox.c - pal.pall)*fac;                         movedx -= dif;                         newbox.c = pal.pall;                         newbox.a = newbox.c - paldata.box.l;                     }                     if(newbox.d > pal.palw) {                         var dif = (newbox.d - pal.palw)*fac;                         movedy -= dif;                         newbox.d = pal.palw;                         newbox.b = newbox.d - paldata.box.w;                     }                     if(newbox.a < 0) {                         movedx = movedx - newbox.a*fac;                         newbox.a = 0;                         newbox.c = paldata.box.l;                     }                     if(newbox.b < 0) {                         movedy = movedy - newbox.b*fac;                         newbox.b = 0;                         newbox.d = paldata.box.w;                     }                     // code above works no problems                      // code below trouble zone                     // check collision other boxs                     for(var c = 0; c < shapearray.length; c++) {                         otherbox = shapearray[c].newboxcoords;                          if (newbox.a < otherbox.c && newbox.c > otherbox.a &&                             newbox.b < otherbox.d && newbox.d > otherbox.b && otherbox !== newbox) {                              if(newbox.a < otherbox.c && newbox.c > otherbox.a) {                                  if(movedx < 0) {                                     movedx = movedx - ((otherbox.c - newbox.a)* fac);                                     newbox.a = otherbox.c;                                     newbox.c = newbox.a + paldata.box.l;                                 }else{                                     movedx = movedx - ((newbox.c - otherbox.a) * fac);                                     newbox.c = otherbox.a;                                     newbox.a = newbox.c - paldata.box.l;                                 }                             }                             if(newbox.b < otherbox.d && newbox.d > otherbox.b) {                                 if(movedy < 0) {                                     movedy = movedy - ((otherbox.d - newbox.b)* fac);                                     newbox.b = otherbox.d;                                     newbox.d = newbox.b + paldata.box.w;                                 }else{                                     movedy = movedy - ((newbox.d - otherbox.b) * fac);                                     newbox.d = otherbox.b;                                     newbox.b = newbox.d - paldata.box.w;                                 }                             }                         }                     }                     // code above trouble zone                     this.x = movedx;                     this.y = movedy;                     if(originalx !== this.x || originaly !== this.y) {                         boxmoved = true;                     }          update = true;                 }); 


Comments