Buenas, como ya les dije, les prepare una nueva versión del build de baldosas que cree ya hace unos días.
La primera versión de dicho script tan solo se podían generar áreas "cuadradas", sin ningún tipo de dinamismo en baldosas. En esta versión he actualizado esa parte para poder colocar los tiles o baldosas en el lugar que desees bajo un array multidimensional para cargar el mapa del área.
Aquí les dejo el código:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
/*!
* Build de Baldosas en Espacios Isométricos - jQuery
*
* Copyright 2011, SoyJoaquin. (-Null-)
* Todos los derechos reservados.
* http://phperos.net
*
* Contacto:
* Email: hgcproductions@hotmail.com
* Skype: SoyJoaquin.
*
*/
var emX;
var emY;
var imagen;
var balH;
var balW;
var mapa = [[1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1],[1,1,1,0,0,1,1,1],[1,1,1,0,0,1,1,1],[1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1]];
$(document).ready(function (){
emX = 150;
emY = 50;
imagen = "imagenes/baldosa.png";
balH = 32;
balW = 64;
$('#piso').css({
left: emX,
top: emY
});
loadBaldosa();
});
function loadBaldosa() {
var id = 0;
for(x=0;x<mapa.length;x++) {
for(y=0;y<mapa[x].length;y++) {
if(mapa[x][y] == 1){
id++;
$("#piso").append('<div id="'+id+'"><img src="'+imagen+'"></div>');
resultadoX = (x * (balW / 2)) - (y * (balW / 2)) + emX;
resultadoY = (x * (balH / 2)) + (y * (balH / 2)) + emY;
$('#'+id).css({
position: "absolute",
left: resultadoX,
top: resultadoY
});
}
}
}
}
</script>
</head>
<body>
<div id="piso" style="position:absolute;"></div>
</body>
</html>
Saludos y espero que les sea de utilidad.
