actionscript 3 Drag and match learning application - better

Advertisement

Drag and match learning application - better

Instead of writing an application just for four matching pairs, we can write code that is more general. This code only needs slight modifications to adapt to other named instances and text boxes and you can insert as little/many pairs you like. Just make sure that the target textboxes are in the background.

Btw this is the first AS3 code that includes a tiny bit of programming I ever made (I probably also should type variables but then I am not a real programmer ....)

var dict = new Dictionary ();

// =================== START USER Config =====================
// Insert as many "dict[text_box] = movie;" statements you like
//  Replace: text_box by the name of a matching dynamic text_box
//           movie by the name of movie instances users can move around.

dict[box_c] = cat;
dict[box_d] = dog;
dict[box_r] = rocket;
dict[box_b] = bat;
dict[box_a] = apple;

// Do NOT change/delete any other line. Also make sure to respect
// the syntax, e.g. dont forget the ";" at the end of each line.
// ===================== END USER Config ==================== 

var hits = 0; // counts succesful hits
var max = 0;  // used to compute dictionary length

// For each item in the dictionary we add event listeners
// "for each" will loop through the values ... not the keys

for each (var item in dict)
{
 item.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
 item.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
 item.buttonMode = true; //needed for the hand cursor to work
 max = max + 1;
}


// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
 var object = evt.target;
 // we should limit dragging to the area inside the canvas
 object.useHandCursor = true;
 object.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
 var obj = evt.target;
 // obj.dropTarget will give us the reference to the shape of
 // the object over which we dropped the circle.
 var target = obj.dropTarget;
 // If the target object exists the we ask the test_match function
 // to compare moved obj and target where it was dropped.
 if (target != null)
 {
  test_match(target, obj);
 }
 obj.stopDrag();
}

function test_match(target,obj) {
 // test if the pairs match
 if (dict[target] == obj)
 {
  // we got a hit
  hits = hits+1;
  textField.text = "Yes ! You got one !";
  // make the object transparent
  obj.alpha = 0.5;
  // kill its event listeners - object can't be moved anymore
  obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  // Test if we are done
  if (hits == max)
  {
          // here we should play an animation
   textField.text = "Made it !!";
  }
 }
 else
 {
  textField.text = "Missed :(";
 }
}

Share This