Make your own javascript maze.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Mar 2005
Posts: 2
Reputation: tepster is an unknown quantity at this point 
Solved Threads: 0
tepster tepster is offline Offline
Newbie Poster

Make your own javascript maze.

 
0
  #1
Mar 3rd, 2005
Over the past year, ive been making games in javascript, learning everything. With alot of help from my friend, we made a 3d maze using only the ASCII table as graphics. Heres the page i uploaded it to www.tepster.com/maze.html

And heres the actual code, and i would endeavour for anyone to use it on their sites

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Tepster - Www.Tepster.com - tepster@hotmail.com -->

<!-- The use of this script can only be used with the credits aswell-->
<!-- Enjoy this script ! -->

<!-- Begin
// The binary data for the maze
var 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 map
var aspect = [];

// The character map of the viewport
var 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 map
function 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 wall
function 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 display
function draw() {
var atexit;
mapon = false;

// Fill the 'aspect' array with positions of visible walls
switch(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 data
view = [ "\\ /"," \\ / ",
" \\ / "," \\ / ",
" \\ / "," \\ / ",
" \\ / "," / \\ ",
" / \\ "," / \\ ",
" / \\ "," / \\ ",
" / \\ ","/ \\" ];

// paint in the visible walls
if( !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,[ " ", "=======================", ".......................",
".......................", ".......................", ".......................",
".......................", ".......................", ".www.tepster.com.",
".......................", ".......................", ".......................",
"=======================",
" " ] );
}
else {
if( !aspect[5] )
render( 6,3, [" "," "," ","\\ ","|=\\","|.|","|.|","|.|","|.|","|=/","/ "," "," "," " ] );
if( !aspect[7] )
render( 18,3,[" "," "," "," /","/=|","|.|","|.|","|.|","|.|","\\=|"," \\"," "," "," " ] );
if( aspect[6] ) {
if( atexit ) {
render( 6,15,[ " "," "," ",
"===============",". .",". *********** .",
". OMFG ITS DA EXIT! .",". *********** .",". .",
". .","==============="," ",
" "," " ] );
}
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 viewport
var 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 hint
var 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 around
function turn(x) {
dir += x;
if(dir<0) dir=3;
if(dir>3) dir=0;
draw();
}

// move forward
function move() {
// check there is no wall in front of player
if( !aspect[3] ) {
// change position
switch(dir) {
case 0: xpos--; break;
case 1: ypos++; break;
case 2: xpos++; break;
case 3: ypos--; break;
}
steps++;

// repaint
draw();

// check for completion
if( 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 map
function cheat() {
if( mapon ) {
// hide the map if it is already displayed
draw();
}
else {
// build the map
var 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+"@";
else
s=s+"θ";
}
else
s=s+" ";
}
s=s+"\n";
}

// show the map
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>";
}
mapon=true;
cheats++;
}
}
// go!
start();
// End -->
</script>
Reply With Quote Quick reply to this message  
Join Date: Aug 2004
Posts: 780
Reputation: OurNation is an unknown quantity at this point 
Solved Threads: 9
OurNation's Avatar
OurNation OurNation is offline Offline
Master Poster

Re: Make your own javascript maze.

 
0
  #2
Mar 9th, 2005
How does this work? Ive tried it and maybe im doing something wrong?
PETA People for the Eating of Tasty Animals.


FireFox
Hijack This
Ad-Aware
Hijack this tutorial
Microsoft AntiSpyware
CompUchat
Reply With Quote Quick reply to this message  
Join Date: Mar 2005
Posts: 2
Reputation: tepster is an unknown quantity at this point 
Solved Threads: 0
tepster tepster is offline Offline
Newbie Poster

Re: Make your own javascript maze.

 
0
  #3
Mar 9th, 2005
Well its pretty easy to figure out that the binary part of the javascript has to go in head and the actual coding bit has to go in the body. If this doesnt help you view the source from my link.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC