Full version: jsB@nk » Image » DHTML Puzzle
URL: https://www.javascriptbank.com/dhtml-puzzle.html
Turns almost any picture into a JavaScript pupuzzlezzle.
Full version: jsB@nk » Image » DHTML Puzzle
URL: https://www.javascriptbank.com/dhtml-puzzle.html
<script language="javascript">var picname="photo4.jpg"; // NAME OF PICTURE USED.var piccolor="black"; // BACKGROUND COLOR OF "EMPTY" SPOTvar picwidth=164; // THE PICTURE WILL BE SCALED TO FIT THIS WIDTH.var picheight=240; // THE PICTURE WILL BE SCALED TO FIT THIS HEIGHT. THESE NUMBERS *MUST* BE DIVISIBLE BY 5.//*************DO NOT EDIT BEYOND THIS POINT*************\\if(picwidth%5!=0 || picheight%5!=0 ){picheight=Math.round(picheight/5)*5;picwidth=Math.round(picwidth/5)*5;}var w3c=(document.getElementById)?true:false;var ns4=(document.layers)?true:false;var ie4=(document.all && !w3c)?true:false;var ie5=(document.all && w3c)?true:false;var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;var choices=[null, [6,2] , [1,3,7] , [2,8,4] , [3,5,9] , [4,10] , [1,7,11] , [2,6,8,12] , [3,7,9,13] , [4,8,10,14] , [5,9,15] , [6,12,16] , [7,11,13,17] , [8,12,14,18] , [9,13,15,19] , [10,14,20] , [11,17,21] , [12,16,18,22] , [13,17,19,23] , [14,18,20,24] , [15,19,25] , [16,22] , [21,17,23] , [22,18,24] , [23,19,25] , [24,20]];var grid=[null,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];var blockw=Math.floor(picwidth/5);var blockh=Math.floor(picheight/5);var txt='', ctr=0, rc, IDs=new Array(), empty=new Object();var imgclipsX=new Array();var imgclipsY=new Array();for(i=0;i<5;i++){imgclipsX[i]=new Array(); imgclipsY[i]=new Array();imgclipsX[i][0]=blockw*i; imgclipsX[i][1]=blockw*(i+1);imgclipsY[i][0]=blockh*i; imgclipsY[i][1]=blockh*(i+1);}txt+=(ns4)? '<table cellpadding=0 cellspacing=0 border=0 bgcolor="'+piccolor+'" width="'+picwidth+'" height="'+picheight+'"><tr><td nowrap><ilayer name="cont" width="'+picwidth+'" height="'+picheight+'" bgcolor="'+piccolor+'">' : '<div style="position:relative; width:'+picwidth+'px; height:'+picheight+'px; background-color:'+piccolor+';">';for(r=5;r>=1;r--){for(c=5;c>=1;c--){if( !(r==5&&c==5)){rc=(5*r)+c-5;txt+=(ns4)? '<layer name="l'+rc+'" width="'+blockw+'" height="'+blockh+'" top="0" left="0" clip="'+imgclipsX[c-1][0]+' , '+imgclipsY[r-1][0]+', '+imgclipsX[c-1][1]+' , '+imgclipsY[r-1][1]+'" z-index="0">' : '<div id="l'+rc+'" style="position:absolute; top:0px; left:0px; width:'+blockw+'px; height:'+blockh+'px; clip:rect('+imgclipsY[r-1][0]+' '+imgclipsX[c-1][1]+' '+imgclipsY[r-1][1]+' '+imgclipsX[c-1][0]+'); z-index:'+(rc)+';">';txt+='<img src="'+picname+'" border="0" height="'+picheight+'" width="'+picwidth+'">';txt+=(ns4)? '</layer>' : '</div>';txt+=(ns4)? '<layer name="d'+rc+'" width="'+blockw+'" height="'+blockh+'" top="'+imgclipsY[r-1][0]+'" left="'+imgclipsX[c-1][0]+'" z-index="'+(rc+600)+'" onmouseover="status=\'Tile: '+rc+'\'; return true" onmouseout="status=defaultStatus"></layer>' : '<div id="d'+rc+'" style="position:absolute; top:'+imgclipsY[r-1][0]+'px; left:'+imgclipsX[c-1][0]+'px; width:'+blockw+'px; height:'+blockh+'px; z-index:'+(rc+600)+'" onmouseover="status=\'Tile: '+rc+'\'; return true" onclick="movetile('+rc+')"><table width="'+blockw+'" height="'+blockh+'" cellpadding="0" cellspacing="0" border="0"><tr><td> </td></tr></table></div>';}}}txt+=(ns4)? '</ilayer></td></tr></table>' : '</div>';txt+='<br><br><form><input type="button" value="Shuffle" onclick="ctr=0; autoshuffle()"></form>';document.write(txt);function getid(id){if(ns4) return document.cont.document.layers[id];else if(ie4) return document.all[id];else return document.getElementById(id);}function moveby(i,dx,dy){grid[0]=IDs[i].cellnum;IDs[i].cellnum=empty.cellnum;empty.cellnum=grid[0];grid[0]=grid[empty.cellnum];grid[empty.cellnum]=grid[IDs[i].cellnum];grid[IDs[i].cellnum]=grid[0];IDs[i].xeff+=dx;IDs[i].yeff+=dy;if(ns4){IDs[i].tile.moveBy(dx, dy);IDs[i].dummy.moveBy(dx, dy);}else{IDs[i].tile.style.left=(getleft(IDs[i].tile)+dx)+'px';IDs[i].tile.style.top=(gettop(IDs[i].tile)+dy)+'px';IDs[i].dummy.style.left=IDs[i].xeff+'px';IDs[i].dummy.style.top=IDs[i].yeff+'px';}}function getleft(id){if(ns4)return id.left;else return parseInt(id.style.left);}function gettop(id){if(ns4)return id.top;else return parseInt(id.style.top);}function tile(r,c){var i=(5*r)+c-5;this.tile=getid('l'+i);this.dummy=getid('d'+i);this.xeff=imgclipsX[c-1][0];this.yeff=imgclipsY[r-1][0];this.xstart=this.xeff;this.ystart=this.xeff;this.choices=choices[i];this.cellnum=i;if(ns4){this.dummy.captureEvents(Event.CLICK);this.dummy.onclick=function(){ movetile(i); }}}function movetile(i){if(IDs[i].xeff+blockw==empty.xeff && IDs[i].yeff==empty.yeff){ empty.xeff=IDs[i].xeff ; moveby(i, blockw, 0) }else if(IDs[i].xeff-blockw==empty.xeff && IDs[i].yeff==empty.yeff){ empty.xeff=IDs[i].xeff ; moveby(i, -blockw, 0) }else if(IDs[i].yeff+blockh==empty.yeff && IDs[i].xeff==empty.xeff){ empty.yeff=IDs[i].yeff ; moveby(i, 0, blockh) }else if(IDs[i].yeff-blockh==empty.yeff && IDs[i].xeff==empty.xeff){ empty.yeff=IDs[i].yeff ; moveby(i, 0, -blockh) }}function findwhich(num){for(var j=1;j<25;j++)if(IDs[j].cellnum==num) break;return j;}function autoshuffle(){ctr++;movetile(grid[choices[empty.cellnum][Math.floor(Math.random()*choices[empty.cellnum].length)]]);if(ctr<30)setTimeout('autoshuffle()' ,110);}window.onload=function(){for(r=5;r>=1;r--){for(c=5;c>=1;c--)if( !(r==5&&c==5))IDs[(5*r)+c-5]=new tile( r,c );}empty.xeff=imgclipsX[4][0];empty.yeff=imgclipsY[4][0];empty.choices=choices[25];empty.cellnum=25;}window.onresize=function(){ if(ns4)setTimeout('history.go(0)',400);}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->