I am new to JavaScript and as a project I decided to create a generic game map that can be used for RPGs, strategies, et cetera. After reading up on it I have wrote a few different versions and picked the one that I thought served my purposes the best.

My only goal for the JavaScript was to create a top-down grid map that allowed a 'unit' to be placed onto it and allowing that 'unit' to be able to move to new tiles. I plan on using AJAX to send a XHR to a PHP file that updates the units location in a MySQL table. When a user goes to the map it grabs the user coordinates and places their unit in the proper location on the map. After every move by the unit I update the database.

I am using PHP to generate the background images based on a table in a database. I didn't include any back-end coding to this.

If anyone could give some criticism I would be obliged.

Thanks - Loki

Code:
<html>
    <head>
        <title>Generic Map</title>
        
        <style type='text/css'>
        .tile {
			position: absolute;
			top: 0px;
			left: 0px
			width: 30px;
			height: 30px;
			border: 1px dotted gray;
		}
		
		.unit {
			position: absolute;
			top: 0px;
			left: 0px
			width: 30px;
			height: 30px;
			padding: 1px;
			background: red;
		}
		</style>
		<script type='text/javascript'>
		
		function Map(unitID, unitX, unitY, tileSize, mapWidth, mapHeight) {
			this.unitID = unitID;
			this.unitX = unitX;
			this.unitY = unitY;
			this.tileSize = tileSize;
			this.mapWidth = mapWidth;
			this.mapHeight = mapHeight;
		}
		
		Map.prototype.create = function() {
			for(x = 1; x <= 32; x++) {
				for(y = 1; y <= 18; y++) {
					var d = document.createElement('DIV');
					d.className='tile';
					d.setAttribute('ID','tile_' + x + '_' + y);
					d.setAttribute('title', 'Tile-' + x + '-' + y);
					d.style.top = -30 + (y*30);
					d.style.left = -30 + (x*30);
					d.style.width = 30
					d.style.height = 30;
					d.setAttribute('flag','0');
					d.setAttribute('onclick','move(' + this.unitID + ',' + x + ',' + y + ')')
					document.getElementById('map').appendChild(d);
				}
			}
		}
		
		Map.prototype.add = function() {
			var d = document.createElement('DIV');
			var tile = document.getElementById('tile_' + this.unitX + '_' + this.unitY);
			d.className='unit';
			d.setAttribute('ID', 'unit_' + this.unitID);
			d.style.top = tile.style.top;
			d.style.left = tile.style.left;
			d.style.width = 30;
			d.style.height = 30;
			document.getElementById('map').appendChild(d)
		}
		
		function getLeft(obj) {
			return parseInt(obj.style.left.replace('px', ''));
		}
		
		function getTop(obj) {
			return parseInt(obj.style.top.replace('px', ''));
		}
		
		function move(unitID, tileDestX, tileDestY) {
			var unit = document.getElementById('unit_' + unitID);
			var tile = document.getElementById('tile_' + tileDestX + '_' + tileDestY)
			x = getLeft(unit);			y = getTop(unit);
			destX = getLeft(tile);		destY = getTop(tile);
			newX = x;					newY = y;
			
			if(x > destX) newX--;
			if(x < destX) newX++;
			if(y > destY) newY--;
			if(y < destY) newY++;
			
			unit.style.left = newX;		unit.style.top = newY;
			
			if(newX != destX || newY != destY) {
				setTimeout('move(' + unitID + ',' + tileDestX +',' + tileDestY+')',5);
			}
		}
		var map = new Map(1, 4, 6, 30, 20, 20);

        </script>
    </head>
    
    <body>
    	<div id='map'><script type='text/javascript'>map.create(); map.add();</script></div>
    
    </body>
</html>