1
00:00:00,290 --> 00:00:00,650
ESTÁ BEM.

2
00:00:00,690 --> 00:00:05,850
Então, como eu mencionei, vamos fazer um exercício rápido e vai ser muito decepcionante no

3
00:00:05,850 --> 00:00:11,030
que diz respeito ao produto acabado, mas é bom apenas para obter alguma prática com papelaria.

4
00:00:11,100 --> 00:00:14,920
Então, na verdade, são realmente simples 4 linhas de código que você precisa.

5
00:00:15,150 --> 00:00:23,520
Tudo o que eu quero é uma grade de círculos e as medidas exatas não importam o que eu tenho aqui é

6
00:00:23,640 --> 00:00:28,410
um círculo que começa em zero zero e a cada 100 pixels.

7
00:00:28,620 --> 00:00:29,750
Estou desenhando outro círculo.

8
00:00:29,750 --> 00:00:33,720
Eu acho que o raio é 10 até o final de 1000.

9
00:00:33,720 --> 00:00:36,540
Então, isso é 1000 1000 aqui.

10
00:00:37,260 --> 00:00:43,680
Então, na verdade, não importa apenas obter 100 círculos ish na tela, obviamente, sem fazê-lo manualmente um de cada

11
00:00:43,680 --> 00:00:45,380
vez, esse é o ponto.

12
00:00:45,390 --> 00:00:46,830
Então, como você pode fazer isso?

13
00:00:46,890 --> 00:00:48,240
Isso é contigo.

14
00:00:48,270 --> 00:00:53,220
Você precisará descobrir como gerar as coordenadas coordenadas x e y que estão aumentando.

15
00:00:53,760 --> 00:00:57,440
E sinta-se livre para torná-los todos roxos ou qualquer cor.

16
00:00:57,460 --> 00:01:00,250
Não é realmente o ponto ou torná-los outra forma.

17
00:01:00,270 --> 00:01:07,140
Então, tente fazer um quadrado ou um retângulo ou tente algo mais divertido onde você tenha as cores em um gradiente para que,

18
00:01:07,410 --> 00:01:10,810
à medida que X é maior, a cor fica mais vermelha.

19
00:01:10,970 --> 00:01:16,410
Lembro-me bem, acho que não me lembro muito de que não te disse isso, mas que papel JSE você

20
00:01:16,410 --> 00:01:17,840
pode fazer cores RGV hexadecimais.

21
00:01:17,970 --> 00:01:23,610
Então, você pode gerar uma cor onde você está incrementando o componente vermelho ou aquele componente verde.

22
00:01:23,820 --> 00:01:28,670
Mas, no mínimo, só estou procurando uma grade de círculos pelo menos 100.

23
00:01:28,700 --> 00:01:29,260
E se você quiser.

24
00:01:29,270 --> 00:01:32,770
Você também pode aleatá-los para que eles estejam por todo o lado.

25
00:01:32,850 --> 00:01:34,940
Eu só quero que você obtenha muitos círculos na página.

26
00:01:35,010 --> 00:01:35,530
ESTÁ BEM.

27
00:01:35,610 --> 00:01:37,540
Então, coloque um momento em pausa em um vídeo.

28
00:01:37,680 --> 00:01:39,020
Experimente isso por conta própria.

29
00:01:39,030 --> 00:01:40,380
Eu recomendo que você se perca.

30
00:01:40,380 --> 00:01:41,400
Os documentos são um pouco.

31
00:01:41,430 --> 00:01:42,370
Experimente algumas coisas.

32
00:01:42,390 --> 00:01:51,110
Veja os exemplos e depois volte e nós vamos examinar a solução.

33
00:01:51,120 --> 00:01:51,480
Tudo bem.

34
00:01:51,480 --> 00:01:52,570
Ótimo.

35
00:01:52,590 --> 00:01:58,780
Então, isso é o que eu tinha antes de onde eu deixei e eu vou me livrar de quase todo esse código.

36
00:01:58,950 --> 00:02:00,940
Então, não queremos mais essa linha.

37
00:02:01,230 --> 00:02:02,940
Qualquer um disso.

38
00:02:02,940 --> 00:02:03,930
Vamos dar uma olhada.

