Foros del Web » Programando para Internet » Javascript »

mapa aleatorio 10 x 10

Estas en el tema de mapa aleatorio 10 x 10 en el foro de Javascript en Foros del Web. Estoy comenzando con un mapa aleatorio, normalmente programo en php, pero ando trasteando el javascript. Haber si me dicen cual es el error, que seguro ...
  #1 (permalink)  
Antiguo 10/08/2007, 18:41
 
Fecha de Ingreso: marzo-2005
Ubicación: Madrid
Mensajes: 233
Antigüedad: 19 años, 1 mes
Puntos: 5
mapa aleatorio 10 x 10

Estoy comenzando con un mapa aleatorio, normalmente programo en php, pero ando trasteando el javascript.

Haber si me dicen cual es el error, que seguro que es muy gordo pero no lo veo.

Se supone que tiene que hacer una tabla 10x10
Código:
<html>
<head>
<title>Version 0.1 mapa</title>
 <script language="Javascript">
<!--

function LineaTerreno(){

for (a=1;a>=10;a++){

var casilla = new Array();

casilla[0] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/desierto1.gif';
casilla[1] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/desierto2.gif';
casilla[2] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/desierto3.gif';
casilla[3] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/desierto4.gif';
casilla[4] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/llanura1.gif';
casilla[5] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/llanura2.gif';
casilla[6] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/llanura3.gif';
casilla[7] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/llanura4.gif';
casilla[8] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/montaña1.gif';
casilla[9] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/montaña1.gif';
casilla[10] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/montaña2.gif';
casilla[11] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/montaña3.gif';
casilla[12] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/montaña4.gif';




var ale = Math.round(Math.random()*13);

document.write('<td width="60" height="60" background="#000000"><img src ="');
document.write(casilla[ale]);
document.write('" \>');
}}


function Mapa(){
for (a=1;a>=10;a++){
document.write('<td>');
LineaTerreno();
document.write('</td>');
}}

// -->
</script>
</head>



<body>



<table>
<script>Mapa();</script>
</table>
</body>



</html>
  #2 (permalink)  
Antiguo 11/08/2007, 08:22
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Re: mapa aleatorio 10 x 10

Hola ikarush, veo unos cuantos errores a solventar:

El principal es en los bucles for (como ves no entra en ninguna iteración). Un for funciona así:
for( declaracion_inicial; condicion_para_seguir; despues_de_comprobar_si_seguimos )

Entonces en tus bucles: for (a=1;a>=10;a++) la declaración inicial es correcta (aunque veremos luego...), pero la condición para seguir (o empezar) es incorrecta. fíjate que si a=1 nunca dará true a>=10, en todo caso tendría que ser a<=10. Y el incremento está bien escrito.

Luego tendrás un problema con el ámbito de las variables. Al utilizar la variable a para los dos bucles, siendo a declarada como global, un bucle sobreescribirá al otro. Para solucionarlo basta con declaralo con var dentro del bucle.


También veo que dentro de LineaTerreno() abres un <td> pero no lo cierras, cuidado con eso.

A la variable ale le veo un problema: no se adapta a la dimensión que le des a casilla, sólo es para 13 elementos. Para adaptarlo a tantas casilla como añadas en vez de ese 13 trabajamos con casilla.length. Y para crear un número aleatorio no utilizamos Math.round(), sino Math.floor(), ya que Math.round() da distribuciones diferentes para los números que son posibles, de esta manera: 0.5, 1, 1, ..., 1, 1, 0.5

Luego fallos de estilo: Por ejemplo, yo no declararía el array casilla dentro de cada iteración, ten en cuenta que lo estas declarando 10x10 veces, 100 veces que declaras algo que ya está declarado. Lo que yo haría sería declararlo como global, y así está disponible siempre.
El atributo language="javascript" no se suele utilizar ya, está obsoleto. Utiliza type="text/javascript" en su lugar.
He visto problemas con los nombres de las imágenes. Al tener eñes no parece que interprete bien el nombre. Mejor escapamos esas eñes: %F1.


Bueno, a parte de eso, y de que ya normalmente no se utilizan tablas para el formato de las páginas (CSS), y que, probablemente, esta generación sea más correcta en PHP (generar este tipo de código HTML en javascript es un poco obtrusivo, habría que tener en cuenta a los que no tienen activado javascript, o al validador de código HTML) veo que todo funciona.



Te dejo aquí todos los cambios que he hecho:
Código PHP:
<html>
<
head>
<
title>Version 0.1 mapa</title>
<
script type="text/javascript">
<!--

var 
casilla = new Array();
casilla[0] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/desierto1.gif';
casilla[1] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/desierto2.gif';
casilla[2] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/desierto3.gif';
casilla[3] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/desierto4.gif';
casilla[4] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/llanura1.gif';
casilla[5] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/llanura2.gif';
casilla[6] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/llanura3.gif';
casilla[7] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/llanura4.gif';
casilla[8] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/monta%F1a1.gif';
casilla[9] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/monta%F1a1.gif';
casilla[10] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/monta%F1a2.gif';
casilla[11] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/monta%F1a3.gif';
casilla[12] = 'http://usuarios.lycos.es/ligadeloscaballeros/casillas/monta%F1a4.gif';

function 
LineaTerreno(){
    for (var 
a=1;a<=10;a++){
        var 
ale Math.floor(Math.random()*casilla.length);
        
document.write('<td width="60" height="60" background="#000000"><img src ="' casilla[ale] + '" /></td>');
    }
}


function 
Mapa(){
    
document.write("<table>");
    for (var 
a=1;a<=10;a++){
        
document.write('<tr>');
        
LineaTerreno();
        
document.write('</tr>');
    }
    
document.write("</table>");
}

// -->
</script>
</head>



<body>




<script>Mapa();</script>


</body>


</html> 
Probado en IE6 y FF2.



Un saludo, espero no haber sido muy rígido
Hasta luego!
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #3 (permalink)  
Antiguo 25/08/2007, 17:46
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Re: mapa aleatorio 10 x 10

ikarush ¿te sirvió mi respuesta? ¿Has conseguido hacer lo que te proponías?
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #4 (permalink)  
Antiguo 27/07/2012, 09:06
 
Fecha de Ingreso: febrero-2011
Mensajes: 9
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: mapa aleatorio 10 x 10

Yo si te lo agradezco derkenuke, muchas gracias por tu aclaración.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 06:01.