¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Programación [Aporte][Motor IsoMap] Build...
Este es uno de los ejemplos creados hace unos años con IsoMap (Motor de juegos Isométricos desarrollado por mi).
Espero que les sea de utilidad.

<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Joaquin A." />
<meta name="twitter" content="JoakoM010" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
body{
	margin:0px;
	background-Color:#000;
}
</style>
<script>
/*!
 * Motor IsoMap
 * Build de Baldosas en Espacios Isométricos - jQuery
 *
 * Copyright 2011, Joaquin A. (SoyJoaquin. / -Null-)
 * Todos los derechos reservados.
 * http://phperos.net
 *
 * Date: Fri Ago 19 12:46:14 2011
 *
 * Contacto:
 * Twitter: @JoakoM010
 * Skype: SoyJoaquin.
*/

var imagen;
var imagenS;
var grosor;
var pder;
var pizq;
var puertaDer;
var puertaIzq;
var esquinaIzq;
var esquinaDer;
var Hpuerta;
var Hpared;
var esquinaX;
var esquinaY;
var balH;
var balW;
var puertaX;
var puertaY;
var avatarX;
var avatarY;

// Config...
var tX = 5; // Limite X
var tY = 5; // Limite Y
var dondeP = 2; // Pos Puerta (Coor. Baldosa)
var dirPuerta = 0; // Dirección Puerta (0 = Izquierda, 1 = Derecha)

$(document).ready(function (){                                                                      
	imagen = "imagenes/baldosa.png"; 
	imagenS = "imagenes/baldosa2.png"; 
	grosor = "imagenes/grosor.png";  
	pder = "imagenes/pared-der.png";  
	pizq = "imagenes/pared-izq.png";    
	puertaDer = "imagenes/puerta-der.png";   
	puertaIzq = "imagenes/puerta-izq.png";   
	esquinaIzq = "imagenes/esquina-izq.png";                     
	esquinaDer = "imagenes/esquina-der.png";    
	Hpuerta = 86;
	Hpared = 123;
	balH = 32;
	balW = 64;      
	loadBaldosa();
	$('#piso').css({
		left: ($(window).width() - resultadoX-balW)/2,
		top: ($(window).height() - resultadoY-balH)/2
	});
});

