ESTÁ BEM.
Então, como eu mencionei, vamos fazer um exercício rápido e vai ser muito decepcionante no
que diz respeito ao produto acabado, mas é bom apenas para obter alguma prática com papelaria.
Então, na verdade, são realmente simples 4 linhas de código que você precisa.
Tudo o que eu quero é uma grade de círculos e as medidas exatas não importam o que eu tenho aqui é
um círculo que começa em zero zero e a cada 100 pixels.
Estou desenhando outro círculo.
Eu acho que o raio é 10 até o final de 1000.
Então, isso é 1000 1000 aqui.
Então, na verdade, não importa apenas obter 100 círculos ish na tela, obviamente, sem fazê-lo manualmente um de cada
vez, esse é o ponto.
Então, como você pode fazer isso?
Isso é contigo.
Você precisará descobrir como gerar as coordenadas coordenadas x e y que estão aumentando.
E sinta-se livre para torná-los todos roxos ou qualquer cor.
Não é realmente o ponto ou torná-los outra forma.
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,
à medida que X é maior, a cor fica mais vermelha.
Lembro-me bem, acho que não me lembro muito de que não te disse isso, mas que papel JSE você
pode fazer cores RGV hexadecimais.
Então, você pode gerar uma cor onde você está incrementando o componente vermelho ou aquele componente verde.
Mas, no mínimo, só estou procurando uma grade de círculos pelo menos 100.
E se você quiser.
Você também pode aleatá-los para que eles estejam por todo o lado.
Eu só quero que você obtenha muitos círculos na página.
ESTÁ BEM.
Então, coloque um momento em pausa em um vídeo.
Experimente isso por conta própria.
Eu recomendo que você se perca.
Os documentos são um pouco.
Experimente algumas coisas.
Veja os exemplos e depois volte e nós vamos examinar a solução.
Tudo bem.
Ótimo.
Então, isso é o que eu tinha antes de onde eu deixei e eu vou me livrar de quase todo esse código.
Então, não queremos mais essa linha.
Qualquer um disso.
Vamos dar uma olhada.
Resolvemos esse círculo gigante do qual realmente não precisamos.
Queremos manter esse código para que possamos fazer um círculo, mas não queremos um gigante.
Então, o que queremos fazer aqui é usar um loop.
Então, queremos usar um loop para fazer um círculo aqui e, em seguida, um círculo aqui circular aqui, basicamente,
irá adicionar 10 ou 100 realmente à coordenada x para que possamos começar fazendo isso.
Então, vamos fazer um loop e começaremos em zero loops por muito tempo.
Igual a zero.
É menos divertido e isso pode ser qualquer coisa.
Eu fiz isso como 1000.
E, na verdade, me permite obter X, então é mais claro.
E cada vez.
Ao invés de fazer X plus plus, que poderíamos usar para fazer um círculo, cada pixel fará saltos de
100 e então tudo o que fará é copiar esse código e fazer um círculo, mas vamos alterar um pouco se o
deixássemos.
Isso nos faria 10 círculos exatamente no mesmo ponto da mesma raça.
Então, não o que queremos, vamos fazer x vírgula e você será corrigido como 0.
Então, isso deve nos tornar uma linha de círculos com coordenada y zero e o raio fará 10.
essa atualização, você pode ver aqui, recebemos 10 círculos em cada 100 pixels, nós recebemos um novo.
E se dar uma olhada em
Então, o que queremos fazer é basicamente repetir isso de novo.
Então, temos a nossa primeira vez.
Precisamos de uma dessas filas 10 vezes abaixo.
E a melhor maneira de fazer isso é usando outro loop.
Então, queremos tomar o que temos aqui e simplesmente repetir tudo isso para que possamos fazer outro loop.
E desta vez vamos fazer isso para a coordenada y.
Então, por que deveria subir e dizer 1000 y mais igual a 100 também.
E eu vou acompanhá-lo exatamente como isso funciona.
Eu acho que os loops aninhados podem ser um pouco
confusos se acabarmos de mudar 0 para ser Agora, isso é realmente tudo o que precisamos fazer.
Então, vamos atualizar você ver se conseguimos essa grade.
Então, não é o mais excitante, mas adicionamos muito rapidamente um monte de círculos.
Então, vamos dar uma olhada neste loop aninhado.
Então, dessiei um pequeno diagrama pela primeira vez através de X começa em zero.
Então eu vou fazer isso assim, onde nós temos x e y.
ESTÁ BEM.
Deixe-me capitalizar para que X comece em zero.
E então, enquanto X é 0, fazemos que esta palavra de loop Y começa em zero.
Bem desse jeito.
E então, na próxima vez, este loop y X ainda é zero.
Mas desta vez, por que é 100.
Porque adicionamos cem e depois x ainda é zero e Y é 200.
Então X é zero.
Por que é 300 e assim por diante.
Eu vou fazer um ponto dot dot e dizer que X é zero.
Por que 1000 são, na verdade, porque temos menos, só conseguirá 900 e, em seguida, X mudará para
ser 100 e, em seguida, Y muda para voltar a zero.
Então, basicamente, para cada x, estamos gerando 10 anos.
Então, isso acaba com nós com 100 ou 100 iterações.
Então, é um pouco confuso, mas ajuda se você passar por este X começa em zero y começa em zero, mas
X permanece em 0 e você vai até 100 do que 200.
E estamos desenhando um círculo em cada uma dessas informações.
Por que então reinicia e, em seguida, X vai e aumenta.
ESTÁ BEM.
Tão gentil, na minha opinião, confuso.
A última coisa que podemos fazer é uma pequena mudança.
Na verdade, não precisamos salvar isso em uma variável de cada vez.
Podemos simplesmente mudar isso assim e é um pouco mais eficiente onde não estamos reatribuindo uma variável
constantemente porque nunca mais fazemos nada com esses círculos.
Estamos apenas fazendo isso uma vez.
Então, ao invés de reescrever e reiniciar uma variável toda vez que o loop acabamos
de criar um novo círculo, dê uma cor de preenchimento de roxo ou vamos fazer o amarelo salvar a atualização.
Aqui vamos nós.
ESTÁ BEM.
Então, isso foi um pouco de diversão aqui, mas ainda é muito importante.
Novamente a motivação por trás de você fazendo isso.
Espero que você tenha feito isso.
Mas a motivação foi para você apenas obter prática combinando loops de habilidades de javascript com o papel sim e ver que
tudo o que você precisa fazer é chamá-lo de conhecer uma linha curta de código e executaria um monte de código nos
bastidores para realmente fazer esse círculo OK no próximo vídeo vai realmente continuar com o show e
começar a trabalhar realmente no nosso clone de ataque de almofadas.