Hey guys, I'm working on a 2-d puzzle project. It's 7 pieces and when you click on one it swaps with the blank image. I'm doing well so far, but I need to have it alert when the puzzle is complete, and I don't know how to do that (I've been told I need to use an array) Here is what I have so far.
Any tips would be really appreciated!!
Code:
<html>
<head>
<title>Puzzle</title>
<script>
function swap(mygift){
blank.src=mygift.src
mygift.src="p_07.jpg"
blank=mygift
}
function rescramble(){
document.images[0].src="p_02.jpg"
document.images[1].src="p_06.jpg"
document.images[2].src="p_05.jpg"
document.images[3].src="p_04.jpg"
document.images[4].src="p_01.jpg"
document.images[5].src="p_03.jpg"
document.images[6].src="p_07.jpg"
blank=imgseven
}
</script>
</head>
<body onload="blank=imgseven">
<center><h1>My 2-D Puzzle</h1></center>
<hr>
<br>
<table align="center" cellspacing="0" cellpadding="0" border="1">
<tr>
<td onclick=swap(imgtwo)><img name=imgtwo src="p_02.jpg"></td>
<td onclick=swap(imgsix)><img name=imgsix src="p_06.jpg"></td>
<td onclick=swap(imgfive)><img name=imgfive src="p_05.jpg"></td>
<td onclick=swap(imgfour)><img name=imgfour src="p_04.jpg"></td>
<td onclick=swap(imgone)><img name=imgone src="p_01.jpg"></td>
<td onclick=swap(imgthree)><img name=imgthree src="p_03.jpg"></td>
<td onclick=swap(imgseven)><img name=imgseven src="p_07.jpg"></td>
</tr>
<tr>
<td colspan=7><input type=button name=btnone value="click me" onclick=rescramble()></td>
</tr>
</table>
</body>
</html>Any tips would be really appreciated!!