0

Lo que intento hacer en este codigo es simple: quiero simplificar tanto el codigo del generador de colores (array) para que quede en una function o un bucle for y poder cambiarle su nombre (a,b,c,etc) y que no se clonen entre si.

var colores = ['Blue','Yellow','Orange','Red','Green','Violet','Pink','Black','White']


// GENERA UN COLOR ALEATORIO DEL ARRAY 
var a = colores[Math.floor(Math.random() * colores.length)]
var b = colores[Math.floor(Math.random() * colores.length)]
var c = colores[Math.floor(Math.random() * colores.length)]
var e = colores[Math.floor(Math.random() * colores.length)]
var f = colores[Math.floor(Math.random() * colores.length)]
var g = colores[Math.floor(Math.random() * colores.length)]
var h = colores[Math.floor(Math.random() * colores.length)]
var i = colores[Math.floor(Math.random() * colores.length)]
var j = colores[Math.floor(Math.random() * colores.length)]

//////////////////////////////////////

document.getElementById('cuadro1').style.backgroundColor = a;
document.getElementById('cuadro2').style.backgroundColor = b;
document.getElementById('cuadro3').style.backgroundColor = c;
document.getElementById('cuadro4').style.backgroundColor = e;
document.getElementById('cuadro5').style.backgroundColor = f;
document.getElementById('cuadro6').style.backgroundColor = g;
document.getElementById('cuadro7').style.backgroundColor = h;
document.getElementById('cuadro8').style.backgroundColor = i;
document.getElementById('cuadro9').style.backgroundColor = j;
      <canvas id="cuadro1" onclick="" width="155" height="155"></canvas> 
      <canvas id="cuadro2" onclick="" width="155" height="155"></canvas>
      <canvas id="cuadro3" onclick="" width="155" height="155"></canvas>
      
      <br/> </br>
      
      <canvas id="cuadro4" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro5" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro6" onclick="" width="155" heigth="155"></canvas>
      
      <br/> </br>
          
      <canvas id="cuadro7" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro8" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro9" onclick="" width="155" heigth="155"></canvas>

Y lo mismo para los nueve getElementById que hay en el final. Que si se genera un color azul, no pueda haber otro color azul de los otros nueve cuadrados. De todas las function que he intentado hacer no me ha funcionado.

4
  • No entendí. ¿qué quieres decir con «Que no se clonen los colores y que se pueda generar aleatoridad.» ¿Qué resultado final esperas?
    – A. Cedano
    Commented el 27 ene. 2020 a las 23:21
  • Modifique recien la descripcion, me he expresado mal Commented el 27 ene. 2020 a las 23:23
  • No entiendo mucho todavía. ¿Lo que quieres es asignar a cada elemento un color aleatorio tomándolo del array sin que se repitan? O sea, ¿nueve elementos cada uno con un color distinto?
    – A. Cedano
    Commented el 27 ene. 2020 a las 23:33
  • Exactamente. Nueve elementos que generen un color distinto sin repetirse. Commented el 28 ene. 2020 a las 1:45

4 respuestas 4

2

Creo que esto puede hacer el trabajo, puesto que se trata de tomar colores que no se repitan.

Este código respeta el array original de colores, por si lo necesitas para otra cosa. Lo que se hace aquí es tomar un color desde dentro del bucle que recorre los canvas, usando la función randomNoRepeats(), publicada originalmente en Stackoverflow en inglés.

var colores = ['Blue','Yellow','Orange','Red','Green','Violet','Pink','Black','White'];

function randomNoRepeats(colores) {
  var copy = colores.slice(0);
  return function() {
    if (copy.length < 1) { copy = colores.slice(0); }
    var index = Math.floor(Math.random() * copy.length);
    var item = copy[index];
    //Prueba, borrarlo luego
    console.log(item);
    copy.splice(index, 1);
    return item;
  };
}
var takeOne = randomNoRepeats(colores);

var canvas = document.querySelectorAll('canvas').forEach(function(el) {
  el.style.background = takeOne();
})

//Only for test
console.log(colores);
<canvas id="cuadro1" onclick="" width="155" height="155"></canvas> 
      <canvas id="cuadro2" onclick="" width="155" height="155"></canvas>
      <canvas id="cuadro3" onclick="" width="155" height="155"></canvas>
      
      <br/> </br>
      
      <canvas id="cuadro4" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro5" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro6" onclick="" width="155" heigth="155"></canvas>
      
      <br/> <br />
          
      <canvas id="cuadro7" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro8" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro9" onclick="" width="155" heigth="155"></canvas>

1

Esta fue la solución más sencilla que se me ocurrió:

  1. Creas una copia de los colores antes de entrar al ciclo
  2. Dentro del ciclo obtienes el índice del color a usar, basado en el array copiado
  3. Asignas el color al cuadro
  4. Eliminas el elemento de la copia para que no se repita

