Uma Gema, uma gema muito bonita!
Mas sabe o que seria melhor que uma única gema, uma fila de gemas!
E claro, agora já sabemos que a melhor maneira para fazer isso é usando o for.
Então, vamos usar um laço para desenhar 12 gemas em fila.
Atravessando a tela da esquerda para a direita.
Desse jeito. Então isso é um
for (var i = 0; i < 12; i++)
E vamos pegar essa linha e colocar aqui dentro.
Agora temos 12 gemas, mas estão colocadas uma sobre a outra.
Lembre-se, queremos que elas atravessem a tela.
Para isso precisamos ir modificando o x,
que agora é 36, mas deve ser diferente a cada vez.
Isso significa que ele deve depender de i.
Logo, podemos simplesmente dizer, i vezes 36.
Assim o primeiro é 0, e então 36, e então 72, e etc.
Agora temos uma fila de gemas.
Isso me lembra aquelas cenas dos filmes de Indiana Jones ou Aladin
onde o heroi descobre que o tesouro escondido está repleto de gemas
mas geralmente eles encontram mais gemas que isso.
Não só uma fila, mas uma pilha de gemas!
como podemos fazer com que as gemas
também desçam pela tela?
Bem, podemos começar repetindo o laço, apenas copiando e colando
e alterar o seu y em cada cópia.
Assim o alteraremos para 60, depois 90.
Agora temos 3 filas de gemas, muito bom.
Mas isso está ficando chato, pois tudo que fazemos é
copiar e colar, mais uma pequena alteração.
Antes, quando percebíamos que estávamos escrevendo código repetitivo assim
tínhamos aquela sensação, "Ah, talvez se usássemos um for aqui"
Mas já estamos usando um laço for
então qual a solução para evitar isso, esse copiar e colar repetitivo?
É isso que chamamos de "laços for aninhados" - Um laço dentro do outro.
Então teremos que fazer um laço por fora,
isso é o que fará com que elas desçam pela tela,
enquanto nosso for interno cuidará para elas façam o que já estão fazendo,
que é se enfilerar da esquerda para a direita.
Deixe-me mostrar o que eu quis dizer.
for - usaremos uma variável diferente dessa vez, chamada j, pois já usamos i
for (var j = 0; j < 13; j++)
Esse será nosso for externo, que faz com que as gemas desçam.
então, pegaremos nosso antigo for e colocaremos aqui dentro
corrigindo a indentação, vamos apagar esses outros.
O que conseguimos agora é todas as filas sobrepostas.
Então precisamos alterar o y, certo?
É o que estávamos alterando antes ao copiar e colar,
e agora Y é sempre 90.
Queremos que ele seja diferente para cada fila.
Da mesma forma que x depende de i, queremos que y dependa de j.
Podemos tentar algo como, talvez, j vezes 30.
Quantas gemas! Deu certo!
Vamos examinar de novo como o código faz isso.
O laço externo cria a variável j e a incrementa até 13.
Em cada execução, ele roda o laço interno.
O laço interno cria a variável i, que vai até 12.
Para cada execução do laço interno, surge uma imagem em (x,y), que depende de i e j.
Por isso o i muda mais vezes que o j.
Para entender isso ainda melhor, vamos visualizar os valores de i e j.
Então vou comentar a imagem,
definir uma cor,
e usar o comando text para mostrar os valores de j
e então vou destacar isso aqui.
Agora podemos ver j indo de 0 a 12.
Basicamente, é onde nossas filas de gemas estão posicionadas.
E agora fazermos o mesmo com i para ver como ele muda
Para i vamos escolher uma cor diferente.
Vamos colocar o i aqui.
E alterar seu x para que ele atravesse a tela.
Faremos o mesmo com y.
Agora vemos que i vai de 0 a 11.
Como eu estava dizendo, o i muda mais frequentemente
E essa linha de código é executada mais vezes que essa
Porque essa linha de código é executada para cada execução do laço interno
Enquanto essa outra é executada apenas quando o laço externo executa.
Essa visualização do i e do j,
ajuda a entender melhor o funcionamento do for aninhado.
Voltemos às gemas, porque é mais divertido!
Voce pode fazer muitas coisas com laços for aninhados
Basta pensar em quantas coisas no mundo que
se parecem com uma matriz bidimensional, como um tabuleiro de xadrez, um edredon,
as estrelas na bandeira dos EUA, mozaicos e papéis de parede
Brinque um pouco com o código, para aquecer a sua imaginação,
por exemplo, alterando a imagem.
Começarei mudando de gemas para corações!
Para te mostrar o quanto eu gosto de laços for aninhados!
Traduzido por [João Pereira Júnior] Revisado por [Fernando dos Reis]