Build a javascript sliding puzzle - createjs

Question

I am attempting to build a game that follows the same mechanic as Dragon's Tail featured at the following link http://bit.ly/1CR0iha. I have built a very basic version of level one working using mouse clicks with one open space. I really want it to move on pressmove so that I can drag the pieces to move them rather than on click which will help when there are more than one open space as on level two.
How to confine the movement of the pieces so that they can ONLY move into the open space? My initial though was to place all the pieces into a grid and check for collisions between the various pieces on pressmove and only allow a move if there is no collision.
After some coding I need a sanity check because I am now second guessing my decision. I am asking for on a high level sanity check on my method any insights are most welcome ;);
Once I have set my x and y on mousedown I them do the following on pressmove. I am not limiting my direction which is what I am trying to achieve.
pressMove = function(event){
var pt = this.globalToLocal(event.stageX, event.stageY);
if(pt.x > this.startPosX){
this.dragDirection = 'right';
}
if(pt.x < this.startPosX){
this.dragDirection = 'left';
}
if(pt.y < this.startPosY){
this.dragDirection = 'up';
}
if(pt.y > this.startPosY){
this.dragDirection = 'down';
}
movePiece(event);
}
Moving the piece
movePiece = function(event){
var obj = event.target;
var pt = this.globalToLocal(event.stageX, event.stageY);
switch(this.dragDirection){
case 'up':
obj.y = pt.y;
break;
case 'down':
obj.y = pt.y;
break;
case 'left':
obj.x = pt.x;
break;
case 'right':
obj.x = pt.x;
break;
};
}

Answer 1

you don't need sofisticated collision detection - all you need to know is which are the possible moves (up, down, right, left) allowed for a clicked piece.
you can do this by having a 2d field representing blocked spaces 1 and free spaces 0 like so
A B C D
X 1 0 1 1
Y 1 1 1 1
Z 1 1 1 1
say you click the piece (Y,B) you can see by checking its four neighbouring entries that only the move up is available, similarly for XA and XC. for all other pieces there are no free spaces and thus no possible moves. after moving a piece, make sure its again in a grid position and update the 2d field. i.e. after moving YB up the field should look like this:
A B C D
X 1 1 1 1
Y 1 0 1 1
Z 1 1 1 1
you can make boundary handling easier by surrounding your actual playfield with blocked spaces
Edit: say you only move up/down and left/right. Every move starts at the center of a piece. Around the center there's a deadzone where it's not clear (yet) which direction the move will take. Then your code might look like this:
startDrag(x, y) {
// remember clicked piece p
p <- ...
// remember center positions for p (cX, cY)
(cX, cy) <- ...
// remember offset of cursor to center (oX, oY)
(oX, oY) <- (x - cX, y - cY)
}
continueDrag(x, y) {
// select move direction
if distance between (cX, cY) and (x - oX, y - oY) is within the deadzone
select move direction (up, down, left, right) with least projection error
else
select last move direction
end
// get constrained move direction
switch selected move direction
case up: perform move to (cX, y - oY)
case down: perform move to (cX, y - oY)
case left: perform move to (x - oX, cY)
case right: perform move to (y - oX, cY)
end
}
you can see all of this in action (and a bit more robust) here: http://js.do/code/sliding-puzzle