Skip to main content
anjalip69368413
Participating Frequently
April 16, 2018
Question

Overlapping of drag and drop puzzle pieces

  • April 16, 2018
  • 1 reply
  • 585 views

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

This topic has been closed for replies.

1 reply

Colin Holgate
Inspiring
April 16, 2018

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
Participating Frequently
April 16, 2018

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
Inspiring
April 16, 2018

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) {