function loadBaldosa() {
	var id = 0;
	for(x=0;x<tX;x++) {
		for(y=0;y<tY;y++) {
			id++;
			if(tX==(x+1) || tY==(y+1))
				$("#piso").append('<div id="g-'+id+'"><img src="'+grosor+'"></div>');
			if(y==0)
				$("#piso").append('<div id="pd-'+id+'"><img src="'+pder+'"></div>');
			if(x==0)
				$("#piso").append('<div id="pi-'+id+'"><img src="'+pizq+'"></div>');
			if(dirPuerta == 0){
				puertaX = ((x * (balW / 2)) - (y * (balW / 2)) + 1);
				if(dondeP < tY){
					if(y==dondeP && x==0)
						$("#piso").append('<div id="puerta-'+id+'"><img src="'+puertaIzq+'"></div>');
				}else{
					if(y==(tY-1) && x==0)
						$("#piso").append('<div id="puerta-'+id+'"><img src="'+puertaIzq+'"></div>');
				}
			}else if(dirPuerta == 1){
				puertaX = (((x * (balW / 2)) - (y * (balW / 2))) + (balW / 2));
				if(dondeP < tX){
					if(x==dondeP && y==0)
						$("#piso").append('<div id="puerta-'+id+'"><img src="'+puertaDer+'"></div>');
				}else{
					if(x==(tX-1) && y==0)
						$("#piso").append('<div id="puerta-'+id+'"><img src="'+puertaDer+'"></div>');
				}
			}
			if(y==(tY-1) && x==0){
				$("#piso").append('<div id="esquina-'+id+'"><img src="'+esquinaIzq+'"></div>'); 
				esquinaX = (((x * (balW / 2)) - (y * (balW / 2)))-8); 
				esquinaY = ((x * (balH / 2)) + (y * (balH / 2))-(139-balH-1));
			}
			if(x==(tX-1) && y==0){
				$("#piso").append('<div id="esquina-'+id+'"><img src="'+esquinaDer+'"></div>'); 
				esquinaX = (((x * (balW / 2)) - (y * (balW / 2)))+balW+2);
				esquinaY = ((x * (balH / 2)) + (y * (balH / 2))-(139-balH-1));
			}   
   
			$("#piso").append('<div id="'+id+'"><img id="bb'+id+'" src="'+imagen+'" onMouseOver="sBaldosa(0, '+id+');" onMouseOut="sBaldosa(1, '+id+');"></div>');  
   
			resultadoX = (x * (balW / 2)) - (y * (balW / 2));
			resultadoY = (x * (balH / 2)) + (y * (balH / 2));

			paredXder = (resultadoX + (balW / 2));
			paredXizq = resultadoX;
			paredY = (resultadoY - Hpared);
			puertaY = (resultadoY - (Hpuerta - 1)); 
   
			$('#'+id+',#g-'+id).css({
				position: "absolute",
				left: resultadoX,
				top: resultadoY
			});
			$('#pd-'+id).css({
				position: "absolute",
				left: paredXder,
				top: paredY
			});   
			$('#pi-'+id).css({
				position: "absolute",
				left: paredXizq,
				top: paredY
			});  
			$('#puerta-'+id).css({
				position: "absolute",
				left: puertaX,
				top: puertaY
			});  
			$('#esquina-'+id).css({
				position: "absolute",
				left: esquinaX,
				top: esquinaY
			});  
		}
	}
}

function sBaldosa(p, id){
	(p==0) ? $('#bb'+id).attr('src', imagenS) : $('#bb'+id).attr('src', imagen);
}
</script>
</head>
<body>
	<div id="piso" style="position:absolute;"></div>
</body>
</html>


Imágenes a usar (Incluir en carpeta "imagenes"):
pared-der.png: http://img43.imageshack.us/img43/3350/paredder.png
pared-izq.png: http://img836.imageshack.us/img836/6817/paredizq.png
puerta-der.png: http://img5.imageshack.us/img5/7210/puertader.png
puerta-izq.png: http://img838.imageshack.us/img838/4239/puertaizq.png
baldosa.png: http://img211.imageshack.us/img211/1225/baldosa.png
baldosa2.png: http://img824.imageshack.us/img824/1948/baldosa2.png
esquina-der.png: http://img153.imageshack.us/img153/2764/esquinader.png
esquina-izq.png: http://img94.imageshack.us/img94/747/esquinaizq.png
grosor.png: http://img266.imageshack.us/img266/4167/grosor.png

Link para Descargar TODO:
http://www.mediafire.com/?yekyqye3scycrya


Ejemplo:


http://www.youtube.com/watch?v=HXxkjphGEyQ#ws

Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Perdonen, se me olvidó subir imágenes.
Ya editaré el tema enseguida.

Saludos.

Edito: Listo, imágenes agregadas.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
No me lo puedo creer, ¡Esta genial!  :laugh:
@Suigetzu

No me lo puedo creer, ¡Esta genial!  :laugh:


Gracias.
Acabo de editar el tema agregándole el nombre de las imágenes para aquellos que no sepan. Luego lo pondré a descarga para que se les sea mas fácil.

Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
¿Hay enlace para utilizarlo como el de DIV o este hay que montarlo? D:
Para seguirme solamente tienes que darle al corazón
@maoellisto

¿Hay enlace para utilizarlo como el de DIV o este hay que montarlo? D:


Si te refieres a IsoMap, no.
Saludos.

Edito: Link de descarga colocado para descargar los ficheros aquellos que no entendieron.
Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Programación [Aporte][Motor IsoMap] Build...