Olá, Marcos! Espero que esteja tudo bem!!!
Desculpe a demora em dar um retorno
Ficou muito bacana sua lógica!!!
É isso aí!!!
Agora, nós podemos trabalhar com Array. Isso vai te ajudar muito!!!
Bóra lá!!!
Primeiro, vamos colocar as cores dentro de uma array
var cores = ["blue", "red", "yellow", "brown", "orange", "gray", "pink", "lime"]
Feito isso, vamos criar um for dentro do for já criado para que possa percorrer as cores que guardamos dentro da array. Logo abaixo, quando formos desenhar o quadrado, em vez de colocarmos a cor, chamamos as cores, mas conforme a o iterador i que está percorrendo a array
for(var x = 0; x < 600; x += 50) {
for(var i = 0; i < cores.length; i++) {
var y = 0;
desenhaQuadrado(x, y, cores[i]);
y = y + 50;
}
}
Porém, há um problema, somente a cor "lime" será impressa.
Isso ocorre porque a variável y sempre vai zerar no looping. Ela soma 50, mas quando retorna, a recebe zero novamente
Para resolvermos é simples, colocaremos a variável fora do segundo for, logo após o primeiro for para que a cada soma, guarde os valores na variável Y
for(var x = 0; x < 600; x += 50) {
var y = 0;
for(var i = 0; i < cores.length; i++) {
desenhaQuadrado(x, y, cores[i]);
y = y + 50;
}
}
O código completo ficará dessa forma
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var cores = ["blue", "red", "yellow", "brown", "orange", "gray", "pink", "lime"]
function desenhaQuadrado(x, y, cor) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, 50, 50);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, 50, 50);
}
for(var x = 0; x < 600; x += 50) {
var y = 0;
for(var i = 0; i < cores.length; i++) {
desenhaQuadrado(x, y, cores[i]);
y = y + 50;
}
}
</script>
Peço que dê uma olhada na documentação sobre Array para que possa se aprofundar no assunto.
Espero ter ajudado, Marcos!
Um abraço e bons estudos!!!
