jackbergman
Technical User
I have a small program here that I am trying to simulate a game but cannot get it to work properly. What I want to do is start with a scrambled sliced image that has 3 across and 3 down. One image is blank. I want to click on an image next to the blank square and move it to an ajoining square. This is like the puzzle of 8 that we played with as a child. So far, I have the image scrambling when the body loads. Then I click an image and it swaps with another image. My problem is, I cannot get the code to swap with an image that is right next to the blank square. I know my problem lies within the swap() function. I would also like it to alert when the picture is whole again. (I know the last part is a stretch but if there are any comments out there...) Anyway, please help if you can and thank you!
<html><head>
<title>Puzzle</title>
<script>
function scramble(){
Order=new Array(6,0,8,4,3,2,1,5,7)
Temp=new Array()
for (i=0;i<9;i++){
Temp=document.images.src
}
for (i=0;i<9;i++){
document.images.src=Temp[Order]
}
}
ClockNeighbor=new Array(8,7,1,4,6,3,5,0,2)
function swap
{
clickedOneSource=document.images[n].src
CN=ClockNeighbor[n]
document.images[n].src=document.images[CN].src
document.images[CN].src=clickedOneSource
//each time we swap, best to see if the puzzle has been solved
checksolution()
}
function checksolution(){
assumeAllProper=true
for (i=0;i<9;i++){
sourceI=document.images.src
fileNumber=sourceI.charAt(sourceI.length-5)
//if the ith picture is not in the proper place
//then the puzzle is not solved
if (fileNumber!=i+1)assumeAllProper=false
}
if (assumeAllProper) alert("the fact that the variable assumeAllProper is true, means you must have solved the puzzle")
}
</script>
</head><body onload="scramble()">
<table id="Table_01" width="300" height="300" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/realtree_01.jpg" onclick="swap(0)" width="100" height="100"></td>
<td><img src="images/realtree_02.jpg" onclick="swap(1)" width="100" height="100"></td>
<td><img src="images/realtree_03.jpg" onclick="swap(2)" width="100" height="100"></td>
</tr>
<tr>
<td><img src="images/realtree_04.jpg" onclick="swap(3)" width="100" height="100"></td>
<td><img src="images/realtree_05.jpg" onclick="swap(4)" width="100" height="100"></td>
<td><img src="images/realtree_06.jpg" onclick="swap(5)" width="100" height="100"></td>
</tr>
<tr>
<td><img src="images/realtree_07.jpg" onclick="swap(6)" width="100" height="100"></td>
<td><img src="images/realtree_08.jpg" onclick="swap(7)" width="100" height="100"></td>
<td><img src="images/blank.jpg" onclick="swap(8)" width="100" height="100"></td>
</tr>
</table>
</body></html>
<html><head>
<title>Puzzle</title>
<script>
function scramble(){
Order=new Array(6,0,8,4,3,2,1,5,7)
Temp=new Array()
for (i=0;i<9;i++){
Temp=document.images.src
}
for (i=0;i<9;i++){
document.images.src=Temp[Order]
}
}
ClockNeighbor=new Array(8,7,1,4,6,3,5,0,2)
function swap
{clickedOneSource=document.images[n].src
CN=ClockNeighbor[n]
document.images[n].src=document.images[CN].src
document.images[CN].src=clickedOneSource
//each time we swap, best to see if the puzzle has been solved
checksolution()
}
function checksolution(){
assumeAllProper=true
for (i=0;i<9;i++){
sourceI=document.images.src
fileNumber=sourceI.charAt(sourceI.length-5)
//if the ith picture is not in the proper place
//then the puzzle is not solved
if (fileNumber!=i+1)assumeAllProper=false
}
if (assumeAllProper) alert("the fact that the variable assumeAllProper is true, means you must have solved the puzzle")
}
</script>
</head><body onload="scramble()">
<table id="Table_01" width="300" height="300" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/realtree_01.jpg" onclick="swap(0)" width="100" height="100"></td>
<td><img src="images/realtree_02.jpg" onclick="swap(1)" width="100" height="100"></td>
<td><img src="images/realtree_03.jpg" onclick="swap(2)" width="100" height="100"></td>
</tr>
<tr>
<td><img src="images/realtree_04.jpg" onclick="swap(3)" width="100" height="100"></td>
<td><img src="images/realtree_05.jpg" onclick="swap(4)" width="100" height="100"></td>
<td><img src="images/realtree_06.jpg" onclick="swap(5)" width="100" height="100"></td>
</tr>
<tr>
<td><img src="images/realtree_07.jpg" onclick="swap(6)" width="100" height="100"></td>
<td><img src="images/realtree_08.jpg" onclick="swap(7)" width="100" height="100"></td>
<td><img src="images/blank.jpg" onclick="swap(8)" width="100" height="100"></td>
</tr>
</table>
</body></html>
