Xpounded Javascript 3/4 View Map

Copy and Paste and Use this Simple 3/4 View Map Script

Select All

<HTML>
<HEAD>
<TITLE>
Xpounded Javascript Isomorphic Map.
</TITLE>
<STYLE>

</STYLE>
<SCRIPT Language="JavaScript">
//You can make as many 'immediate' world segment maps as you think the system will hold.
var map1=new Array()
var map2=new Array()
var map3=new Array()
var map4=new Array()
var map=new Array()
//pick a segment map to staart off in
var curmapx=2
var curmapy=2
map1[0]= Array(1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1)
map1[1]= Array(1,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,1)
map1[2]= Array(1,0,1,0,1,1,1,1,0,0,0,0,0,1,1,0,1,1)
map1[3]= Array(1,0,1,0,0,0,1,0,1,1,1,1,1,0,0,0,1,1)
map1[4]= Array(0,0,1,1,1,0,1,0,1,0,0,1,1,1,0,1,0,0)
map1[5]= Array(1,0,1,0,0,0,1,0,1,1,0,1,1,0,0,1,0,1)
map1[6]= Array(1,0,1,0,1,1,1,0,0,0,0,1,1,0,1,1,0,1)
map1[7]= Array(1,0,0,0,1,1,0,0,1,1,0,0,0,0,1,0,0,1)
map1[8]= Array(1,0,1,0,1,1,1,0,0,0,0,0,0,1,0,0,0,1)
map1[9]= Array(1,0,1,0,0,0,1,0,1,1,1,1,1,0,0,1,0,1)
map1[10]=Array(0,0,1,1,1,0,1,0,1,0,0,1,1,1,0,1,0,0)
map1[11]=Array(1,0,1,0,0,0,0,0,1,1,0,1,1,0,0,1,0,1)
map1[12]=Array(1,0,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,1)
map1[13]=Array(0,0,0,0,1,1,0,0,1,1,0,0,0,0,1,0,0,0)
map1[14]=Array(1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1)

map2[0]= Array(1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1)
map2[1]= Array(1,0,0,0,0,1,0,0,0,1,0,1,0,0,0,0,0,1)
map2[2]= Array(1,0,1,0,1,1,1,1,0,0,0,0,0,1,1,0,0,1)
map2[3]= Array(1,0,1,0,0,0,1,0,1,1,1,1,1,0,0,1,0,1)
map2[4]= Array(0,0,1,1,1,0,1,0,1,0,0,1,1,1,0,1,0,0)
map2[5]= Array(1,0,1,0,0,0,1,0,1,1,0,1,1,0,0,1,0,1)
map2[6]= Array(1,0,1,0,1,1,1,0,0,0,0,1,1,0,1,1,0,1)
map2[7]= Array(1,0,0,0,1,1,0,0,1,1,0,0,0,0,1,0,0,1)
map2[8]= Array(1,0,1,0,1,0,0,0,0,0,0,0,0,1,1,0,1,1)
map2[9]= Array(1,0,1,0,0,0,1,0,1,1,0,0,1,0,0,1,1,1)
map2[10]=Array(0,0,1,0,1,0,1,0,1,1,0,1,1,1,0,1,0,0)
map2[11]=Array(1,0,1,0,0,0,0,0,1,1,0,1,1,0,0,1,0,1)
map2[12]=Array(1,0,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,1)
map2[13]=Array(0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,0,0,0)
map2[14]=Array(1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1)

map3[0]= Array(1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1)
map3[1]= Array(1,1,1,0,1,1,0,0,0,1,1,1,1,1,1,0,1,1)
map3[2]= Array(1,1,1,0,1,1,1,1,0,1,1,1,0,0,1,0,1,1)
map3[3]= Array(1,1,1,0,1,1,1,1,0,1,1,1,1,0,0,0,0,1)
map3[4]= Array(0,0,0,0,1,1,1,1,0,0,0,1,1,1,0,1,0,0)
map3[5]= Array(1,1,1,0,1,1,1,1,0,1,0,1,1,0,0,1,0,1)
map3[6]= Array(1,1,1,0,1,1,1,1,0,0,0,1,1,0,1,1,0,1)
map3[7]= Array(1,1,1,0,0,0,0,0,0,1,0,0,0,0,1,0,0,1)
map3[8]= Array(1,1,1,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1)
map3[9]= Array(1,0,0,0,0,0,1,1,1,1,0,0,1,0,0,1,0,1)
map3[10]=Array(0,0,1,0,1,0,0,1,1,1,0,1,1,1,0,1,0,0)
map3[11]=Array(1,0,1,0,1,1,0,1,1,1,0,0,0,0,0,0,1,1)
map3[12]=Array(1,0,1,0,1,1,0,1,1,1,1,1,1,0,1,0,1,1)
map3[13]=Array(0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0)
map3[14]=Array(1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1)

map4[0]= Array(1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1)
map4[1]= Array(1,1,1,0,1,1,0,0,0,0,1,1,1,1,1,0,1,1)
map4[2]= Array(1,1,1,0,0,0,1,1,1,0,1,0,0,0,0,0,1,1)
map4[3]= Array(1,1,1,1,1,0,0,0,1,0,1,0,1,1,1,1,1,1)
map4[4]= Array(0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0)
map4[5]= Array(1,1,1,0,1,1,1,1,0,0,0,1,1,1,1,1,1,1)
map4[6]= Array(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1)
map4[7]= Array(1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1)
map4[8]= Array(1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1)
map4[9]= Array(1,1,0,1,0,0,0,0,0,0,0,0,0,1,1,1,1,1)
map4[10]=Array(0,0,0,1,0,1,1,0,0,0,0,0,1,1,0,0,0,0)
map4[11]=Array(1,1,1,0,0,1,1,1,0,0,0,1,1,1,0,1,1,1)
map4[12]=Array(1,1,1,0,1,1,1,1,0,1,0,1,1,1,0,1,1,1)
map4[13]=Array(0,0,0,0,1,1,0,0,0,1,0,0,0,0,0,0,0,0)
map4[14]=Array(1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1)

