Presento ejercicio desarrollado en el aula
Aproveche lo aprendido en la seccion anterior con los numeros aleatorios y dentro de un arreglo almacene los colores para asignar un numero a cada color y presentarlos de manera aleatoria.
<canvas width="600" height="400"></canvas>
<script>
function dibujarCuadrado(ejeX,ejeY,color){
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = color;
pincel.strokeStyle = "black";
pincel.fillRect(ejeX,ejeY,50,50);
pincel.strokeRect(ejeX,ejeY,50,50);
}
//Funcion para seleccionar un color de manera aleatoria
function Aleatorio(){
var color = ["yellow","red","blue","green","white","black","orange","grey","purple","lightgreen"];
var numeroAleatorio = Math.round(Math.random()*9);
console.log(numeroAleatorio);
console.log(color[numeroAleatorio]);
return color[numeroAleatorio];
}
var ejeX = 0;
//Uso de funcion while
while(ejeX<600){
dibujarCuadrado(ejeX,0,Aleatorio());
dibujarCuadrado(ejeX,50,Aleatorio());
dibujarCuadrado(ejeX,100,Aleatorio());
ejeX+=50;
}
//Uso de funcion for
for(ejeX = 0; ejeX<600; ejeX+=50){
dibujarCuadrado(ejeX,150,Aleatorio());
dibujarCuadrado(ejeX,200,Aleatorio());
dibujarCuadrado(ejeX,250,Aleatorio());
}
</script>
Resultado