Jigsaw Problem

[PabloPicasso]

hi,

i have a problem. I am tring to make a jigsaw that you place the jumbled pieces onto the grid and when each piece is placed it snaps in place and then stops the person being able to pick it up again and then when finished it activates a button to goto the next page. I have made the jigsaw got them to snapinto place but have failed to be able to stop them from being moved again and have a problem with a variable count that i use to tell wether all the pieces are placed on the grid.

I will post the fla file any help would be great as it has been doing my brain in for a good 4 weeks.

thanks

ps ive included the pics so that the fla works properly.

www.unofficialmusicsite.com/fl-Ash.zip

[UncleML]

If you were to use your method, you can simply change from mousedown to onPress and mouseup to onRelease with the this.startDrag(); and this.stopDrag(); When the droptarget takes place and successful, just disable the piece from being dragged by using this.enabled=false.

The below is the much shorter way (better approach with shorter way is to use numbering instead of "mid", "bot" to differentiate each grid line) that makes use of an array and takes care of the depth of each pieces (when clicked, when overlay with those already secured) and randomly place the pieces on the area (which you can alter). But first of all, you need to rename all the instances for grid boxes from "Grid_MidBot1" to "Grid_BotMid1" (do the same for the remaining 4). This is because your 5 instances for grids on MidBot are not matched with the 5 instances for the pieces on BotMid.

Place this code in your button.as file.

var mc_array:Array=new Array("Top","TopMid","Mid","BotMid","Bot");
var iTotSeqNo:Number=5;
var iTotPcs:Number=iTotSeqNo*mc_array.length;

var counter:Number = 0;
theButton.enabled = false;
for (var i=0;i<mc_array.length;i++){
for (var j=1;j<=iTotSeqNo;j++){
this[mc_array[i]+j]._x=Math.floor(Math.random()*300)+5;
this[mc_array[i]+j]._y=Math.floor(Math.random()*300)+5;
this[mc_array[i]+j].swapDepths(this[mc_array[i]+j].getDepth()+1000);
this[mc_array[i]+j].onPress=function(){
this.swapDepths(this.getDepth()+10000);
this.startDrag();
trace(this._name);
};
this[mc_array[i]+j].onRelease=function(){
this.stopDrag();
trace(this._droptarget);
if (this._droptarget == "/Grid_"+this._name) {
this._x = _root["Grid_"+this._name]._x;
this._y = _root["Grid_"+this._name]._y;
this.swapDepths(this.getDepth()-11000);
counter++;
this.enabled=false;
if (counter == iTotPcs) {
trace("hello, you win!");
theButton.enabled = true;
}
} else {
this.swapDepths(this.getDepth()-10000);
}
};
}
}
total.onRelease = function() {
trace(counter.valueOf())
}

[PabloPicasso]

woah you are a legend thank you soooo much.....

there are a few things i dont understand though(cos althought i wrote most of that code myself im still a noob) could you do a little explination of how the for and the array works please. the reason i ask is cos i have tried to figure how it works out with only a little sucess and might need to write something like that again for other games i may make.

also i presume if i want it to stop outputing the names of the pieces i just take out the traces, yeah?

thanks

[UncleML]

First of all, the array is being used because of the way you name your movieclip instances for grid boxes and the pieces. If you can just use numbering, say here for grid boxes, all will start with prefix "grid_" from "grid_01" to "grid_25" and for pieces, all will start with prefix "piece_" from "piece_01" to "piece_25", then there is no need for an array. The for loop process will only be 1 instead of 2.

In the above example,

var mc_array:Array=new Array("Top","TopMid","Mid","BotMid","Bot");

The array has 5 elements, from 0 to 4; namely "Top","TopMid","Mid","BotMid","Bot";

in the below code, your total pieces is 5 sequences * 5 elements=25;

var iTotSeqNo:Number=5;
var iTotPcs:Number=iTotSeqNo*mc_array.length;


In the below code, the system will do the main for loop for 5 elements of the arrays starting from 0 to 4. And the sub 'for' loop for 5 sequences within each of the element.

for (var i=0;i<mc_array.length;i++){
for (var j=1;j<=iTotSeqNo;j++){


The ordering of the mc processed is as below:

In the "i" for loop,
mc_array[0]="Top"
in the "j" for loop,
--> mc processed is "Top1"
--> mc processed is "Top2"
--> mc processed is "Top3"
--> mc processed is "Top4"
--> mc processed is "Top5"
In the "i" for loop,
mc_array[1]="TopMid"
in the "j" for loop,
--> mc processed is "TopMid1"
--> mc processed is "TopMid2"
--> mc processed is "TopMid3"
--> mc processed is "TopMid4"
--> mc processed is "TopMid5"
In the "i" for loop,
mc_array[2]="Mid"
in the "j" for loop,
--> mc processed is "Mid1"
--> mc processed is "Mid2"
--> mc processed is "Mid3"
--> mc processed is "Mid4"
--> mc processed is "Mid5"
In the "i" for loop,
mc_array[3]="BotMid"
in the "j" for loop,
--> mc processed is "BotMid1"
--> mc processed is "BotMid2"
--> mc processed is "BotMid3"
--> mc processed is "BotMid4"
--> mc processed is "BotMid5"
In the "i" for loop,
mc_array[4]="Bot"
in the "j" for loop,
--> mc processed is "Bot1"
--> mc processed is "Bot2"
--> mc processed is "Bot3"
--> mc processed is "Bot4"
--> mc processed is "Bot5"


So, all the 25 pieces are randomly placed in the area specified. And each one of them would have the onPress and onRelease buttons checked. The depths would be increased by 1000 and when secured/locked in the correct grid box (drop-target successful), that piece (mc) would have its Drag capability disabled and its depth lowered to allow other non-secured mc to roll over without being hidden by the secured mc. The one that you pick would have a highest depth to overlay all the mcs, so that it won't appear funny and hidden behind all other mcs.

[UncleML]

The one that you pick would have a highest depth (increased by 10000) to overlay all the mcs, so that it won't appear funny and hidden behind all other mcs. When the drop-target is unsuccessful, its depth would be decreased by 10000, back to original depth.

Yup, you may take out all the traces should you're comfortable without them.

[PabloPicasso]

using the puzzle code from above has worked but I still need to stop the pieces from spilling out of the gameplay area. On the lefthand side of the screen is a box which I want to use as a confinement area for the pieces(at the minute the pieces are displayed where they please), you then drag the pieces from the box to the grid square on the righthand side of the screen.

If possible could the code be incorporated into the code posted above because thats the one I am using at the minute. :confused:

[UncleML]

You see the the below code which is the area you need to confine the random placement of the pieces on the left-hand side of the box. My case here is within 5 to 304 of the x and y position of the stage. You can manually adjust it to the boundary of your left-hand side box.

this[mc_array[i]+j]._x=Math.floor(Math.random()*300)+5;
this[mc_array[i]+j]._y=Math.floor(Math.random()*300)+5;

This is not an issue, the issue is you can drag and drop anywhere you please. So, its now your idea about the boundaries, what if not matched, then how should the piece be placed then? Etc....