/    Sign up×
Community /Pin to ProfileBookmark

4×4 puzzle adding shuffle images and reset images buttons

Copy linkTweet thisAlerts:
Dec 11.2008

I have been toying with the idea of building a 15 puzzle just for fun and have been looking at some source code from David Harrison but i wish to add a shuffle images and a reset button into the content. I have been trying to use onClick events within a form button but cant get the blasted thing to work! any help would be much appreciated!!!!

here is the source code:

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERDec 12.2008 — Here's a modification that might work for you.
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Game</title>

<style type="text/css">
#game img {
width:50px;
height:50px;
border:1px solid red;
font-size:3em;
}
</style>

<script type="text/javascript">

var piece, x, y;

function ReorderPuzzle() {
piece=new Array();

piece[piece.length]=new Array("pic00.jpg","pic01.jpg","pic02.jpg","pic03.jpg");
piece[piece.length]=new Array("pic10.jpg","pic11.jpg","pic12.jpg","pic13.jpg");
piece[piece.length]=new Array("pic20.jpg","pic21.jpg","pic22.jpg","pic23.jpg");
piece[piece.length]=new Array("pic30.jpg","pic31.jpg","pic32.jpg","blank.jpg");
swop();
}

function check(imgnum) {
x=parseInt(imgnum.substring(4,5)); // Retrieves the x co-ordinate of the image from it's ID.
y=parseInt(imgnum.substring(3,4)); // Retrieves the y co-ordinate of the image from it's ID.
// alert(y+':'+x); // for testing purposes
var ylow=(y-1<0)?0:y-1; // This makes sure that the lower bound of y does not drop below 0.
var yhigh=(y+1>3)?0:y+1; // This makes sure that the upper bound of y does not drop go above 3.
var xlow=(x-1<0)?0:x-1; // This makes sure that the lower bound of x does not drop below 0.
var xhigh=(x+1>3)?0:x+1; // This makes sure that the upper bound of x does not drop go above 3.

if(document.getElementById(imgnum).src!="blank.jpg") {

if(piece[ylow][x]=="blank.jpg"){piece[ylow][x]=piece[y][x];piece[y][x]="blank.jpg";} // Checks above y for a blank image and if it finds one a swop is made.
else if(piece[yhigh][x]=="blank.jpg"){piece[yhigh][x]=piece[y][x];piece[y][x]="blank.jpg";} // Checks below y for a blank image and if it finds one a swop is made.
else if(piece[y][xlow]=="blank.jpg"){piece[y][xlow]=piece[y][x];piece[y][x]="blank.jpg";} // Checks above x for a blank image and if it finds one a swop is made.
else if(piece[y][xhigh]=="blank.jpg"){piece[y][xhigh]=piece[y][x];piece[y][x]="blank.jpg";} // Checks below x for a blank image and if it finds one a swop is made.
else{alert("Invalid move!!!");} // If there is no blank image around the clicked image then the user is notified.
} else{alert("Invalid move!!!");} // If the user clicks on the blank image then they are notified.
swop();
}

function swop() {
for(var m=0;m<4;m++) {
for(var n=0;n<4;n++) {
document.getElementById("pic"+m+n).src=piece[m][n]; // Swops all the image sources for the ones in the array.
document.getElementById("pic"+m+n).alt=piece[m][n];
}
}
}

function randOrd() { return (Math.round(Math.random())-0.5); }

function RandomizePuzzle() {
var RndArr = ['00','01','02','03','10','11','12','13','20','21','22','23','30','31','32','33'];
RndArr.sort(randOrd);
RndArr.sort(randOrd); // do it again just for kicks if desired
// alert(RndArr.join(' ')); // for testing purposes
var i = 0;
for(var m=0;m<4;m++) {
for(var n=0;n<4;n++) {
var pix = 'pic'+RndArr[i]; // alert(pix);
if (pix == 'pic33') { piece[m][n] = 'blank.jpg'; }
else { piece[m][n] = pix+'.jpg'; }
document.getElementById(pix).src=piece[m][n];
document.getElementById(pix).alt=piece[m][n];
i++;
}
}
swop();
}
</script>
</head>