39
00:02:03,930 --> 00:02:07,330
Resolvemos esse círculo gigante do qual realmente não precisamos.

40
00:02:07,470 --> 00:02:12,780
Queremos manter esse código para que possamos fazer um círculo, mas não queremos um gigante.

41
00:02:12,960 --> 00:02:15,500
Então, o que queremos fazer aqui é usar um loop.

42
00:02:15,930 --> 00:02:23,070
Então, queremos usar um loop para fazer um círculo aqui e, em seguida, um círculo aqui circular aqui, basicamente,

43
00:02:23,070 --> 00:02:28,610
irá adicionar 10 ou 100 realmente à coordenada x para que possamos começar fazendo isso.

44
00:02:28,800 --> 00:02:34,080
Então, vamos fazer um loop e começaremos em zero loops por muito tempo.

45
00:02:34,110 --> 00:02:35,360
Igual a zero.

46
00:02:35,650 --> 00:02:38,110
É menos divertido e isso pode ser qualquer coisa.

47
00:02:38,130 --> 00:02:40,080
Eu fiz isso como 1000.

48
00:02:40,140 --> 00:02:43,980
E, na verdade, me permite obter X, então é mais claro.

49
00:02:45,300 --> 00:02:46,780
E cada vez.

50
00:02:46,800 --> 00:02:54,540
Ao invés de fazer X plus plus, que poderíamos usar para fazer um círculo, cada pixel fará saltos de

51
00:02:54,870 --> 00:03:04,020
100 e então tudo o que fará é copiar esse código e fazer um círculo, mas vamos alterar um pouco se o

52
00:03:05,220 --> 00:03:05,890
deixássemos.

53
00:03:05,930 --> 00:03:09,960
Isso nos faria 10 círculos exatamente no mesmo ponto da mesma raça.

54
00:03:09,960 --> 00:03:19,050
Então, não o que queremos, vamos fazer x vírgula e você será corrigido como 0.

55
00:03:19,860 --> 00:03:27,260
Então, isso deve nos tornar uma linha de círculos com coordenada y zero e o raio fará 10.

56
00:03:27,330 --> 00:03:35,840
essa atualização, você pode ver aqui, recebemos 10 círculos em cada 100 pixels, nós recebemos um novo.

57
00:03:35,850 --> 00:03:38,640
E se dar uma olhada em

58
00:03:38,670 --> 00:03:42,790
Então, o que queremos fazer é basicamente repetir isso de novo.

59
00:03:42,930 --> 00:03:45,670
Então, temos a nossa primeira vez.

60
00:03:45,900 --> 00:03:49,700
Precisamos de uma dessas filas 10 vezes abaixo.

61
00:03:49,980 --> 00:03:52,790
E a melhor maneira de fazer isso é usando outro loop.

62
00:03:53,070 --> 00:03:58,820
Então, queremos tomar o que temos aqui e simplesmente repetir tudo isso para que possamos fazer outro loop.

63
00:03:59,340 --> 00:04:02,990
E desta vez vamos fazer isso para a coordenada y.

64
00:04:03,060 --> 00:04:09,240
Então, por que deveria subir e dizer 1000 y mais igual a 100 também.

65
00:04:09,540 --> 00:04:12,130
E eu vou acompanhá-lo exatamente como isso funciona.

66
00:04:12,150 --> 00:04:14,520
Eu acho que os loops aninhados podem ser um pouco

67
00:04:17,490 --> 00:04:21,560
confusos se acabarmos de mudar 0 para ser Agora, isso é realmente tudo o que precisamos fazer.

68
00:04:21,990 --> 00:04:24,940
Então, vamos atualizar você ver se conseguimos essa grade.

69
00:04:25,080 --> 00:04:29,880
Então, não é o mais excitante, mas adicionamos muito rapidamente um monte de círculos.

70
00:04:29,910 --> 00:04:32,430
Então, vamos dar uma olhada neste loop aninhado.

71
00:04:32,460 --> 00:04:37,210
Então, dessiei um pequeno diagrama pela primeira vez através de X começa em zero.

72
00:04:37,800 --> 00:04:43,610
Então eu vou fazer isso assim, onde nós temos x e y.

