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]