<body onload="ReorderPuzzle()">
<div id="game">
<img src="" id="pic00" onclick="check(this.id);" alt="">
<img src="" id="pic01" onclick="check(this.id);" alt="">
<img src="" id="pic02" onclick="check(this.id);" alt="">
<img src="" id="pic03" onclick="check(this.id);" alt=""><br>
<img src="" id="pic10" onclick="check(this.id);" alt="">
<img src="" id="pic11" onclick="check(this.id);" alt="">
<img src="" id="pic12" onclick="check(this.id);" alt="">
<img src="" id="pic13" onclick="check(this.id);" alt=""><br>
<img src="" id="pic20" onclick="check(this.id);" alt="">
<img src="" id="pic21" onclick="check(this.id);" alt="">
<img src="" id="pic22" onclick="check(this.id);" alt="">
<img src="" id="pic23" onclick="check(this.id);" alt=""><br>
<img src="" id="pic30" onclick="check(this.id);" alt="">
<img src="" id="pic31" onclick="check(this.id);" alt="">
<img src="" id="pic32" onclick="check(this.id);" alt="">
<img src="" id="pic33" onclick="check(this.id);" alt="">
</div>
<button onclick="RandomizePuzzle()">Shuffle</button>
<button onclick="ReorderPuzzle()">Reorder</button>
</body>
</html>
[/code]
I didn't have the images so I modified the CSS section.

Change it back if you want to.

Good Luck!

?
Copy linkTweet thisAlerts:
@AntifaithauthorDec 13.2008 — looks good man i'll try it now an let you know i get on thankyou so much!!!!!
Copy linkTweet thisAlerts:
@AntifaithauthorDec 13.2008 — ok tried using it....when you do it without images it works fine - bloody brilliant infact but once i had placed my images into the puzzle and hit the shuffle button it duplicates the blank.jpg image and when you move the origional image around it fils in each image you go over in with blank.jpg any ideas?! im dying here lol javascript gives me a huge headache now - i'll give you the code im using but it's pretty much identical to the 1 your did any further help would be massively appreciated!!! thankyou!!!!!
Copy linkTweet thisAlerts:
@JMRKERDec 13.2008 — Since the problem seems to be with the images, do you ave a link to where they are for testing purposes?
Copy linkTweet thisAlerts:
@AntifaithauthorDec 13.2008 — their on my pc atm - ill just put them on flickr or somethin now thanks for the quick reply be ten mins
Copy linkTweet thisAlerts:
@AntifaithauthorDec 13.2008 — here's the link to the photo's it's my girlfriends dog lol thanks for your help again
Copy linkTweet thisAlerts:
@JMRKERDec 13.2008 — I got this version working on my local computer.

Make sure you put all the images in a sub-directory of the game referenced as "_images/"

and make sure they don't have the filenames in the 'flicker' site.

Good Luck! ?

[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Game</title>

<style type="text/css">
#game img {
width:50px;
height:50px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
/* border:1px solid red; */
font-size:3em;
}
</style>

<script type="text/javascript">

var piece, x, y;

function ReorderPuzzle() {
piece=new Array();

piece[piece.length]=new Array("pic00.jpg","pic01.jpg","pic02.jpg","pic03.jpg");
piece[piece.length]=new Array("pic10.jpg","pic11.jpg","pic12.jpg","pic13.jpg");
piece[piece.length]=new Array("pic20.jpg","pic21.jpg","pic22.jpg","pic23.jpg");
piece[piece.length]=new Array("pic30.jpg","pic31.jpg","pic32.jpg","blank.jpg");
swop();
}

function check(imgnum) {
x=parseInt(imgnum.substring(4,5)); // Retrieves the x co-ordinate of the image from it's ID.
y=parseInt(imgnum.substring(3,4)); // Retrieves the y co-ordinate of the image from it's ID.
// alert(y+':'+x); // for testing purposes
var ylow=(y-1<0)?0:y-1; // This makes sure that the lower bound of y does not drop below 0.
var yhigh=(y+1>3)?0:y+1; // This makes sure that the upper bound of y does not drop go above 3.
var xlow=(x-1<0)?0:x-1; // This makes sure that the lower bound of x does not drop below 0.
var xhigh=(x+1>3)?0:x+1; // This makes sure that the upper bound of x does not drop go above 3.

if(document.getElementById(imgnum).src!="blank.jpg") {

if(piece[ylow][x]=="blank.jpg"){piece[ylow][x]=piece[y][x];piece[y][x]="blank.jpg";} // Checks above y for a blank image and if it finds one a swop is made.
else if(piece[yhigh][x]=="blank.jpg"){piece[yhigh][x]=piece[y][x];piece[y][x]="blank.jpg";} // Checks below y for a blank image and if it finds one a swop is made.
else if(piece[y][xlow]=="blank.jpg"){piece[y][xlow]=piece[y][x];piece[y][x]="blank.jpg";} // Checks above x for a blank image and if it finds one a swop is made.
else if(piece[y][xhigh]=="blank.jpg"){piece[y][xhigh]=piece[y][x];piece[y][x]="blank.jpg";} // Checks below x for a blank image and if it finds one a swop is made.
else{alert("Invalid move!!!");} // If there is no blank image around the clicked image then the user is notified.
} else{alert("Invalid move!!!");} // If the user clicks on the blank image then they are notified.
swop();
}

function swop() {
for(var m=0;m<4;m++) {
for(var n=0;n<4;n++) {
document.getElementById("pic"+m+n).src="_images/"+piece[m][n]; // Swops all the image sources for the ones in the array.
document.getElementById("pic"+m+n).alt=piece[m][n];
}
}
}

function randOrd() { return (Math.round(Math.random())-0.5); }

function RandomizePuzzle() {
var RndArr = ['00','01','02','03','10','11','12','13','20','21','22','23','30','31','32','33'];
RndArr.sort(randOrd);
RndArr.sort(randOrd); // do it again just for kicks if desired
// alert(RndArr.join(' ')); // for testing purposes
var i = 0;
for(var m=0;m<4;m++) {
for(var n=0;n<4;n++) {
var pix = 'pic'+RndArr[i]; // alert(pix);
if (pix == 'pic33') { piece[m][n] = 'blank.jpg'; }
else { piece[m][n] = pix+'.jpg'; }
document.getElementById(pix).src="_images/"+piece[m][n];
document.getElementById(pix).alt=piece[m][n];
i++;
}
}
swop();
}
</script>
</head>

<body onload="ReorderPuzzle()">
<div id="game">
<img src="" id="pic00" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic01" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic02" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic03" onclick="check(this.id);" alt="" border"0"><br>
<img src="" id="pic10" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic11" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic12" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic13" onclick="check(this.id);" alt="" border"0"><br>
<img src="" id="pic20" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic21" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic22" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic23" onclick="check(this.id);" alt="" border"0"><br>
<img src="" id="pic30" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic31" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic32" onclick="check(this.id);" alt="" border"0">
<img src="" id="pic33" onclick="check(this.id);" alt="" border"0">
</div>
<button onclick="RandomizePuzzle()">Shuffle</button>
<button onclick="ReorderPuzzle()">Reorder</button>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@AntifaithauthorDec 13.2008 — fan f*ckin tastic man thanks very much for your help you've been a great help
Copy linkTweet thisAlerts:
@JMRKERDec 16.2008 — Here's the move counter you requested in the PM.
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Game</title>

<style type="text/css">
#game span {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#game img {
/*
width:50px;
height:50px;
*/
font-size:3em;
}

</style>

<script type="text/javascript">

var piece, x, y;

function ReorderPuzzle() {
piece=new Array();

piece[piece.length]=new Array("pic00.jpg","pic01.jpg","pic02.jpg","pic03.jpg");
piece[piece.length]=new Array("pic10.jpg","pic11.jpg","pic12.jpg","pic13.jpg");
piece[piece.length]=new Array("pic20.jpg","pic21.jpg","pic22.jpg","pic23.jpg");
piece[piece.length]=new Array("pic30.jpg","pic31.jpg","pic32.jpg","blank.jpg");
document.getElementById('MoveCnt').value = -1;
swop();
}