73
00:04:44,220 --> 00:04:44,910
ESTÁ BEM.

74
00:04:44,910 --> 00:04:48,970
Deixe-me capitalizar para que X comece em zero.

75
00:04:50,460 --> 00:04:55,840
E então, enquanto X é 0, fazemos que esta palavra de loop Y começa em zero.

76
00:04:56,280 --> 00:04:58,540
Bem desse jeito.

77
00:04:59,400 --> 00:05:03,460
E então, na próxima vez, este loop y X ainda é zero.

78
00:05:03,660 --> 00:05:06,210
Mas desta vez, por que é 100.

79
00:05:06,210 --> 00:05:13,610
Porque adicionamos cem e depois x ainda é zero e Y é 200.

80
00:05:14,130 --> 00:05:15,350
Então X é zero.

81
00:05:15,390 --> 00:05:18,090
Por que é 300 e assim por diante.

82
00:05:18,280 --> 00:05:21,260
Eu vou fazer um ponto dot dot e dizer que X é zero.

83
00:05:21,660 --> 00:05:31,800
Por que 1000 são, na verdade, porque temos menos, só conseguirá 900 e, em seguida, X mudará para

84
00:05:31,800 --> 00:05:37,590
ser 100 e, em seguida, Y muda para voltar a zero.

85
00:05:38,460 --> 00:05:44,690
Então, basicamente, para cada x, estamos gerando 10 anos.

86
00:05:44,970 --> 00:05:49,500
Então, isso acaba com nós com 100 ou 100 iterações.

87
00:05:49,530 --> 00:05:56,400
Então, é um pouco confuso, mas ajuda se você passar por este X começa em zero y começa em zero, mas

88
00:05:56,400 --> 00:06:00,210
X permanece em 0 e você vai até 100 do que 200.

89
00:06:00,210 --> 00:06:03,370
E estamos desenhando um círculo em cada uma dessas informações.

90
00:06:03,420 --> 00:06:07,590
Por que então reinicia e, em seguida, X vai e aumenta.

91
00:06:07,890 --> 00:06:08,250
ESTÁ BEM.

92
00:06:08,250 --> 00:06:12,060
Tão gentil, na minha opinião, confuso.

93
00:06:12,060 --> 00:06:15,000
A última coisa que podemos fazer é uma pequena mudança.

94
00:06:15,000 --> 00:06:18,430
Na verdade, não precisamos salvar isso em uma variável de cada vez.

95
00:06:19,230 --> 00:06:26,070
Podemos simplesmente mudar isso assim e é um pouco mais eficiente onde não estamos reatribuindo uma variável

96
00:06:26,070 --> 00:06:29,740
constantemente porque nunca mais fazemos nada com esses círculos.

97
00:06:30,120 --> 00:06:31,290
Estamos apenas fazendo isso uma vez.

98
00:06:31,410 --> 00:06:37,650
Então, ao invés de reescrever e reiniciar uma variável toda vez que o loop acabamos

99
00:06:37,650 --> 00:06:45,730
de criar um novo círculo, dê uma cor de preenchimento de roxo ou vamos fazer o amarelo salvar a atualização.

100
00:06:45,900 --> 00:06:46,560
Aqui vamos nós.

101
00:06:46,800 --> 00:06:47,220
ESTÁ BEM.

102
00:06:47,370 --> 00:06:52,560
Então, isso foi um pouco de diversão aqui, mas ainda é muito importante.

103
00:06:52,560 --> 00:06:54,680
Novamente a motivação por trás de você fazendo isso.

104
00:06:54,690 --> 00:06:55,380
Espero que você tenha feito isso.

105
00:06:55,400 --> 00:07:02,010
Mas a motivação foi para você apenas obter prática combinando loops de habilidades de javascript com o papel sim e ver que

106
00:07:02,070 --> 00:07:08,550
tudo o que você precisa fazer é chamá-lo de conhecer uma linha curta de código e executaria um monte de código nos

107
00:07:08,550 --> 00:07:13,620
bastidores para realmente fazer esse círculo OK no próximo vídeo vai realmente continuar com o show e

108
00:07:13,620 --> 00:07:16,810
começar a trabalhar realmente no nosso clone de ataque de almofadas.