Overlapping of drag and drop puzzle pieces

[anjalip69368413]

I am creating a drag and drop puzzle with targets and this function works but I think there are issues with the pieces overlapping when trying to put them in the correct positions and they keep snapping back to their original position as if they don't fit. I'm assuming its something to do with the margins around the shape and since they are strange shapes (they are pieces of different locations in the south American map), this seems to be an issue. another example is if pieces have been fitted and there is one piece left in the centre of them, it doesn't snap into its position probably because of all the other shapes around it "covering" its target. I hope that makes sense.

May its be something to do with adding a Hit test in my code?

Thanks

[Colin Holgate]

There is a much easier way to do activities where the user has to drag something to its correct location. Instead of having the objects already in random places, and then some sort of logic to figure out if they are in the destination location (which might involve an array of destinations, one of which applies to the object you're dragging), you could start the puzzle with everything already in the destination position.

When the activity starts, each piece would make a note of its current location, then would place itself somewhere random. That would all happen before the user sees the pieces. As any piece is being dragged you only have to use Pythagorus to decide whether it's in the destination position. Something on these lines (the code would go on each piece):

var myX:Number = x;

var myY:Number = y;

var solved:Boolean = false;

x = Math.random()*500;

y = Math.random()*400;

addEventListener(MouseEvent.MOUSE_DOWN,drag);

function drag(e:MouseEvent){

  addEventListener(MouseEvent.MOUSE_MOVE,dragging);

  addEventListener(MouseEvent.MOUSE_UP,drop); 

}

function drop(e:MouseEvent){

  removeEventListener(MouseEvent.MOUSE_MOVE,dragging);

  removeEventListener(MouseEvent.MOUSE_UP,drop); 

}

function dragging(e:MouseEvent){

  var dx:Number = e.stageX - myX;

  var dy:Number = e.stageY - myY;

  var d:Number = Math.sqrt(dx*dx+dy*dy);

  if(d<10){

    removeEventListener(MouseEvent.MOUSE_MOVE,dragging);

    removeEventListener(MouseEvent.MOUSE_UP,drop); 

   removeEventListener(MouseEvent.MOUSE_DOWN,drag);

   x = myX;

   y = myY;

   checkSolved();

  }else{

   x = e.stageX;

   y = e.stageY;

}

}

I didn't test that, I just typed it here! It might work though.

The checkSolved function would be one that went around all of the pieces to see if they are all solved, and if they are then the puzzle is complete. Something like:

function checkSolved(){

var i:int;

var total:int = 20;//the number of pieces, named "piece1", etc, in this example

var allsolved = true;

for(i=0;i<total;i++){

   if(!this["piece"+(i+1)].solved){

     allsolved = false;

    break;

}

  if(allsolved){

     //puzzle is completed

  }

}

I didn't test that either! Hopefully you get the general idea.

[anjalip69368413]

Hi,

the thing is I already have my code in place and since this is a class project, I need to use code I'm familiar with. I'm not familiar with the code you've written so would rather try to fix the code I already have which is:

PeruFact.stop();

var dropCount8: Number = 0;

var startX8: Number;

var startY8: Number;

piece8_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickMe8);

piece8_mc.addEventListener(MouseEvent.MOUSE_UP, dropMe8);

function pickMe8(event: MouseEvent): void {

event.target.startDrag(true);

startX = event.target.x;

startY = event.target.y;

}

function dropMe8(event: MouseEvent): void {

event.target.stopDrag();

var myTargetName: String = "target" + event.target.name;

var myTarget: DisplayObject = getChildByName(myTargetName);

if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget) {

event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickMe8);

event.target.removeEventListener(MouseEvent.MOUSE_UP, dropMe8);

event.target.buttonMode = false;

event.target.x = myTarget.x;

event.target.y = myTarget.y;

dropCount++;

} else {

event.target.x = startX;

event.target.y = startY;

}

if (event.target.x == myTarget.x)

(event.target.y == myTarget.y); {

PeruFact.gotoAndPlay(PeruFact.totalFrames);

}

}

piece8_mc.buttonMode = true;

so the code brings up a fact about the area of the map, in this case peru, when the peru puzzle piece is fitted. But as I said the issue if with the pieces overlapping each other and some pieces not being able to be fitted because is the pieces around them.

Thank you're so much for the response though!

[Colin Holgate]

I had not heard of dropTarget, but I have now! Seems it was an AS2 thing, and the AS3 equivalent is currentTarget. Try this line:

if (event.currentTarget != null && event.currentTarget.parent == myTarget) {

[anjalip69368413]

nope, that line makes the pieces not fit into their targets. they just snap back into the original position. I just need to see if there is a way to change the target area to fit directly around the shape, instead of the blue square outlining each image. this is including all the space around the shape.  At least this is what I think is the issue.

It's never the same pieces, this is why I think its the overlapping issue. But thank you for the suggestions.