Drag and Drop game with ActionScript 3 - Page 3

ActionScript

In order to drag an object you use the startDrag() method.
This method has two parameters. The first one lets you choose whether its center will coincide with the mouse's position or not, and the second lets you define a rectangle to restrict the dragging area.
You use false for the first parameter and ignore the second, as you don't want dragging restrictions.

This is the basic code that goes in DraggableObject.as and that you'll use for any object you want to drag:

public function enableDragging():void
{
	addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
	addEventListener(MouseEvent.MOUSE_UP, stopDragging);
	
	buttonMode = true;
}

private function startDragging (e:MouseEvent):void
{
	startDrag(false);		
	
	stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
	stage.addEventListener(Event.MOUSE_LEAVE, stopDragging);
}

private function stopDragging (e:MouseEvent):void
{
	stopDrag();				
	
	stage.removeEventListener(MouseEvent.MOUSE_UP, stopDragging);
	stage.removeEventListener(Event.MOUSE_LEAVE, stopDragging);
}

This particular Class has some more code as it preforms a lot more tasks than just dragging the words.
For example, in the init() method which will be used by the visible words only,

public function init(target:DraggableObject):void
{
	x0 = x;
	y0 = y;
	
	enableDragging();
	
	mouseChildren = false;
	
	_target = target;
}

rabbit_draggable.init(rabbit);
dog_draggable.init(dog);
// and so on ...

You also store the initial x and y, so that you can slide the word back if you didn't drop it near its correct target:

public function reposition():void 
{
	TweenLite.to(this, .4, { x:x0, y:y0 } );
}

In the Game Class (Game.as) you setup listeners for when you stop dragging the words. This is the time where you see if they are "close enough" to their targets or not.
Just like in the math class at school, this is how you calculate the distance between two points :

private function dist(current:DraggableObject, target:DraggableObject):Number 
{
	 var dx:Number = target.x-current.x;
	 var dy:Number = target.y-current.y;
	 return Math.sqrt(dx * dx + dy * dy);
}

Suppose you're dragging rabbit_draggable. If the distance to rabbit is less than distMax, (a variable defined previously), slide it to the rabbit's position, and prevent it from being draggable. Else, send rabbit_draggable to its initial position:

private function stopDragging(e:Event):void 
{
	// find out which object this is
	var current:DraggableObject = DraggableObject(e.currentTarget); // rabbit_draggable
	// find out its correct target (this is a custom property!)
	var target:DraggableObject = current.target; // rabbit
	
	// if they are in the disired distance
	if (dist(current, target) < distMax)
	{
		// the object is no longer draggable
		current.preventDragging();
		// slide it to the correct position
		TweenLite.to(current, .1, { x:target.x, y:target.y } );
	}
	else
	{
		// not correct target, send to original position
		current.reposition(); // rabbit_draggable
	}
}

After you have positioned all the objects correctly, you've finished the game. In order to keep track of this, each time an object is positioned correctly, a variable is increased.

if (dist(current, target) < distMax)
{
	// increase number of correct objects
	count++;
	if (count == total) // if they are all correct
	{
		// game successfully finished
	}
}

total is the number of words: 5.