/ISO MAP

## ISO MAP
<html>
<head>
<style>
#main {
	border:#333;
	border-width:2px;
	border-style:solid;
}
</style>

<script type="text/javascript">
var map = Array([0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]);
var tileDict = Array("water.png");
var tileImg = new Array();
var loaded = 0;
var loadTimer;

function loadImg(){
	for(var i=0;i<tileDict.length;i++){
		tileImg[i] = new Image();
		tileImg[i].src = tileDict[i];
		tileImg[i].onload = function(){
			loaded++;
		}
	}
}

function loadAll(){
	if(loaded == tileDict.length){
		clearInterval(loadTimer);
		drawMap();
	}
}

function drawMap(){
var tileH = 25;
var tileW = 50;
var mapX = 80;
var mapY = 10;
	for(i=0;i<map.length;i++){
		for(j=0;j<map[i].length;j++){
			var drawTile= map[i][j];
			var xpos = (i-j)*tileH + mapX;
			var ypos = (i+j)*tileH/2+ mapY;
			ctx.drawImage(tileImg[drawTile],xpos,ypos);
		}
	}
}

function init(){
	ctx = document.getElementById('main').getContext('2d');
	loadImg();
	loadTimer = setInterval(loadAll,100);
}

</script>
</head>
<body onLoad="init();">
<canvas id="main" width="210" height="120"></canvas>
</body>
</html>
	<html>
	<head>
	<style>
	#main {
	border:#333;
	border-width:2px;
	border-style:solid;
	}
	</style>

	<script type="text/javascript">
	var map = Array([0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]);
	var tileDict = Array("water.png");
	var tileImg = new Array();
	var loaded = 0;
	var loadTimer;

	function loadImg(){
	for(var i=0;i<tileDict.length;i++){
	tileImg[i] = new Image();
	tileImg[i].src = tileDict[i];
	tileImg[i].onload = function(){
	loaded++;
	}
	}
	}

	function loadAll(){
	if(loaded == tileDict.length){
	clearInterval(loadTimer);
	drawMap();
	}
	}

	function drawMap(){
	var tileH = 25;
	var tileW = 50;
	var mapX = 80;
	var mapY = 10;
	for(i=0;i<map.length;i++){
	for(j=0;j<map[i].length;j++){
	var drawTile= map[i][j];
	var xpos = (i-j)*tileH + mapX;
	var ypos = (i+j)*tileH/2+ mapY;
	ctx.drawImage(tileImg[drawTile],xpos,ypos);
	}
	}
	}

	function init(){
	ctx = document.getElementById('main').getContext('2d');
	loadImg();
	loadTimer = setInterval(loadAll,100);
	}

	</script>
	</head>
	<body onLoad="init();">
	<canvas id="main" width="210" height="120"></canvas>
	</body>
	</html>