Xpounded Novel Navigation in 3D

Copy and Paste and Use this Novel Navigation Script

Select All

<HTML>
<HEAD>
<TITLE>
Xpounded Simple 3D Maze
</TITLE>
<STYLE>
	#stats table {border-collapse:collapse}
	#stats td {background:#000000;color:#FFFFFF;font-size:12;font-weight:bold;}
	.t1	{color:#0000DD;}
</STYLE>
<SCRIPT Language="JavaScript">
function borderIt(obj){
	obj.style.borderWidth=2	
	obj.style.borderStyle="solid"
	obj.style.borderColor="#FF3366"
}
function unborderIt(obj){
	obj.style.borderWidth=2	
	obj.style.borderStyle="solid"
	obj.style.borderColor="#660066"
}
//only very small changes made to incorporate hyper-links.
//movement and show routines now check for inequalities instead of exact values.

//The basic idea and design for this 3d mapper came from a game called 
// Sarnik - (a complete RPG in DHTML). Check it out for a robust javascript
// ray-trace like 3d routine using horizontal and verticle intersection matricies.

//This set of routines is a much lower cholesterol version producing tolerable results - enjoy!

// map dimension boundries
var XMAX=15
var YMAX=15
//-----
//the cheezy automaper section (dimensions must match the map)
var viewed=new Array()
for(var i=0;i<YMAX;i++){
	viewed[i]=new Array()
	for(var j=0;j<XMAX;j++)
		viewed[i][j]="0"
}
var lx=1
var ly=6
function automap(){
	var vret=""
	viewed[ly][lx]="<font color='red'>X</font>"
	switch(face){
		case 1:viewed[y][x]="<font color='blue'>^</font>";break;
		case 2:viewed[y][x]="<font color='blue'>></font>";break;
		case 3:viewed[y][x]="<font color='blue'>v</font>";break;
		case 4:viewed[y][x]="<font color='blue'><</font>";break;
	}
	//viewed[y][x]="<font color='blue'>P</font>"
	lx=x
	ly=y
	for(var i=0;i<YMAX;i++){
		for(var j=0;j<XMAX;j++){
			vret+=viewed[i][j]+" "
		}
		vret+="<br>"
	}
	mapp.innerHTML=vret
}
function addLink(){
	
}
//-----
//map and set-up section
var face=1 //1-N, 2-E, 3-S, 4-W. face==direction player is facing. 
var x=1	//x-coordinate
var y=6	//y-coordinate
var walls=new Array()	//holds map gifs
//Feel free to make another map, or toy with this one. 
//you can use different dimensions - just relect the dimension in
// the map boundries: XMAX and YMAX above.
//play around with it and have fun!
// a map
var map=new Array()
map[0] =Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1)
map[1] =Array(1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7)
map[2] =Array(1,0,1,0,1,1,0,1,0,1,0,1,1,1,0,1)
map[3] =Array(1,0,1,0,0,1,0,1,0,1,0,0,0,1,2,1)
map[4] =Array(1,0,1,0,1,1,0,1,0,1,1,1,0,0,0,1)
map[5] =Array(1,0,1,0,1,1,0,0,0,0,0,1,1,1,0,1)
map[6] =Array(1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1)
map[7] =Array(1,3,1,1,0,1,1,1,4,0,1,1,1,1,0,1)
map[8] =Array(1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5)
map[9] =Array(1,0,1,1,1,1,0,1,1,1,1,0,1,1,0,1)
map[10]=Array(1,0,1,1,1,1,0,1,0,0,0,0,0,1,0,1)
map[11]=Array(1,0,1,0,0,8,0,1,0,1,0,1,0,1,0,1)
map[12]=Array(1,0,1,0,1,1,0,1,0,0,0,1,0,0,0,1)
map[13]=Array(1,0,1,0,1,1,0,1,0,1,1,1,1,1,0,1)
map[14]=Array(1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1)
map[15]=Array(1,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1)