function check(imgnum) {
x=parseInt(imgnum.substring(4,5)); // Retrieves the x co-ordinate of the image from it's ID.
y=parseInt(imgnum.substring(3,4)); // Retrieves the y co-ordinate of the image from it's ID.
// alert(y+':'+x); // for testing purposes
var ylow=(y-1<0)?0:y-1; // This makes sure that the lower bound of y does not drop below 0.
var yhigh=(y+1>3)?0:y+1; // This makes sure that the upper bound of y does not drop go above 3.
var xlow=(x-1<0)?0:x-1; // This makes sure that the lower bound of x does not drop below 0.
var xhigh=(x+1>3)?0:x+1; // This makes sure that the upper bound of x does not drop go above 3.

if(document.getElementById(imgnum).src!="blank.jpg") {

if(piece[ylow][x]=="blank.jpg"){piece[ylow][x]=piece[y][x];piece[y][x]="blank.jpg";} // Checks above y for a blank image and if it finds one a swop is made.
else if(piece[yhigh][x]=="blank.jpg"){piece[yhigh][x]=piece[y][x];piece[y][x]="blank.jpg";} // Checks below y for a blank image and if it finds one a swop is made.
else if(piece[y][xlow]=="blank.jpg"){piece[y][xlow]=piece[y][x];piece[y][x]="blank.jpg";} // Checks above x for a blank image and if it finds one a swop is made.
else if(piece[y][xhigh]=="blank.jpg"){piece[y][xhigh]=piece[y][x];piece[y][x]="blank.jpg";} // Checks below x for a blank image and if it finds one a swop is made.
else{alert("Invalid move!!!");} // If there is no blank image around the clicked image then the user is notified.
} else{alert("Invalid move!!!");} // If the user clicks on the blank image then they are notified.
swop();
}

function swop() {
document.getElementById('MoveCnt').value = parseInt(document.getElementById('MoveCnt').value) + 1;
for(var m=0;m<4;m++) {
for(var n=0;n<4;n++) {
document.getElementById("pic"+m+n).src="_images/"+piece[m][n]; // Swops all the image sources for the ones in the array.
document.getElementById("pic"+m+n).alt=piece[m][n];
}
}
}

function randOrd() { return (Math.round(Math.random())-0.5); }

function RandomizePuzzle() {
var RndArr = ['00','01','02','03','10','11','12','13','20','21','22','23','30','31','32','33'];
RndArr.sort(randOrd);
RndArr.sort(randOrd); // do it again just for kicks if desired
// alert(RndArr.join(' ')); // for testing purposes
var i = 0;
for(var m=0;m<4;m++) {
for(var n=0;n<4;n++) {
var pix = 'pic'+RndArr[i]; // alert(pix);
if (pix == 'pic33') { piece[m][n] = 'blank.jpg'; }
else { piece[m][n] = pix+'.jpg'; }
document.getElementById(pix).src="_images/"+piece[m][n];
document.getElementById(pix).alt=piece[m][n];
i++;
}
}
document.getElementById('MoveCnt').value = -1;
swop();
}
</script>
</head>

<body onload="ReorderPuzzle()">
<div id="game">
<span><img src="" id="pic00" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic01" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic02" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic03" onclick="check(this.id);" alt="" border"0"></span><br>
<span><img src="" id="pic10" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic11" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic12" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic13" onclick="check(this.id);" alt="" border"0"></span><br>
<span><img src="" id="pic20" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic21" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic22" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic23" onclick="check(this.id);" alt="" border"0"></span><br>
<span><img src="" id="pic30" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic31" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic32" onclick="check(this.id);" alt="" border"0"></span>
<span><img src="" id="pic33" onclick="check(this.id);" alt="" border"0"></span>
</div>
<button onclick="RandomizePuzzle()">Shuffle</button>
<button onclick="ReorderPuzzle()">Reorder</button>
<input type="text" value="0" id="MoveCnt" size="3" readonly> Moves
</body>
</html>
[/code]
A picture puzzle is a lot harder for me than moving the numbers around. :eek:

Thank goodness for the "Reorder" button! ?
Copy linkTweet thisAlerts:
@PrabakarwdMar 23.2013 — bro where is the img source where i supposed to add?
×

Success!

Help @Antifaith spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...