CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: I need help with this picture puzzle making it random

  1. 12-07-2009, 10:37 PM #1
    brooklyn
    brooklyn is offline New Comer (less than 5 posts)
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I need help with this picture puzzle making it random

    I have the puzzle figured out but i don't know how to make the images show up random everytime this is my html

    Code:
    <!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>
    Last edited by djr33; 12-07-2009 at 10:45 PM. Reason: Added [code] tags.
    Reply With Quote Reply With Quote
  2. 12-08-2009, 10:55 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules