Html 5 canvas javascript碰撞检测x / y校正

Question

我正在创建一种使用画布在表面上移动盒子（例如托盘/架子/地板）的方法。

我开始使用以下框的布局。

[{"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}]

表面

1200 x 800mm pal {palL : 1200 , palW : 800}

a = x , b = y , c = x+box length , d = y+box length

我正在使用easlejs并不是它应该重要但拖动事件会返回x和y更改

所以{x: -100, y: 50}

Box碰撞检测似乎正在起作用但是当我尝试改变移动的x和y移动以将其放回到它所击中的框的边界时，一切都崩溃了。这是我以前第一次做过这种类型的计算（因为我确定你可以从下面的代码中看出），我能得到的任何帮助都会受到赞赏。

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 with 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 WITH NO PROBLEMS 
                    // CODE BELOW IS THE TROUBLE ZONE
                    // check collision with 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 IS TROUBLE ZONE
                    this.x = movedX;
                    this.y = movedY;
                    if(originalx !== this.x || originaly !== this.y) {
                        boxMoved = true;
                    }

        update = true;
                });