# Thread: HELP with a jigsaw puzzle please!!

1. Registered User
Join Date
Apr 2010
Posts
2

## HELP with a jigsaw puzzle please!!

I wish to create a jigsaw puzzle with images in a table. When two of the images are clicked, they swap places. When all pieces are in the correct order, I need an alert to congratulate the user and tell them how many clicks it took to solve the puzzle and then restore the puzzle to the original scrambled order. Any help??

2. Registered User
Join Date
Oct 2005
Location
Cambridgeshire, UK
Posts
191
Javascript is what you want here. When a table cell is clicked you want to swap the images using Javascript.

Hope that points you in the right direction. Have a go and if you get stuck post here and I'm sure someone will help you out.

Good luck!

3. Registered User
Join Date
Apr 2010
Posts
2
Heres what I have...I got it to swap...just not in the right way at all...and I made a button that can be pressed to see if it is solved, but that isn't how I want it to be, I want it to check automatically after each move...and I need it to count how many clicks it took to solve....please help me.

solved=[1,2,3,4,5,6]
current=[3,5,1,6,2,4]
i=0

P1=1
function flip(X){
document.images[P1].src=X.src
X.src="P_1.jpg"
current[P1]=X.id
current[X.id]=1
P1=X.id

}

function isitsolved(){

thepuzzleissolved=true

if(current[0]==1) donothing(0)
else thepuzzleissolved=false

if(current[1]==2) donothing(1)
else thepuzzleissolved=false

if(current[2]==3) donothing(2)
else thepuzzleissolved=false

if(current[3]==4) donothing(3)
else thepuzzleissolved=false

if(current[4]==5) donothing(4)
else thepuzzleissolved=false

if(current[5]==6) donothing(5)
else thepuzzleissolved=false

if (thepuzzleissolved) celebrate()

}
function donothing(x){}
function original(){
for (i=0;i<6;i++){

document.images[i].src="P_"+solved[i]+".jpg"
}
}

function celebrate(){
original()

}
</script>

<body>

<table border="1">
<tr>
<td><img id="0" src="P_3.jpg" onclick="flip(this)"></td>
<td><img id="1" src="P_5.jpg" onclick="flip(this)"></td>
<td><img id="2" src="P_1.jpg" onclick="flip(this)"></td>
<td><img id="3" src="P_6.jpg" onclick="flip(this)"></td>
<td><img id="4" src="P_2.jpg" onclick="flip(this)"></td>
<td><img id="5" src="P_4.jpg" onclick="flip(this)"></td>
</tr>

</table>
<br>

<input type="button" onclick="isitsolved()" value="is it solved?">

</body>
</html>

4. Registered User
Join Date
Oct 2005
Location
Cambridgeshire, UK
Posts
191
I've had a play with your code and rejigged it until I got it to work:

HTML Code:
```<html>
<script type="text/javascript">

var solved = new Array(1,2,3,4,5,6);
var current = new Array(3,5,1,6,2,4);
var i = 0;

function flip(X){

if (X.id>0) {

var previous_id = parseInt(X.id)-1;
var this_id = X.id;

// swap the current array values round
var previous_value = current[previous_id];
var this_value = current[this_id];
current[previous_id] = this_value;
current[this_id] = previous_value;

// swap the images
document.images[previous_id].src = 'P_'+current[previous_id]+'.jpg';
document.images[this_id].src = 'P_'+current[this_id]+'.jpg';

document.getElementById('current_order').innerHTML = current;

// check if solved
var is_solved = true;
for (var i=0; i<solved.length; i++) { // loop through solved array and check against current
if (solved[i]!=current[i]) { is_solved = false; } // whoops, still not right. keep trying }
}
if(is_solved) celebrate(); // yaaayyy!!

}

}

function original(){
for (i=0; i<6; i++) {
document.images[i].src="P_"+solved[i]+".jpg";
}
}

function celebrate(){
original();
}

</script>

<body>

<table border="1">
<tr>
<td><img id="0" src="P_3.jpg" onclick="flip(this)"></td>
<td><img id="1" src="P_5.jpg" onclick="flip(this)"></td>
<td><img id="2" src="P_1.jpg" onclick="flip(this)"></td>
<td><img id="3" src="P_6.jpg" onclick="flip(this)"></td>
<td><img id="4" src="P_2.jpg" onclick="flip(this)"></td>
<td><img id="5" src="P_4.jpg" onclick="flip(this)"></td>
</tr>
</table>

<div id="current_order">3,5,1,6,2,4</div>

</body>
</html>```
I've made too many changes to list them all but the main area it was going wrong was in the swapping of the current array elements. I'm not sure if the way the flip works is correct (ie. swapping with the image to the left) but I hope it points you in the right direction.

Let me know if you need any explanation on anything I've done.