Rotar imagenes aleatoriamente sin repetir!

hernandavidgomez · #1 (**permalink**) 07/10/2010, 09:41

Hola, quisieran que porfavor me ayudaran con un problema, debo hacer un juego con rotacion de imagenes, estas imagenes cada determinado tiempo cambian de posicion, el codigo que tengo actualmente rota las imagenes cada determinado tiempo lo unico que me falta es que las imagenes no se repitan!, llevo horas tratando de resolver esto y la verdad no he podido, agradeceria cualquier ayuda, de antemano muchas gracias,
este es el codigo que tengo

Código HTML:

<html>
  <head>
    <title>
      Prueba de rotaci&oacute;n aleatoria de im&aacute;genes
    </title>

    <script type="text/javascript">
      <!--

// Conjunto de nombres de las imagenes a rotar
imagenes = new Array (
    'imagenes/Albania.png',
	'imagenes/Andorra.png',
	'imagenes/Algeria.png',
	'imagenes/Argentina.png',
	'imagenes/Aruba.png',
	'imagenes/Brazil.png',
	'imagenes/Cameroon.png',
	'imagenes/China.png',
	'imagenes/Colombia.png');

espera = 3;
imagen_actual = 0;



function cambio ()
{	var i=0;
  	for(i=0;i<imagenes.length;i++)
	{
		ima = Math.floor (Math.random () * imagenes.length);
		var uti= new Array;
		uti[i]=ima;

				
			
		
		document.getElementById('div'+i).innerHTML="<img src='"+imagenes[ima]+"' />";
		
	}

    if (imagen_actual >= imagenes.length)
        imagen_actual = 0;

    self.setTimeout ('cambio()', espera * 1000);
}


function rotar ()
{
    var aux, i, pos;


    for (i = 0; i < imagenes.length; i++) {
        pos = Math.floor (Math.random () * imagenes.length);

        if (pos != i) {
            aux = imagenes[i];
            imagenes[i] = imagenes[pos];
            imagenes[pos] = aux;
        }
    }

    cambio ();
}

      -->
    </script>
  </head>
  <body onLoad="rotar()">
  <div id="div0" style="float:left"></div>
  <div id="div1" style="float:left"></div>
  <div id="div2" style="float:left"></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <div id="div3" style="float:left"></div>
  <div id="div4" style="float:left"></div>
  <div id="div5" style="float:left"></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <div id="div6" style="float:left"></div>
  <div id="div7" style="float:left"></div>
  <div id="div8" style="float:left"></div>
    
  </body>
</html>

Ribon · #2 (**permalink**) 07/10/2010, 11:23

Eeehhmm, en cuanto muestres la imagen puedes eliminar del Array el string de la imagen que mostraste.

El problema estará es que en cuanto te quedes con el Array vacio no va a haber que mostrar.

Puedes también más ineficientemente ir almacenando en otro array los indices ya mostrados y cuando ya los hayas almacenado todos los borras y empiezas sde cero

acá hay un tema donde te enseñan a borrar elementos de array

http://www.forosdelweb.com/f13/borrar-elemento-array-514581/

hernandavidgomez · #3 (**permalink**) 07/10/2010, 16:13

gracias por el aporte, ya lo pude solucionar por si a alguien le interesa
saludos, y no se repite!

Código HTML:

Ver original<html>
  <head>
    <title>
      Prueba de rotaci&oacute;n aleatoria de im&aacute;genes
    </title>
 
    <script type="text/javascript">
      <!--
 
// Conjunto de nombres de las imagenes a rotar
imagenes = new Array (
    'imagenes/Albania.png',
    'imagenes/Andorra.png',
    'imagenes/Algeria.png',
    'imagenes/Argentina.png',
    'imagenes/Aruba.png',
    'imagenes/Brazil.png',
    'imagenes/Cameroon.png',
    'imagenes/China.png',
    'imagenes/Chile.png',
    'imagenes/Congo.png',
    'imagenes/Canada.png',
    'imagenes/Afghanistan.png',
    'imagenes/Angola.png',
    'imagenes/Bosnian.png',
    'imagenes/Cambodia.png',
    'imagenes/Colombia.png');
 
 
// Tiempo de espera entre imagenes (en segundos)
espera = 3;
 
// Referencia a la imagen actual
imagen_actual = 0;
 
 
 
function cambiar_imagen ()
{   var i=0;
    var uti= new Array;
    for(i=0;i<imagenes.length;i++)
    {
        ima = Math.floor (Math.random () * imagenes.length);
        uti[i]=ima;
        //alert(uti[0]);
        var j = 0;
            for( j=0; j<i; j++)
            {
            //alert(uti[j]);
            if(i != j)
            
                {
                //alert(uti[i]);
                //alert(uti[0]);
                    if(uti[i] == uti[j])
                        {
                            while(uti[i] == uti[j])
                                {
                                    ima = Math.floor (Math.random () * imagenes.length);
                                    uti[i]=ima;
                                    //alert('hola');
                                    for(k=0; k<i; k++)
                                        {
                                            if(uti[i] == uti[k])
                                                {
                                                    while(uti[i] == uti[k])
                                                    {
                                                    ima = Math.floor (Math.random () * imagenes.length);
                                                    uti[i]=ima;
                                                    }
                                                }
                                        }
                                }
                        }
                
                }
            
            }
                
            
        
        document.getElementById('div'+i).innerHTML="<img src='"+imagenes[ima]+"' style='heigth:128px; width:128px; cursor:pointer;' />";
    }
 
    if (imagen_actual >= imagenes.length)
        imagen_actual = 0;
 
    // Llamar esta misma funcion cada cierto tiempo
    self.setTimeout ('cambiar_imagen()', espera * 1000);
}
 
    </script>
  </head>
  <body onLoad="cambiar_imagen()">
  <div id="div0" style="float:left"></div>
  <div id="div1" style="float:left"></div>
  <div id="div2" style="float:left"></div>
  <div id="div3" style="float:left"></div><br /><br /><br /><br /><br /><br /><br />
  <div id="div4" style="float:left"></div>
  <div id="div5" style="float:left"></div>
  <div id="div6" style="float:left"></div>
  <div id="div7" style="float:left"></div><br /><br /><br /><br /><br /><br /><br />
  <div id="div8" style="float:left"></div>
  <div id="div9" style="float:left"></div>
  <div id="div10" style="float:left"></div>
  <div id="div11" style="float:left"></div><br /><br /><br /><br /><br /><br /><br />
  <div id="div12" style="float:left"></div>
  <div id="div13" style="float:left"></div>
  <div id="div14" style="float:left"></div>
  <div id="div15" style="float:left"></div><br /><br /><br /><br /><br /><br /><br />
    
  </body>
</html>