shyam
04-07-2008, 08:44 AM
yet another pic puzzle script :| i din't even think of it...came up upon it from http://www.codingforums.com/showthread.php?t=136924...i'm even using the same images and some of the same code :( (i'm sorry dj89 (http://www.codingforums.com/member.php?u=60910))...well, heres one way of solving it
<!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>
<title>Sliding Puzzle Game </title>
<base href="http://dan.jex.googlepages.com/" />
<script type="text/javascript">
//Global Varriables
var COL_SIZE = 4;
var ROW_SIZE = 4;
var puzzle = 15;
var moves = 0;
var tile = "0.jpg";
complete = false;
var pieces = new Array(puzzle);
if ( !Array.prototype.filter ) {
Array.prototype.filter = function(cb) {
var ar = [];
for ( var i = 0, l = this.length; i < l; i++ ) {
if ( cb.call(this, this[i], i, this) ) {
ar.push(this[i]);
}
}
return ar;
}
}
function startpuzzle()
{
complete = false; //set complete to false useful is people play the puzzle more than once. this stoping the complete message at the end of the puzzle reapearing evertime the person moves a peice after completeing it more than once.
moves = 0; //reset moves back to zero (again useful if someone has a second go after completeing the puzzle)
pieces = Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0); //Array of 16 counting from 0. allocated space for each image in puzzle.
}
function getNeighbours(which) {
var tiles = [];
var col = which % COL_SIZE;
var row = parseInt(which / ROW_SIZE);
var tiles = [];
if ( row > 0 ) {
// top
tiles.push( (COL_SIZE * (row-1)) + col );
}
if ( row < (ROW_SIZE-1) ) {
// bottom
tiles.push( (COL_SIZE * (row+1)) + col);
}
if ( col > 0 ) {
// left
tiles.push( (COL_SIZE * row) + (col - 1));
}
if ( col < (COL_SIZE-1) ) {
// right
tiles.push( (COL_SIZE * row) + (col + 1));
}
return tiles;
}
function tryMove(click) {
if ( pieces[click] == 0 ) {
// do nothing
return;
}
var tiles = getNeighbours(click);
var blank = tiles.filter(function(v) {
return 0 == pieces[v];
});
if ( blank.length > 0 ) {
// have a blank nearby
swop(click, blank[0]); // can only have one :)
check();
}
}
function shuffle() {
pieces = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0];
var blankPos = 15;
var count = Math.floor(1000 * Math.random());
while ( count-- > 0) {
var tiles = getNeighbours(blankPos);
var rnd = parseInt( Math.random() * 1000, 10) % tiles.length;
var t = pieces[blankPos];
pieces[blankPos] = pieces[tiles[rnd]];
pieces[tiles[rnd]] = t;
//swop(blankPos, tiles[rnd]);
blankPos = tiles[rnd];
}
for ( var i = 0; i < pieces.length; i++ ) {
document.getElementById(i).src = pieces[i] + '.jpg';
}
}
function reset() {
pieces = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0];
for ( var i = 0; i < pieces.length; i++ ) {
document.getElementById(i).src = pieces[i] + '.jpg';
}
}
function swop(a, b) {
/*
var temp = document.getElementById(a).src;
document.getElementById(a).src = document.getElementById(b).src;
document.getElementById(b).src = temp;
*/
var da = document.getElementById(a);
var db = document.getElementById(b);
var dap = da.parentNode;
var dbp = db.parentNode;
da = dap.removeChild(da);
db = dbp.removeChild(db);
var tid = da.id;
da.id = db.id;
db.id = tid;
dap.appendChild(db);
dbp.appendChild(da);
var tttt = pieces[a]; pieces[a]=pieces[b]; pieces[b]=tttt;
}
function check () {
var count = 0;
/*if (!complete) {
moves++;
return;
}*/
for (var i=0; i < 15; i++) {
if (pieces[i] == (i + 1)) count++;
}
if (count < 15) { //alert(count + " number(s) are correct");
}
else {
alert(" Hooray!! You are the Winner! \nThe final piece to the puzzle is your prize.");
cflag = false;
//document.images[15].src = romek;
}
} // fun check()
</script>
</head>
<body onload="startpuzzle();">
<table border=0 cellspacing=0 cellpadding=0><tr><td bgcolor="#0080ff">
<button onClick="shuffle(); return false">Randomise</button><button onClick="reset(); return false">Reset</button></td></tr></table>
<br>
<br>
<table border=3 cellspacing=0 cellpadding=5><tr><td bgcolor="#FFFFFF">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><a href="#" onclick="tryMove( 0); return false;"><img id="0" src="1.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 1); return false;"><img id="1" src="2.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 2); return false;"><img id="2" src="3.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 3); return false;"><img id="3" src="4.jpg" border="0"/></a></td>
</tr><tr>
<td><a href="#" onclick="tryMove( 4); return false;"><img id="4" src="5.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 5); return false;"><img id="5" src="6.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 6); return false;"><img id="6" src="7.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 7); return false;"><img id="7" src="8.jpg" border="0"/></a></td>
</tr><tr>
<td><a href="#" onclick="tryMove( 8); return false;"><img id="8" src="9.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 9); return false;"><img id="9" src="10.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(10); return false;"><img id="10" src="11.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(11); return false;"><img id="11" src="12.jpg" border="0"/></a></td>
</tr><tr>
<td><a href="#" onclick="tryMove(12); return false;"><img id="12" src="13.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(13); return false;"><img id="13" src="14.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(14); return false;"><img id="14" src="15.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(15); return false;"><img id="15" src="0.jpg" border="0"/></a></td>
</tr>
</table>
</td></tr></table>
</center>
</td></tr></table>
</body>
</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>
<title>Sliding Puzzle Game </title>
<base href="http://dan.jex.googlepages.com/" />
<script type="text/javascript">
//Global Varriables
var COL_SIZE = 4;
var ROW_SIZE = 4;
var puzzle = 15;
var moves = 0;
var tile = "0.jpg";
complete = false;
var pieces = new Array(puzzle);
if ( !Array.prototype.filter ) {
Array.prototype.filter = function(cb) {
var ar = [];
for ( var i = 0, l = this.length; i < l; i++ ) {
if ( cb.call(this, this[i], i, this) ) {
ar.push(this[i]);
}
}
return ar;
}
}
function startpuzzle()
{
complete = false; //set complete to false useful is people play the puzzle more than once. this stoping the complete message at the end of the puzzle reapearing evertime the person moves a peice after completeing it more than once.
moves = 0; //reset moves back to zero (again useful if someone has a second go after completeing the puzzle)
pieces = Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0); //Array of 16 counting from 0. allocated space for each image in puzzle.
}
function getNeighbours(which) {
var tiles = [];
var col = which % COL_SIZE;
var row = parseInt(which / ROW_SIZE);
var tiles = [];
if ( row > 0 ) {
// top
tiles.push( (COL_SIZE * (row-1)) + col );
}
if ( row < (ROW_SIZE-1) ) {
// bottom
tiles.push( (COL_SIZE * (row+1)) + col);
}
if ( col > 0 ) {
// left
tiles.push( (COL_SIZE * row) + (col - 1));
}
if ( col < (COL_SIZE-1) ) {
// right
tiles.push( (COL_SIZE * row) + (col + 1));
}
return tiles;
}
function tryMove(click) {
if ( pieces[click] == 0 ) {
// do nothing
return;
}
var tiles = getNeighbours(click);
var blank = tiles.filter(function(v) {
return 0 == pieces[v];
});
if ( blank.length > 0 ) {
// have a blank nearby
swop(click, blank[0]); // can only have one :)
check();
}
}
function shuffle() {
pieces = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0];
var blankPos = 15;
var count = Math.floor(1000 * Math.random());
while ( count-- > 0) {
var tiles = getNeighbours(blankPos);
var rnd = parseInt( Math.random() * 1000, 10) % tiles.length;
var t = pieces[blankPos];
pieces[blankPos] = pieces[tiles[rnd]];
pieces[tiles[rnd]] = t;
//swop(blankPos, tiles[rnd]);
blankPos = tiles[rnd];
}
for ( var i = 0; i < pieces.length; i++ ) {
document.getElementById(i).src = pieces[i] + '.jpg';
}
}
function reset() {
pieces = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0];
for ( var i = 0; i < pieces.length; i++ ) {
document.getElementById(i).src = pieces[i] + '.jpg';
}
}
function swop(a, b) {
/*
var temp = document.getElementById(a).src;
document.getElementById(a).src = document.getElementById(b).src;
document.getElementById(b).src = temp;
*/
var da = document.getElementById(a);
var db = document.getElementById(b);
var dap = da.parentNode;
var dbp = db.parentNode;
da = dap.removeChild(da);
db = dbp.removeChild(db);
var tid = da.id;
da.id = db.id;
db.id = tid;
dap.appendChild(db);
dbp.appendChild(da);
var tttt = pieces[a]; pieces[a]=pieces[b]; pieces[b]=tttt;
}
function check () {
var count = 0;
/*if (!complete) {
moves++;
return;
}*/
for (var i=0; i < 15; i++) {
if (pieces[i] == (i + 1)) count++;
}
if (count < 15) { //alert(count + " number(s) are correct");
}
else {
alert(" Hooray!! You are the Winner! \nThe final piece to the puzzle is your prize.");
cflag = false;
//document.images[15].src = romek;
}
} // fun check()
</script>
</head>
<body onload="startpuzzle();">
<table border=0 cellspacing=0 cellpadding=0><tr><td bgcolor="#0080ff">
<button onClick="shuffle(); return false">Randomise</button><button onClick="reset(); return false">Reset</button></td></tr></table>
<br>
<br>
<table border=3 cellspacing=0 cellpadding=5><tr><td bgcolor="#FFFFFF">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><a href="#" onclick="tryMove( 0); return false;"><img id="0" src="1.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 1); return false;"><img id="1" src="2.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 2); return false;"><img id="2" src="3.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 3); return false;"><img id="3" src="4.jpg" border="0"/></a></td>
</tr><tr>
<td><a href="#" onclick="tryMove( 4); return false;"><img id="4" src="5.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 5); return false;"><img id="5" src="6.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 6); return false;"><img id="6" src="7.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 7); return false;"><img id="7" src="8.jpg" border="0"/></a></td>
</tr><tr>
<td><a href="#" onclick="tryMove( 8); return false;"><img id="8" src="9.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove( 9); return false;"><img id="9" src="10.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(10); return false;"><img id="10" src="11.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(11); return false;"><img id="11" src="12.jpg" border="0"/></a></td>
</tr><tr>
<td><a href="#" onclick="tryMove(12); return false;"><img id="12" src="13.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(13); return false;"><img id="13" src="14.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(14); return false;"><img id="14" src="15.jpg" border="0"/></a></td>
<td><a href="#" onclick="tryMove(15); return false;"><img id="15" src="0.jpg" border="0"/></a></td>
</tr>
</table>
</td></tr></table>
</center>
</td></tr></table>
</body>
</html>