WEBVTT
00:00:01.686 --> 00:00:04.237
Uma Gema, uma gema muito bonita!
00:00:04.237 --> 00:00:08.275
Mas sabe o que seria melhor que uma única
gema, uma fila de gemas!
00:00:08.275 --> 00:00:12.562
E claro, agora já sabemos que a melhor
maneira para fazer isso é usando o for.
00:00:12.562 --> 00:00:16.162
Então, vamos usar um laço para
desenhar 12 gemas em fila.
00:00:16.162 --> 00:00:19.523
Atravessando a tela da
esquerda para a direita.
00:00:19.523 --> 00:00:22.304
Desse jeito.
Então isso é um
00:00:22.304 --> 00:00:31.186
for (var i = 0; i < 12; i++)
00:00:31.186 --> 00:00:36.429
E vamos pegar essa linha
e colocar aqui dentro.
00:00:36.429 --> 00:00:40.305
Agora temos 12 gemas, mas estão
colocadas uma sobre a outra.
00:00:40.305 --> 00:00:43.401
Lembre-se, queremos que
elas atravessem a tela.
00:00:43.401 --> 00:00:45.941
Para isso precisamos ir modificando o x,
00:00:45.941 --> 00:00:49.524
que agora é 36, mas deve ser
diferente a cada vez.
00:00:49.524 --> 00:00:51.859
Isso significa que ele deve depender de i.
00:00:51.859 --> 00:00:56.329
Logo, podemos simplesmente
dizer, i vezes 36.
00:00:56.329 --> 00:01:02.687
Assim o primeiro é 0, e então 36,
e então 72, e etc.
00:01:02.687 --> 00:01:04.575
Agora temos uma fila de gemas.
00:01:04.575 --> 00:01:07.997
Isso me lembra aquelas cenas dos
filmes de Indiana Jones ou Aladin
00:01:07.997 --> 00:01:11.306
onde o heroi descobre que o tesouro
escondido está repleto de gemas
00:01:11.306 --> 00:01:13.732
mas geralmente eles encontram
mais gemas que isso.
00:01:13.732 --> 00:01:17.306
Não só uma fila, mas uma pilha de gemas!
00:01:17.306 --> 00:01:21.609
como podemos fazer com que as gemas
00:01:21.609 --> 00:01:23.956
também desçam pela tela?
00:01:24.806 --> 00:01:30.639
Bem, podemos começar repetindo o
laço, apenas copiando e colando
00:01:30.639 --> 00:01:34.565
e alterar o seu y em cada cópia.
00:01:34.565 --> 00:01:37.688
Assim o alteraremos para 60, depois 90.
00:01:37.688 --> 00:01:41.428
Agora temos 3 filas de gemas, muito bom.
00:01:42.218 --> 00:01:45.495
Mas isso está ficando chato,
pois tudo que fazemos é
00:01:45.495 --> 00:01:49.193
copiar e colar, mais uma
pequena alteração.
00:01:49.193 --> 00:01:52.859
Antes, quando percebíamos que estávamos
escrevendo código repetitivo assim
00:01:52.859 --> 00:01:57.025
tínhamos aquela sensação, "Ah,
talvez se usássemos um for aqui"
00:01:57.025 --> 00:01:58.607
Mas já estamos usando um laço for
00:01:58.607 --> 00:02:03.854
então qual a solução para evitar isso,
esse copiar e colar repetitivo?
00:02:03.854 --> 00:02:09.518
É isso que chamamos de "laços for
aninhados" - Um laço dentro do outro.
00:02:09.518 --> 00:02:12.132
Então teremos que fazer um laço por fora,
00:02:12.132 --> 00:02:14.851
isso é o que fará com que
elas desçam pela tela,
00:02:14.851 --> 00:02:19.234
enquanto nosso for interno cuidará para
elas façam o que já estão fazendo,
00:02:19.234 --> 00:02:21.977
que é se enfilerar da esquerda
para a direita.
00:02:21.977 --> 00:02:24.006
Deixe-me mostrar o que eu quis dizer.
00:02:24.006 --> 00:02:29.851
for - usaremos uma variável diferente
dessa vez, chamada j, pois já usamos i
00:02:29.851 --> 00:02:37.274
for (var j = 0; j < 13; j++)
00:02:37.524 --> 00:02:41.999
Esse será nosso for externo, que faz
com que as gemas desçam.
00:02:41.999 --> 00:02:48.237
então, pegaremos nosso antigo for e
colocaremos aqui dentro
00:02:48.237 --> 00:02:52.374
corrigindo a indentação, vamos
apagar esses outros.
00:02:53.274 --> 00:02:59.109
O que conseguimos agora é todas
as filas sobrepostas.
00:02:59.109 --> 00:03:01.969
Então precisamos alterar o y, certo?
00:03:01.969 --> 00:03:04.309
É o que estávamos alterando
antes ao copiar e colar,
00:03:04.309 --> 00:03:06.108
e agora Y é sempre 90.
00:03:06.108 --> 00:03:09.440
Queremos que ele seja
diferente para cada fila.
00:03:09.440 --> 00:03:16.188
Da mesma forma que x depende de i,
queremos que y dependa de j.
00:03:16.188 --> 00:03:24.663
Podemos tentar algo como,
talvez, j vezes 30.
00:03:26.433 --> 00:03:28.864
Quantas gemas! Deu certo!
00:03:29.544 --> 00:03:31.976
Vamos examinar de novo
como o código faz isso.
00:03:31.986 --> 00:03:38.340
O laço externo cria a variável j
e a incrementa até 13.
00:03:38.340 --> 00:03:44.340
Em cada execução, ele roda o laço interno.
00:03:44.340 --> 00:03:48.673
O laço interno cria a variável i,
que vai até 12.
00:03:48.673 --> 00:03:55.358
Para cada execução do laço interno, surge
uma imagem em (x,y), que depende de i e j.
00:03:55.358 --> 00:03:59.607
Por isso o i muda mais vezes que o j.
00:03:59.607 --> 00:04:05.238
Para entender isso ainda melhor, vamos
visualizar os valores de i e j.
00:04:05.238 --> 00:04:09.277
Então vou comentar a imagem,
00:04:09.277 --> 00:04:12.027
definir uma cor,
00:04:12.027 --> 00:04:16.796
e usar o comando text para mostrar
os valores de j
00:04:16.796 --> 00:04:22.025
e então vou destacar isso aqui.
00:04:22.025 --> 00:04:26.009
Agora podemos ver j indo de 0 a 12.
00:04:26.009 --> 00:04:32.019
Basicamente, é onde nossas filas de
gemas estão posicionadas.
00:04:32.019 --> 00:04:35.684
E agora fazermos o mesmo com
i para ver como ele muda
00:04:35.684 --> 00:04:43.066
Para i vamos escolher uma cor diferente.
00:04:43.066 --> 00:04:46.475
Vamos colocar o i aqui.
00:04:46.475 --> 00:04:50.271
E alterar seu x para que
ele atravesse a tela.
00:04:50.271 --> 00:04:54.688
Faremos o mesmo com y.
00:04:54.688 --> 00:04:59.561
Agora vemos que i vai de 0 a 11.
00:04:59.561 --> 00:05:04.686
Como eu estava dizendo, o i muda
mais frequentemente
00:05:04.686 --> 00:05:08.778
E essa linha de código é executada
mais vezes que essa
00:05:08.778 --> 00:05:13.855
Porque essa linha de código é executada
para cada execução do laço interno
00:05:13.855 --> 00:05:19.527
Enquanto essa outra é executada apenas
quando o laço externo executa.
00:05:19.527 --> 00:05:22.140
Essa visualização do i e do j,
00:05:22.140 --> 00:05:26.973
ajuda a entender melhor o funcionamento
do for aninhado.
00:05:26.973 --> 00:05:30.475
Voltemos às gemas, porque
é mais divertido!
00:05:30.475 --> 00:05:34.066
Voce pode fazer muitas coisas com
laços for aninhados
00:05:34.066 --> 00:05:36.592
Basta pensar em quantas
coisas no mundo que
00:05:36.602 --> 00:05:40.519
se parecem com uma matriz bidimensional,
como um tabuleiro de xadrez, um edredon,
00:05:40.529 --> 00:05:44.564
as estrelas na bandeira dos EUA,
mozaicos e papéis de parede
00:05:44.564 --> 00:05:47.462
Brinque um pouco com o código,
para aquecer a sua imaginação,
00:05:47.462 --> 00:05:49.806
por exemplo, alterando a imagem.
00:05:49.806 --> 00:05:53.796
Começarei mudando de gemas para corações!
00:05:53.796 --> 00:05:57.366
Para te mostrar o quanto eu gosto de
laços for aninhados!
00:05:57.496 --> 00:06:01.496
Traduzido por [João Pereira Júnior]
Revisado por [Fernando dos Reis]