creating an array for a snapping function with ActionScript 3 - arrays

Question

I created a puzzle where you can drag and drop 16 pieces. I used an array so that the code doesn't get too big. Now I want to add an function where each puzzle piece snaps into right place once you get near the destination.
My problem is that I don't know how to create an array which can achieve my goal. I tried the following(without an array but that creates too much code if I do it with all 16 puzzle pieces):
if(target1_mc.hitTestObject(piece1_mc.tar1_mc))
{
piece1_mc.x = 207,15;
piece1_mc.y = 119,25;
}
Code:
import flash.events.Event;
import flash.events.MouseEvent;
var puzzleArr:Array = new Array (piece1_mc, piece2_mc, piece3_mc, piece4_mc,
piece5_mc, piece6_mc, piece7_mc, piece8_mc,
piece9_mc, piece10_mc,
piece11_mc, piece12_mc, piece13_mc, piece14_mc, piece15_mc, piece16_mc);
for (var i:uint =0; i < puzzleArr.length; i++) {
puzzleArr[i].addEventListener(MouseEvent.MOUSE_DOWN, drag);
puzzleArr[i].addEventListener(MouseEvent.MOUSE_UP, drop);
}
function drag(event:MouseEvent):void {
event.currentTarget.startDrag();
}
function drop(event:MouseEvent):void {
event.currentTarget.stopDrag();
}

Answer 1

There a few ways to accomplish this. The easiest, is to add a dynamic property to your pieces that stores the target (correct location object) for the piece.
var puzzleArr:Array = []; //you don't really even need the array in my example
var tmpPiece:MovieClip; //this stores the current dragging piece, and I also reuse it in the loop below
//I don't like typing a lot, so let's use a loop for all 16 pieces and their targets
for(var i:int=1;i<=16;i++){
tmpPiece = this["piece" + i + "_mc"]; //get a reference to piece whose number matches i
if(!tmpPiece){
trace("Sorry - there is no piece called: 'piece" + i + "_mc'");
continue;
}
//give the piece a dynamic property that is a reference to it's target spot
tmpPiece.targetTile = this["target" + i + "_mc"];
if(!tmpPiece.targetTile){
trace("Sorry - there is no target called: 'target" + i + "_mc'");
continue;
}
tmpPiece.tar_mc = tmpPiece["tar" + i + "_mc"]; //it would be better to just take the number out of each pieces tar_mc child object making this line uneccessary
//track where the piece is placed
tmpPiece.startingPos = new Point(tmpPiece.x, tmpPiece.y);
//only add the mouse down listener to the piece (not mouse up)
tmpPiece.addEventListener(MouseEvent.MOUSE_DOWN, drag);
//if still using the array, add the piece to the array
puzzleArr.push(tmpPiece);
}
Next, add a mouse move listener only while dragging
function drag(event:MouseEvent):void {
tmpPiece = event.currentTarget as MovieClip; //assign the dragging object to the tmpPiece var
tmpPiece.startDrag();
//add a mouse move listener so you can check if snapping is needed
tmpPiece.addEventListener(MouseEvent.MOUSE_MOVE, moving);
//add the mouse up listener to the stage - this is good because if you drag fast, the mouse can leave the object your dragging, and if you release the mouse then it won't trigger a mouse up on the dragging object
stage.addEventListener(MouseEvent.MOUSE_UP, drop);
}
function drop(event:MouseEvent):void {
//stop all dragging
this.stopDrag();
if(tmpPiece){
//remove the mouse move listener
tmpPiece.removeEventListener(MouseEvent.MOUSE_MOVE, moving);
//ensure a snap at the end of the drag
if(!checkSnapping()){
//if not snapped, reset it's position
tmpPiece.x = tmpPiece.startingPos.x;
tmpPiece.y = tmpPiece.startingPos.y;
}
}
//remove the mouse up listener
stage.removeEventListener(MouseEvent.MOUSE_UP, drop);
}
Now lets do the snapping in the mouse move handler:
function moving(e:MouseEvent = null):void {
checkSnapping();
}
//return true if snapped
function checkSnapping():Boolean {
if(tmpPiece && tmpPiece.tar_mc.hitTestObject(tmpPiece.targetTile)){
tmpPiece.x = tmpPiece.targetObj.x - tmpPiece.tar_mc.x;
tmpPiece.y = tmpPiece.targetObj.y - tmpPiece.tar_mc.y;
return true;
}
return false;
}

Answer 2

for (var i:int = 0; i < puzzleArray.length; i++)
{
if(puzzleArray[i].hitTestObject(puzzleArray[i]._target))
{
puzzleArray[i].x = puzzleArray[i]._xGoal;
puzzleArray[i].y = puzzleArray[i]._yGoal;
}
}
Obviously you'll need to add a couple of properties to the puzzle piece objects (_xGoal, _yGoal,_target) and you can do that however you'd like. You could probably use a loop, but only if there is some sort of order to them. If they are not of equal size and in a grid, then you'll have to obviously just manually type these in.
If they are in a grid and each piece is equal size, let me know if you need help with creating those properties in a loop.