//Initialization
function init(){
	fixImg(tpl,0,0,1)
	fixImg(i1,0,0)
	fixImg(i2,179,0)
	fixImg(i3,39,39)
	fixImg(i4,139,39)
	fixImg(i5,79,79)
	fixImg(i6,119,79)
	fixImg(i7,0,39)
	fixImg(i8,179,39)
	fixImg(i9,39,39)
	fixImg(i10,139,39)
	fixImg(i11,79,99)
	fixImg(i12,119,99)
	fixImg(i13,39,39)
	fixImg(i14,79,79)
	fixImg(i15,99,99)
	//assign all map gifs to the array walls.
	for(i=1;i<16;i++)
		eval("walls["+i+"]=i"+i)
	look()
	showMap()
	document.focus()
}
//    (Viewport)  L=Left, C=Center, R=Right
//  ____ ____ ____
// |    |    |    | Each viewport panle has a set of unique gifs assigned to it.
// | L  | C  | R  | See the init function above in conjunction with
// |    |    |    | the showMap function below.
// |____|____|____|
//
// There are three levels of pannels in each segment with 0 being the farthest and
// 2 being the closest to the player. 
//	L0 C0 R0
//	L1 C1 R1
//	L2 C2 R2
//   	   P(layer)
//
//The 3 viewport segments (I also call them panel arrays - Hmm)
var mapr=new Array()	//right panel
var mapc=new Array()	//center panel
var mapl=new Array()	//left panel

//capture keystrokes (IE of course)
document.onkeydown=keydown

//makes image setup a little less verbose.
function fixImg(obj,x1,y1,v){
	obj.style.position="absolute";
	obj.style.left=x1;
	obj.style.top=100+y1;
	if(v==undefined){obj.style.visibility="hidden";}
	else{obj.style.visibility="visible";}
}

