Full version: jsB@nk » Game » Maze
URL: https://www.javascriptbank.com/maze.html
Navigate around a 3D animation JavaScript maze in search of the exit in the fewest moves possible. The maze is complex, but you can cheat by taking a peak at the map. Tested in IE5 and Netscape.
Full version: jsB@nk » Game » Maze
URL: https://www.javascriptbank.com/maze.html
<style type="text/css">.viewport { background:white;text-align:center }.readout { color:white;background:black;font-family:sans-serif;font-size:8pt;font-weight:bold;text-align:center }</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><layer name="viewport" top="10" height="340" bgcolor="white"><nolayer></nolayer></layer><div id="viewport" class="viewport" style="width: 0pt; height: 200px;"></div><layer name="readout" top="350" height="40"><nolayer></nolayer></layer><div id="readout" class="readout"></div><layer top="380"></layer><form><input type="button" onclick="javascript:turn(-1);" value="Left"><input type="button" onclick="javascript:move();" value="Forward"><input type="button" onclick="javascript:turn(1);" value="Right"><br><input type="button" onclick="javascript:cheat();" value="Cheat"></form><script language="JavaScript">// Jason Hotchkiss (jasonhotchkiss@home.com)<!-- Begin// The binary data for the mazevar map = [[ 255, 255, 255, 255, 255, 255, 255, 255 ],[ 162, 8, 3, 248, 0, 0, 0, 17 ],[ 136, 162, 235, 251, 254, 237, 221, 213 ],[ 187, 190, 10, 170, 162, 68, 136, 149 ],[ 136, 130, 186, 170, 171, 86, 170, 181 ],[ 238, 250, 130, 0, 10, 68, 136, 149 ],[ 130, 130, 30, 255, 250, 238, 221, 213 ],[ 186, 190, 248, 128, 2, 137, 17, 21 ],[ 168, 32, 2, 42, 174, 187, 119, 117 ],[ 139, 239, 235, 170, 226, 34, 68, 69 ],[ 250, 40, 32, 170, 42, 190, 255, 213 ],[ 130, 234, 182, 162, 170, 138, 0, 21 ],[ 170, 136, 34, 62, 170, 34, 255, 253 ],[ 168, 191, 168, 160, 131, 234, 162, 35 ],[ 175, 160, 170, 175, 170, 14, 186, 233 ],[ 168, 42, 42, 234, 170, 224, 130, 37 ],[ 163, 171, 162, 0, 34, 63, 187, 181 ],[ 190, 34, 63, 127, 254, 138, 160, 133 ],[ 162, 234, 160, 16, 34, 40, 189, 85 ],[ 138, 170, 175, 213, 226, 238, 165, 125 ],[ 248, 162, 40, 84, 34, 8, 8, 37 ],[ 130, 43, 171, 85, 163, 235, 251, 169 ],[ 175, 234, 33, 20, 130, 9, 1, 15 ],[ 160, 66, 173, 246, 174, 253, 125, 97 ],[ 191, 94, 32, 162, 32, 5, 69, 45 ],[ 162, 75, 234, 43, 238, 213, 21, 105 ],[ 168, 106, 42, 238, 2, 17, 68, 37 ],[ 175, 202, 130, 2, 171, 95, 95, 141 ],[ 168, 154, 254, 190, 171, 113, 18, 213 ],[ 130, 2, 0, 128, 2, 4, 70, 5 ],[ 255, 255, 255, 255, 255, 255, 255, 255 ]];// The visible part of the mapvar aspect = [];// The character map of the viewportvar view = [];var exitx=24,exity=57,xpos,ypos,dir,mapon,steps,cheats;// Function to initialise the variables.function start() {xpos = 1;ypos = 1;dir=2;steps=0;cheats=0;setTimeout("draw()",100);}// function to lookup contents of a position in the mapfunction getGrid(x,y) {if( x<0 || x>30 || y<0 || y>63 )return true;if( ((map[x][Math.floor(y/8)]) & (128>>>(y%8))) > 0 )return true;return false;}// function to render a wallfunction render( col, len, data ) {var i;for( i=0; i<14; ++i )view[i] = view[i].substr(0,col) + data[i] + view[i].substr(col+len,27-col-len);}// function to update the displayfunction draw() {var atexit;mapon = false;// Fill the 'aspect' array with positions of visible wallsswitch(dir) {case 0: aspect = [ getGrid(xpos,ypos-1),getGrid(xpos,ypos+1),getGrid(xpos-1,ypos-1),getGrid(xpos-1,ypos),getGrid(xpos-1,ypos+1),getGrid(xpos-2,ypos-1),getGrid(xpos-2,ypos),getGrid(xpos-2,ypos+1),getGrid(xpos-3,ypos-1),getGrid(xpos-3,ypos),getGrid(xpos-3,ypos+1),getGrid(xpos-4,ypos) ];atexit = (xpos == exitx + 1 && ypos == exity );break;case 1:aspect = [ getGrid(xpos-1,ypos),getGrid(xpos+1,ypos),getGrid(xpos-1,ypos+1),getGrid(xpos,ypos+1),getGrid(xpos+1,ypos+1),getGrid(xpos-1,ypos+2),getGrid(xpos,ypos+2),getGrid(xpos+1,ypos+2),getGrid(xpos-1,ypos+3),getGrid(xpos,ypos+3),getGrid(xpos+1,ypos+3),getGrid(xpos,ypos+4) ];atexit = (xpos == exitx && ypos == exity-1 );break;case 2:aspect = [ getGrid(xpos,ypos+1),getGrid(xpos,ypos-1),getGrid(xpos+1,ypos+1),getGrid(xpos+1,ypos),getGrid(xpos+1,ypos-1),getGrid(xpos+2,ypos+1),getGrid(xpos+2,ypos),getGrid(xpos+2,ypos-1),getGrid(xpos+3,ypos+1),getGrid(xpos+3,ypos),getGrid(xpos+3,ypos-1),getGrid(xpos+4,ypos) ];atexit = (xpos == exitx - 1 && ypos == exity );break;case 3:aspect = [ getGrid(xpos+1,ypos),getGrid(xpos-1,ypos),getGrid(xpos+1,ypos-1),getGrid(xpos,ypos-1),getGrid(xpos-1,ypos-1),getGrid(xpos+1,ypos-2),getGrid(xpos,ypos-2),getGrid(xpos-1,ypos-2),getGrid(xpos+1,ypos-3),getGrid(xpos,ypos-3),getGrid(xpos-1,ypos-3),getGrid(xpos,ypos-4) ];atexit = (xpos == exitx && ypos == exity+1 );break;}// initialise the view dataview = [ "\\ /"," \\ / "," \\ / "," \\ / "," \\ / "," \\ / "," \\ / "," / \\ "," / \\ "," / \\ "," / \\ "," / \\ "," / \\ ","/ \\" ];// paint in the visible wallsif( !aspect[0] ) render( 0,3, [" ","==\\","..|","..|","..|","..|","..|","..|","..|","..|","..|","..|","==/"," " ] );if( !aspect[1] ) render( 24,3,[" ","/==","|..","|..","|..","|..","|..","|..","|..","|..","|..","|..","\\=="," " ] );if( !aspect[2] ) render( 2,5, [" ","\\ ","| ","|===\\","|...|","|...|","|...|","|...|","|...|","|...|","|===/","| ","/ "," " ] );if( !aspect[4] ) render( 20,5,[" "," /"," |","/===|","|...|","|...|","|...|","|...|","|...|","|...|","\\===|"," |"," \\"," " ] );if( aspect[3] ) {render( 2,23,[ " ", "=======================", ".......................",".......................", ".......................", ".......................",".......................", ".......................", ".......................",".......................", ".......................", ".......................","======================="," " ] );}else {if( !aspect[5] )render( 6,3, [" "," "," ","\\ ","|=\\","|.|","|.|","|.|","|.|","|=/","/ "," "," "," " ] );if( !aspect[7] )render( 18,3,[" "," "," "," /","/=|","|.|","|.|","|.|","|.|","\\=|"," \\"," "," "," " ] );if( aspect[6] ) {if( atexit ) {render( 6,15,[ " "," "," ", "===============",". .",". *********** .", ". THE WAY OUT .",". *********** .",". .", ". .","==============="," ", " "," " ] );}else {render( 6,15,[ " "," "," ", "===============","...............","...............", "...............","...............","...............", "...............","==============="," ", " "," " ] );}}else {if( !aspect[8] )render( 8,3, [" "," "," "," ","\\ ","|=\\","|.|","|.|","|=/","/ "," "," "," "," "] );if( !aspect[10] )render( 16,3,[" "," "," "," "," /","/=|","|.|","|.|","\\=|"," \\"," "," "," "," "] );if( aspect[9] ) {render( 8,11,[ " "," "," "," ", "===========","...........","...........","...........", "...........","==========="," "," ", " "," " ] );}else {if( aspect[11] )render( 10,7,[ " "," "," "," "," ", "=======",".......",".......","======="," ", " "," "," "," " ] ); } }}// write data to viewportvar s = "";var i;for( i=0; i<14; ++i ) s=s+" "+view[i]+" \n";if(document.layers){document.layers["viewport"].document.open();document.layers["viewport"].document.write("<pre>"+s+"</pre>");document.layers["viewport"].document.close();}else {viewport.innerHTML = "<pre>"+s+"</pre>";}// display hintvar dist = Math.floor(Math.sqrt((xpos-exitx)*(xpos-exitx) + (ypos-exity)*(ypos-exity)));var direction = ", exit lies "+dist+" steps to ";if( xpos>exitx) direction += "north";if( xpos<exitx) direction += "south";if( ypos>exity) direction += "west";if( ypos<exity) direction += "east";if(document.layers) {document.layers["readout"].document.open();document.layers["readout"].document.write("Facing " + ["north","east","south","west"][dir] + direction);document.layers["readout"].document.close();}else {readout.innerHTML = "Facing " + ["north","east","south","west"][dir] + direction; }}// Turn aroundfunction turn(x) {dir += x;if(dir<0) dir=3;if(dir>3) dir=0;draw();}// move forwardfunction move() {// check there is no wall in front of playerif( !aspect[3] ) {// change positionswitch(dir) {case 0: xpos--; break;case 1: ypos++; break;case 2: xpos++; break;case 3: ypos--; break;}steps++;// repaintdraw();// check for completionif( xpos == exitx && ypos == exity ) {// finished!alert( "Well done! you reached the exit in "+steps+" steps,\n"+"and you looked at the map "+cheats+" times.\n"+"Press OK to see if you can do any better." );start(); } }}// show the mapfunction cheat() {if( mapon ) {// hide the map if it is already displayeddraw();}else {// build the mapvar x,y,s="";for(x=xpos-10;x<xpos+10;++x) {for(y=ypos-10;y<ypos+10;++y) {if(getGrid(x,y))s=s+"X";else if( x==xpos && y==ypos ) {if(document.layers)// netscape does not support arrow characters s=s+"*"else s=s+["↑","→","↓","←"][dir];}else if( x==exitx && y==exity ) {if(document.layers)s=s+"@";elses=s+"θ";}elses=s+" ";}s=s+"\n";}// show the mapif( document.layers ) {document.layers["viewport"].document.open();document.layers["viewport"].document.write("<pre>"+s+"</pre>");document.layers["viewport"].document.close();}else {viewport.innerHTML = "<pre>"+s+"</pre>";}mapon=true;cheats++; }}// go!start();// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->