//make the world - you could make evey segment map unique if you want to.
var world=new Array()
world[0]=new Array()
world[0][0]=map1
world[0][1]=map2
world[0][2]=map3
world[1]=new Array()
world[1][0]=map3
world[1][1]=map4
world[1][2]=map2
world[2]=new Array()
world[2][0]=map1
world[2][1]=map2
world[2][2]=map1

//set a couple of variabls to hold the segment map dimensions
//to make it simple all segment maps are the same dimension.
var XMAX=map1[0].length
var YMAX=map1.length
showmap(curmapx,curmapy)
//showmap just fills the map display array with the current world segment
//the code could be thined out by using the world array directly
function showmap(n,m){
	for(var i=0;i<YMAX;i++){
		map[i]=new Array()
		for(var j=0;j<XMAX;j++)
			eval("map["+i+"]["+j+"]=world["+n+"]["+m+"]["+i+"]["+j+"]")
	}
}
//viewmap shows and hides appropriate images based on whether the segment map
//has a wall at that position or not. (1==wall, 0==not)
function viewmap(){
	var cntr=0
	for(var i=0;i<YMAX;i++){
		for(var j=XMAX;j>-1;j--){
			if(map[i][j]==1){
				imgs[cntr].style.visibility="visible"
			}
			else{
				imgs[cntr].style.visibility="hidden"
			}
			cntr++
		}
	}
}
//the image array
var imgs=new Array()
function init(){
	var cntr=0
	//add the images for the world segment map to the document
	for(var i=0;i<YMAX;i++){
		for(var j=XMAX;j>-1;j--){

imgs[cntr]=document.createElement("IMG")
				imgs[cntr].src="block3.gif"

imgs[cntr].style.position="absolute"
				imgs[cntr].style.top=i*9+100
				imgs[cntr].style.left=j*23+(i+1)*5+100
				imgs[cntr].style.visibility="hidden"
				document.body.appendChild(imgs[cntr++])
		}
	}
	//get the correct layout
	showmap(curmapx,curmapy)
	//make the map visible
	viewmap()
	//position the man
	manpos()
	//show what world segment the man is in
	showstat()
	document.focus()
}
//move the man around in the world
function manpos(){
	man.style.top=posY*9+100
	man.style.left=posX*23+(posY+1)*5+100
	checkevent()
}
//do something at stragic spots
function checkevent(){
	//use posX and posY to trigger events based on the
	//world segment the man is in.
	//dumb example
	if((curmapx==1)&&(curmapy==1)){
		if((posX==8)&&(posY==7)){
			alert("UGH - BREAD SPORE")
		}
	}
}
document.onkeydown=keydown
function keydown(){
	var k = window.event.keyCode
	//make sure the man can move, hen move him.
	//update the world segment map according to where the man is.
	switch(k){
		case 37:
			if(posX==0){
				curmapx-=1
				if(curmapx<0)curmapx=2
				showmap(curmapx,curmapy)
				viewmap()
				posX=XMAX-1
				showstat()
			}
			if(map[posY][Math.floor(posX-posDx)]==0){
				posX-=posDx
				manpos()
			}
			break;
		case 38:
			if(posY==0){
				curmapy-=1
				if(curmapy<0)curmapy=2
				showmap(curmapx,curmapy)
				viewmap()
				posY=YMAX-1
				showstat()
			}
			if(map[posY-posDy][Math.floor(posX)]==0){
				posY-=posDy
				manpos()
			}
			break;
		case 39:
			if(posX==(XMAX-1)){
				curmapx+=1
				if(curmapx>2)curmapx=0
				showmap(curmapx,curmapy)
				viewmap()
				posX=0
				showstat()
			}
			if(map[posY][Math.floor(posX+posDx)]==0){
				posX+=posDx
				manpos()
			}
			break;
		case 40:
			if(posY==(YMAX-1)){
				curmapy+=1
				if(curmapy>2)curmapy=0
				showmap(curmapx,curmapy)
				viewmap()
				posY=0
				showstat()
			}
			if(map[posY+posDy][Math.floor(posX)]==0){
				posY+=posDy
				manpos()
			}
			break;
	}
}
//show which segment of the world the man is in.
function showstat(){
	stats.innerText="WORLD X=" + curmapx + " Y=" + curmapy
}
//start the man off on inside a segment at the following position.
var posX=1
var posY=5
//the deltas for movement
var posDx=0.5
var posDy=1
</SCRIPT>
</HEAD>
<BODY onload="init()">
<h1>Simple Isomorphic Map (3/4 view)</h1>
<b>Play with the code, improve on it, and use it to help build a simple RPG.</b>
<IMG id="man" style="position:absolute;z-index:99;" SRC="man.gif">
<div id="stats" style="font-weight:bold;position:absolute;left:10;top:250;background:#000000;color:#FFFFFF;"></div>
</BODY>
</HTML>

View HTML

- 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