PDA

View Full Version : I need help with this picture puzzle making it random



brooklyn
12-07-2009, 10:37 PM
I have the puzzle figured out but i don't know how to make the images show up random everytime this is my html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Puzzle</title>
<script type="text/javascript">

var blank = new Image();
blank.src = "http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/blank.jpg";

function move(n){
if((n-3)>=0 && (document.images[n-3].src == blank.src)){
document.images[n-3].src = document.images[n].src;
document.images[n].src = blank.src;
}else if((n-1)>=0 && n!=3 && n!=6 && (document.images[n-1].src == blank.src)){
document.images[n-1].src = document.images[n].src;
document.images[n].src = blank.src;
}else if((n+1)<=8 && n!=2 && n!=5 && (document.images[n+1].src == blank.src)){
document.images[n+1].src = document.images[n].src;
document.images[n].src = blank.src;
}else if((n+3)<=8 && (document.images[n+3].src == blank.src)){
document.images[n+3].src = document.images[n].src;
document.images[n].src = blank.src;
}
}

function picture(){
for(n=0;n<8;n++){
document.images[n].src = "http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/"+(n+1)+".jpg";
}
document.images[8].src = blank.src;
}

function replay(){
window.location.reload();
}
</script>

</head>

<body>
<p>&nbsp;</p>
<table width="620" align="center" cellpadding="0" cellspacing="3">
<tr>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/1.jpg" onclick="move(0)" width="200" height="150" /></td>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/2.jpg" onclick="move(1)" width="200" height="150" /></td>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/5.jpg" onclick="move(2)" width="200" height="150" /></td>
</tr>
<tr>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/6.jpg" onclick="move(3)" width="200" height="150" /></td>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/3.jpg" onclick="move(4)" width="200" height="150" /></td>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/8.jpg" onclick="move(5)" width="200" height="150" /></td>
</tr>
<tr>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/7.jpg" onclick="move(6)" width="200" height="150" /></td>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/4.jpg" onclick="move(7)" width="200" height="150" /></td>
<td><img src="http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/blank.jpg" onclick="move(8)" width="200" height="150" /></td>
</tr>
</table>
<p align="center">&nbsp;</p>
<p align="center">
<button onclick="picture()">solve</button> &nbsp; <button onclick="replay()">play again</button>
* </p>
</body>
</html>

vwphillips
12-08-2009, 10:55 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Puzzle</title>
<script type="text/javascript">

var blank = new Image();
blank.src = "http://www.vicsjavascripts.org.uk/StdImages/Blank.gif";

function move(n){
if((n-3)>=0 && (document.images[n-3].src == blank.src)){
document.images[n-3].src = document.images[n].src;
document.images[n].src = blank.src;
}
else if((n-1)>=0 && n!=3 && n!=6 && (document.images[n-1].src == blank.src)){
document.images[n-1].src = document.images[n].src;
document.images[n].src = blank.src;
}
else if((n+1)<=8 && n!=2 && n!=5 && (document.images[n+1].src == blank.src)){
document.images[n+1].src = document.images[n].src;
document.images[n].src = blank.src;
}
else if((n+3)<=8 && (document.images[n+3].src == blank.src)){
document.images[n+3].src = document.images[n].src;
document.images[n].src = blank.src;
}
}

function picture(){
for(n=0;n<8;n++){
document.images[n].src = "http://www.cs.uoregon.edu/classes/09F/cis111/projects/extracredit/"+(n+1)+".jpg";
}
document.images[8].src = blank.src;
}

function replay(){
window.location.reload();
}

function Random(){
var imgs=document.getElementById('tst').getElementsByTagName('IMG');
for (var ary=[],z0=0;z0<imgs.length;z0++){
ary.push(imgs[z0].src);
}
ary.shuffle();
for (var z1=0;z1<ary.length;z1++){
imgs[z1].src=ary[z1];
}
}

Array.prototype.shuffle=function(){
for (var r,t,z0=0;z0<this.length;z0++){
r=Math.floor(Math.random()*this.length);
t=this[z0];
this[z0]=this[r];
this[r]=t;
}
}

</script>

</head>

<body onload="Random();">
<p>&nbsp;</p>
<table id="tst" width="620" align="center" cellpadding="0" cellspacing="3">
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" onclick="move(0)" width="200" height="150" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" onclick="move(1)" width="200" height="150" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" onclick="move(2)" width="200" height="150" /></td>
</tr>
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" onclick="move(3)" width="200" height="150" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" onclick="move(4)" width="200" height="150" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" onclick="move(5)" width="200" height="150" /></td>
</tr>
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" onclick="move(6)" width="200" height="150" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" onclick="move(7)" width="200" height="150" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" onclick="move(8)" width="200" height="150" /></td>
</tr>
</table>
<p align="center">&nbsp;</p>
<p align="center">
<button onclick="picture()">solve</button> &nbsp; <button onclick="replay();">play again</button> <button onclick="Random();"> shuffle</button>
* </p>
</body>
</html>