function look(){
	//look is limited to calling funtions based on the direction faced.
	switch(face){
		case 1:lookNorth();break;
		case 2:lookEast();break;
		case 3:lookSouth();break;
		case 4:lookWest();break;
	}
}
function lookNorth(){
	//no doubt I (or you) could condense these direction codings considerably.
	//north
	if(x>0)
		mapl[2]=map[y][x-1]
	else mapl[2]=1
	if(y>0)
		mapc[2]=map[y-1][x]
	else	mapc[2]=1
	if(x<XMAX)
		mapr[2]=map[y][x+1]
	else mapr[2]=1
	if(x>0)if(y>0)
		mapl[1]=map[y-1][x-1]
	else mapl[1]=1
	if(y>1)
		mapc[1]=map[y-2][x]
	else mapc[1]=1
	if(x<XMAX)if(y>0)
		mapr[1]=map[y-1][x+1]
	else mapr[1]=1
	if(x>0)if(y>1)
		mapl[0]=map[y-2][x-1]
	else mapl[0]=1
	if(y>2)
		mapc[0]=map[y-3][x]
	else mapc[0]=1
	if(x<XMAX)if(y>1)
		mapr[0]=map[y-2][x+1]

else mapr[0]=1
}
function lookEast(){
	//east
	if(y>0)
		mapl[2]=map[y-1][x]
	else mapl[2]=1
	if(x<XMAX)
		mapc[2]=map[y][x+1]
	else mapc[2]=1
	if(y<YMAX)
		mapr[2]=map[y+1][x]
	else mapr[2]=1
	
	if(x<XMAX)if(y>0)
		mapl[1]=map[y-1][x+1]
	else mapl[1]=1
	if(x<XMAX-1)
		mapc[1]=map[y][x+2]
	else mapc[1]=1
	if(x<XMAX)if(y<YMAX)
		mapr[1]=map[y+1][x+1]
	else mapr[1]=1
	if(x<XMAX-1)if(y>0)
		mapl[0]=map[y-1][x+2]
	else mapl[0]=1
	if(x<XMAX-2)
		mapc[0]=map[y][x+3]
	else mapc[0]=1
	if(x<XMAX-1)if(y<YMAX)
		mapr[0]=map[y+1][x+2]
	else mapr[0]=1
}
function lookSouth(){
	//south
	if(x>0)
		mapr[2]=map[y][x-1]
	else mapr[2]=1
	if(y<YMAX)
		mapc[2]=map[y+1][x]
	else mapc[2]=1
	if(x<XMAX)
		mapl[2]=map[y][x+1]
	else mapl[2]=1
	
	if(x>0)if(y<YMAX)
		mapr[1]=map[y+1][x-1]
	else mapr[1]=1
	if(y<YMAX-1)
		mapc[1]=map[y+2][x]
	else mapc[1]=1
	if(x<XMAX)if(y<YMAX)
		mapl[1]=map[y+1][x+1]
	else mapl[1]=1

if(x>0)if(y<YMAX-1)
		mapr[0]=map[y+2][x-1]
	else mapr[0]=1
	if(y<YMAX-2)
		mapc[0]=map[y+3][x]
	else mapc[0]=1
	if(x<XMAX)if(y<YMAX-1)
		mapl[0]=map[y+2][x+1]
	else mapl[0]=1
}
function lookWest(){
	//west
	//make sure the only valid indexes are used
	//indicate the gif to be displayed (0 or 1) in the appropriate viewport panel
	//select the gif based on the present location of the player on the map,
	//and the direction the player is facing(west in this case).
	if(y>0)
		mapr[2]=map[y-1][x]
	else mapr[2]=1
	if(x>0)
		mapc[2]=map[y][x-1]
	else mapc[2]=1
	if(y<YMAX)
		mapl[2]=map[y+1][x]
	else mapl[2]=1
	
	if(x>0)if(y>0)
		mapr[1]=map[y-1][x-1]
	else mapr[1]=1
	if(x>1)
		mapc[1]=map[y][x-2]
	else mapc[1]=1
	if(x>0)if(y<YMAX)
		mapl[1]=map[y+1][x-1]
	else mapl[1]=1

if(x<XMAX-1)if(y>0)
		mapr[0]=map[y-1][x-2]
	else mapr[0]=1
	if(x>2)
		mapc[0]=map[y][x-3]
	else mapc[0]=1
	if(x<XMAX-1)if(y<YMAX)
		mapl[0]=map[y+1][x-2]
	else mapl[0]=1
}
function showMap(){
	//set the appropriate gifs visibility to visible if the
	//the panle array indicates a wall at that level.
	//re-check the viewport section above for more on levels.
	if(mapr[0]!=0){
		walls[6].style.visibility="visible"
		walls[12].style.visibility="hidden"
	}
	else{
		walls[6].style.visibility="hidden"
		walls[12].style.visibility="visible"
	}
	if(mapr[1]!=0){
		walls[4].style.visibility="visible"
		walls[10].style.visibility="hidden"
	}
	else{
		walls[4].style.visibility="hidden"
		walls[10].style.visibility="visible" 	}
	if(mapr[2]!=0){
		walls[2].style.visibility="visible"
		walls[8].style.visibility="hidden"
	}
	else{
		walls[2].style.visibility="hidden"
		walls[8].style.visibility="visible"
	}

if(mapl[0]!=0){
		walls[5].style.visibility="visible"
		walls[11].style.visibility="hidden"
	}
	else{
		walls[5].style.visibility="hidden"
		walls[11].style.visibility="visible"
	}
	if(mapl[1]!=0){
		walls[3].style.visibility="visible"
		walls[9].style.visibility="hidden"
	}
	else{
		walls[3].style.visibility="hidden"
		walls[9].style.visibility="visible"
	}
	if(mapl[2]!=0){
		walls[1].style.visibility="visible"
		walls[7].style.visibility="hidden"
	}
	else{
		walls[1].style.visibility="hidden"
		walls[7].style.visibility="visible"
	}
	if(mapc[0]!=0){
		if((mapc[1]==0)&&(mapc[2]==0)){
			walls[15].style.visibility="visible"
		}
		else{
			walls[15].style.visibility="hidden"
		}
	}
	else{
		walls[15].style.visibility="hidden"
	}
	if(mapc[1]!=0){
		if(mapc[2]==0){
			walls[14].style.visibility="visible"
		}
		else{
			walls[14].style.visibility="hidden"
		}
	}
	else{
		walls[14].style.visibility="hidden"
	}
	if(mapc[2]!=0){
		walls[13].style.visibility="visible"
	}
	else{
		walls[13].style.visibility="hidden"
	}

if(mapc[0]>1){
		xlink1.innerHTML=links[mapc[0]]
		xref1.style.visibility="visible"
		xilink.width="12"
		xilink.height="4"
		xlink1.style.left=102
		xlink1.style.top=204
	}
	if(mapc[1]>1){
		xlink1.innerHTML=links[mapc[1]]
		xref1.style.visibility="visible"
		xilink.width="51"
		xilink.height="17"
		xlink1.style.left=82
		xlink1.style.top=196
	}
	if(mapc[2]>1){
		xlink1.innerHTML=links[mapc[2]]
		xref1.style.visibility="visible"
		xilink.width="120"
		xilink.height="40"
		xlink1.style.left=48
		xlink1.style.top=180
	}
	if((mapc[0]<2) && (mapc[1]<2) && (mapc[2]<2))xref1.style.visibility="hidden"
}
var links=new Array()
links[0]=null
links[1]=null
links[2]="<a id='xref1' href='http://www.xpounded.netfirms.com' style='z-index:29' title='Our Home!'><IMG id='xilink' SRC='mazegifs/xpoundedwire.jpg' onmouseover='borderIt(this)' onmouseout='unborderIt(this)'></a>"
links[3]="<a id='xref1' href='http://www.generation5.com' style='z-index:29' title='Grow a Brain!'><IMG id='xilink' SRC='mazegifs/Ann1.jpg' onmouseover='borderIt(this)' onmouseout='unborderIt(this)'></a>"
links[4]="<a id='xref1' href='http://www.xpounded.netfirms.com/blockdrop.html' style='z-index:29' title='Play It Now!'><IMG id='xilink' SRC='mazegifs/blockdrop1.jpg' onmouseover='borderIt(this)' onmouseout='unborderIt(this)'></a>"
links[5]="<a id='xref1' href='http://www.docjavascript.com' style='z-index:29' title='The Doctor is in.'><IMG id='xilink' SRC='mazegifs/docjs1.jpg' onmouseover='borderIt(this)' onmouseout='unborderIt(this)'></a>"
links[6]="<a id='xref1' href='http://www.xpounded.netfirms.com/xjobsearch.html' style='z-index:29' title='Find your next job'><IMG id='xilink' SRC='mazegifs/jobsearch1.jpg' onmouseover='borderIt(this)' onmouseout='unborderIt(this)'></a>"
links[7]="<a id='xref1' href='http://www.javascript-games.org' style='z-index:29' title='Play a Javascript Game!'><IMG id='xilink' SRC='mazegifs/jsgames1.jpg' onmouseover='borderIt(this)' onmouseout='unborderIt(this)'></a>"
links[8]="<a id='xref1' href='http://www.wsh.net' style='z-index:29' title='Automation Building Blocks'><IMG id='xilink' SRC='mazegifs/wsh1.jpg' onmouseover='borderIt(this)' onmouseout='unborderIt(this)'></a>"
</SCRIPT>
</HEAD>
<BODY onload="init()">

