-
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]
