Hola a todos.
Veréis estoy haciendo un pequeño juego en javascript que consta de un tablero echo con un array de arrays.
La funcion que me genera en array es generarMapa(); y devuelve dicho array multidimensional, de ésta forma:
Código PHP:
var mapa =[
[1,0,0,0],
[1,0,1,0],
[1,0,1,1],
[1,0,1,0],
["a","b","c","d"]
];
Donde los 0 son camino y los unos son muro.
Yo quiero "pintar" dicho array, con divs de diferrente colores, dependiendo del número entero almacenado en la posicion del array.
Para eso uso ésta funcion:
Código PHP:
function formatearMapa(){
//Variables de funcion.
var mapa = generarMapa();
var mpd = document.getElementById('mapa');
var nombre;
var local;
var autor;
var tamano;
for (fila = 0; fila < mapa.length-1; fila++) { //El -1 es para no leer la ultima fila, la de los datos
for (columna = 0; columna < mapa[0].length; columna++) {
if (mapa[fila][columna] == 0) {
mpd.innerHTML += '<div id="tile' + fila + columna + '" class="c0"></div>';
}
else if (mapa[fila][columna] == 1) {
mpd.innerHTML += '<div id="tile' + fila + '-' + columna + '" class="c1"></div>';
}
else if (mapa[fila][columna] == 2) {
mpd.innerHTML += '<div id="tile' + fila + '-' + columna + '" class="c2"></div>';
}
else if (mapa[fila][columna] == 99) {
mpd.innerHTML += '<div id="tile' + fila + '-' + columna + '" class="c1"></div>';
}
//La segunda parte. Cuando las filas lleguen al final, sumamos uno para acceder a la
//parte de los datos
if(fila == mapa.length-1){
fila++;
nombre = mapa[fila][0];
local = mapa[fila][1];
autor = mapa[fila][2];
tamano = mapa[fila][3];
var datos = document.getElementById('datosmap');
datos.innerHTML = nombre;
datos.style.height = "30px"
}
}
}
//Ajustamos el ancho y el fondo del div principal
var ancho = mapa.lenght*30;
mpd.style.width = ancho+ " px";
}
La ultima fila, es para almacenar datos especificos de mapa (nombre, etc etc).
Las clases CSS solo les dan un display: inline-block; (y su correspondiente hack para la "%&$=ª" de IE).
El div "map" es donde van los divs que se generan en cada bucle.
EN Firefox, Opera, Chrome y Safari, se ve genial, tal como yo quiero, cuadradito por cada posicion de array. Pero en IE no me muestra nada, pantalla en blanco.
Yo supongo que puede ser que IE no represente el codigo html generado con javascript, no se..
Tambien he probado con el document.write();, pero sigue en blanco.
Alguna ayuda/tip/consejo??
Gracias por adelantado, es que llevo toda la tarde dándole vueltas y nanai