<IMG id="tpl" SRC="mazegifs/dirtSky.gif">

<IMG id="i1" SRC="mazegifs/wall1.gif">
<IMG id="i2" SRC="mazegifs/wall2.gif">
<IMG id="i3" SRC="mazegifs/wall3.gif">
<IMG id="i4" SRC="mazegifs/wall4.gif">
<IMG id="i5" SRC="mazegifs/wall5.gif">
<IMG id="i6" SRC="mazegifs/wall6.gif">
<IMG id="i7" SRC="mazegifs/wall7.gif">
<IMG id="i8" SRC="mazegifs/wall8.gif">
<IMG id="i9" SRC="mazegifs/wall9.gif">
<IMG id="i10" SRC="mazegifs/wall10.gif">
<IMG id="i11" SRC="mazegifs/wall11.gif">
<IMG id="i12" SRC="mazegifs/wall12.gif">
<IMG id="i13" SRC="mazegifs/wall13.gif">
<IMG id="i14" SRC="mazegifs/wall14.gif">
<IMG id="i15" SRC="mazegifs/wall15.gif">

<div id="stats" style="position:absolute;left:0;top:320;"></div>
<div id="mapp" style="position:absolute;left:240;top:100;font-family:fixedsys">
Use the Cursor Keys to Navigate<br>
Up Arrow - Forward<br>
Left, Right Arrows - Turn<br>
Back Arrow - Back Up.<br>
</div>
<div id="xlink1" style="position:absolute">
	<a id="xref1" href="http://www.xpounded.netfirms.com" style="z-index:99" title="click here to go there!">
		<IMG id="xilink" SRC="mazegifs/xpoundedwire.jpg">
	</a>
</div>
<div style="position:absolute;left:500;top:100;font-family:fixedsys">
	<table><tr><td class="t1"> - Link - </td><td>X</td><td>Y</td></tr>
	<tr><td class="t1">Xpounded</td><td>14</td><td>3</td></tr>
	<tr><td class="t1">Generation 5 ANN</td><td>1</td><td>7</td></tr>
	<tr><td class="t1">Xpounded Block Drop</td><td>8</td><td>7</td></tr>
	<tr><td class="t1">Doc JavaScript</td><td>15</td><td>8</td></tr>
	<tr><td class="t1">Job Search</td><td>1</td><td>15</td></tr>
	<tr><td class="t1">Javascript Games</td><td>15</td><td>1</td></tr>
	<tr><td class="t1">WSH Resourcs</td><td>5</td><td>11</td></tr>
	</table>
</div>
</BODY>
</HTML>

View HTML | Required Images

- Copyright 2003 Xpounded -
All JS code developed by Xpounded is developed in RHSCoder.
All VBS code developed by Xpounded is developed in VBS QuickDev IDE, or RHSCoder.
Privacy Statement
Feedback