var colores = ['Blue','Yellow','Orange','Red','Green','Violet','Pink','Black','White'];
// Crear copia del array
var copia = colores;
for(var i = 1; i <= 9; i++) {
    // Obtener color
    index = Math.floor(Math.random() * copia.length);
    // Asignar color
    document.getElementById('cuadro' + i).style.backgroundColor = copia[index];
    // Eliminar del array para que no se repita
    copia.splice(index, 1);
}
 <canvas id="cuadro1" onclick="" width="155" height="155"></canvas> 
      <canvas id="cuadro2" onclick="" width="155" height="155"></canvas>
      <canvas id="cuadro3" onclick="" width="155" height="155"></canvas>
      
      <br/> </br>
      
      <canvas id="cuadro4" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro5" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro6" onclick="" width="155" heigth="155"></canvas>
      
      <br/> </br>
          
      <canvas id="cuadro7" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro8" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro9" onclick="" width="155" heigth="155"></canvas>

0

Trate de simplificarlo lo mas que pude, primero guardamos los canvas en un arreglo para despues recorrerlo, agregamos una funcion que genere el color aleatorio y se la pasamos cuando iteramos los canvas

var colores = ['Blue','Yellow','Orange','Red','Green','Violet','Pink','Black','White']
var elements = document.querySelectorAll('canvas')

// GENERA UN COLOR ALEATORIO DEL ARRAY 
function generateRandom() {
  return colores[Math.floor(Math.random() * colores.length)]
}
//////////////////////////////////// //

elements.forEach((el, index) => {
  el.style.background = generateRandom()
})
<canvas id="cuadro1" onclick="" width="155" height="155"></canvas> 
      <canvas id="cuadro2" onclick="" width="155" height="155"></canvas>
      <canvas id="cuadro3" onclick="" width="155" height="155"></canvas>
      
      <br/> </br>
      
      <canvas id="cuadro4" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro5" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro6" onclick="" width="155" heigth="155"></canvas>
      
      <br/> </br>
          
      <canvas id="cuadro7" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro8" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro9" onclick="" width="155" heigth="155"></canvas>

1
  • 1
    Creo que no debe repetirse ninguno. En las pruebas se repiten varios colores varias veces.
    – A. Cedano
    Commented el 27 ene. 2020 a las 23:52
0

Si creo que entendí lo que necesitas con algo como esto lo podrías hacer si te das cuenta no se repite ningún color.

Igual agregue unos de mas para que sean mas colores y puedas verlo.

Saludos

 var colores = ['Blue','Yellow','Orange','Red','Green','Violet','Pink','Black','White','Purple','Gren','brown','indigo','apricot','beige'];

for (i = 1; i <=9; i++) {
var colorAddAndRemove=colores[Math.floor(Math.random() * 2)];
 document.getElementById('cuadro'+i).style.backgroundColor = colorAddAndRemove;
 var index = colores.indexOf( colorAddAndRemove );
 if (index > -1) {
   colores.splice(index, 1);
}
   // console.log(colorAddAndRemove + i)
}

// GENERA UN COLOR ALEATORIO DEL ARRAY 
<canvas id="cuadro1" onclick="" width="155" height="155"></canvas> 
      <canvas id="cuadro2" onclick="" width="155" height="155"></canvas>
      <canvas id="cuadro3" onclick="" width="155" height="155"></canvas>
      
      <br/> </br>
      
      <canvas id="cuadro4" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro5" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro6" onclick="" width="155" heigth="155"></canvas>
      
      <br/> </br>
          
      <canvas id="cuadro7" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro8" onclick="" width="155" heigth="155"></canvas>
      <canvas id="cuadro9" onclick="" width="155" heigth="155"></canvas>

7
  • No funciona bien, haz varias pruebas y verás que se repiten colores.
    – A. Cedano
    Commented el 27 ene. 2020 a las 23:49
  • Haz más pruebas, hice varias y se repetía sobre todo el blanco, por eso me di cuenta. Se deben llenar 9 cuadros y no me cuadraba porque muchas veces hay dos blancos.
    – A. Cedano
    Commented el 27 ene. 2020 a las 23:51
  • 1
    Incluso antes de agregar mas colores, según no cheque no pasaba, pero agregue mas para mostrarle al OP como podria ser con otros colores, lo probe varias veces antes de publicar... pero nunca me paso Commented el 27 ene. 2020 a las 23:58
  • 1
    Déjalo como estaba, con 9 y haz varias pruebas controlando en una tabla en un papel poniendo un puntito sobre cada color y verás que se repiten. Te digo que hice la prueba y se repetía, sobre todo el blanco :)
    – A. Cedano
    Commented el 28 ene. 2020 a las 0:00
  • 1
    OK hice prueba poniendo un console.log(colorAddAndRemove); y no es que se repitan realmente, sino que en algunos casos se produce un undefined y ese fondo lo deja en blanco :) El problema entonces es ese, que en ciertos casos el último valor es undefined.
    – A. Cedano
    Commented el 28 ene. 2020 a las 0:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.