D'ACCORD.
Donc, comme je l'ai mentionné, nous allons faire un exercice rapide et il va être très décevant en ce qui concerne le produit fini va mais c'est une bonne juste pour obtenir une certaine pratique avec paperchase.
Donc, vraiment très simple 4 lignes ish de code que vous avez besoin.
Tout ce que je veux est une grille de cercles et les mesures exactes peu importe ce que j'ai ici est un cercle commençant à zéro zéro et tous les 100 pixels.
Je dessine un autre cercle.
Je pense que le rayon est 10 tout le chemin jusqu'à 1000.
Donc c'est 1000 1000 ici.
Donc, ce n'est pas vraiment important d'obtenir 100 cercles ish à l'écran, évidemment, sans le faire manuellement un à la fois qui est le point.
Alors, comment pouvez-vous faire cela.
C'est à toi de voir.
Vous aurez besoin de trouver comment générer les coordonnées x et y coordonnées qui sont en augmentation.
Et n'hésitez pas à les faire tous pourpre ou n'importe quelle couleur.
Ce n'est pas vraiment le point ou de leur faire une autre forme.
Alors essayez de faire un carré ou un rectangle ou essayer quelque chose de plus amusant où vous avez les couleurs sur un dégradé de sorte que, comme X devient plus la couleur devient plus rouge.
Je me souviens bien, je suppose que je ne me souviens pas vraiment que je ne vous ai pas dit, mais ce papier JSE vous pouvez faire RGV couleurs hexadécimales.
Vous pouvez donc générer une couleur dans laquelle vous incrémenterez la composante rouge ou la composante verte.
Mais au minimum, je cherche juste une grille de cercles au moins 100.
Et si vous voulez.
Vous pouvez également les randomiser afin qu'ils soient partout.
Je veux juste que vous obteniez beaucoup de cercles sur la page.
D'ACCORD.
Alors prenez un moment pause une vidéo.
Essayez ceci vous-même.
Je vous recommande de vous perdre.
Les documents sont un peu.
Essayez certaines choses.
Regardez les exemples et puis revenez et nous allons aller sur la solution.
D'accord.
Génial.
Donc, c'est ce que j'avais avant où je l'ai laissé et je vais me débarrasser de presque tout ce code.
Nous ne voulons plus de cette ligne.
Tout ça.
Nous allons jeter un coup d'oeil.
Nous résolvons ce cercle géant dont nous n'avons pas vraiment besoin.
Nous voulons garder ce code pour que nous sachions comment faire un cercle, mais nous ne voulons pas un géant.
Donc ce que nous voulons faire ici est d'utiliser une boucle.
Donc, nous voulons utiliser une boucle pour faire un cercle ici et puis un cercle ici cercle ici fondamentalement ajouter 10 ou 100 effectivement à la coordonnée x afin que nous puissions commencer par faire cela.
Donc, nous allons faire une boucle et nous allons commencer à zéro boucles pour loin.
Égal à zéro.
C'est moins amusant et ça peut être n'importe quoi.
Je l'ai fait comme 1000.
Et en fait, il me permet d'obtenir X, il est plus clair.
Et chaque fois.
Plutôt que de faire X plus plus que nous pourrions utiliser pour faire un cercle chaque pixel fera des sauts de 100 et puis tout ce qui va faire est de copier ce code et faire un cercle, mais nous allons le modifier un peu si nous l'avons laissé.
Cela nous ferait 10 cercles exactement au même point la même race.
Donc, pas ce que nous voulons faire X coma et y sera fixé à 0.
Donc, cela devrait nous faire une ligne de cercles avec coordonnée y de zéro et le rayon fera 10.
Et si nous prenons un coup d'oeil à ce rafraîchissement, vous pouvez voir ici, nous obtenons 10 cercles passant par tous les 100 pixels, nous obtenons un nouveau.
Donc, ce que nous voulons faire, c'est essentiellement répéter cela à nouveau.
Donc, nous avons notre première fois.
Nous avons besoin d'une de ces lignes 10 fois en baisse.
Et la meilleure façon de le faire est d'utiliser une autre boucle.
Donc, nous voulons prendre ce que nous avons ici et tout simplement répéter tout cela afin que nous puissions faire une autre boucle.
Et cette fois nous allons le faire pour la coordonnée y.
Donc, pourquoi devrait monter et dire 1000 y plus égale à 100 ainsi.
Et je vais vous expliquer exactement comment cela fonctionne.
Je pense que les boucles imbriquées peuvent être un peu déroutantes si nous changeons simplement 0 pour être y Maintenant c'est en fait tout ce que nous devons faire.
Alors, nous allons rafraîchir vous voir si nous obtenons cette grille.
Donc pas la chose la plus excitante mais nous avons très rapidement ajouté un groupe de cercles.
Jetons donc un coup d'oeil à cette boucle imbriquée.
J'ai donc dessiné un petit diagramme la première fois par X commence à zéro.
Donc, je vais le faire comme ça, où nous avons x et y.
D'ACCORD.
Permettez-moi de le capitaliser afin que X commence à zéro.
Et alors alors que X est 0 nous faisons ce mot de boucle Y commence à zéro.
Juste comme ça.
Et puis la prochaine fois à travers cette boucle Y X est toujours zéro.
Mais cette fois pourquoi est 100.
Parce que nous ajoutons cent, alors x est toujours zéro et Y est 200.
Alors X est égal à zéro.
Pourquoi 300 et ainsi de suite.
Je vais faire un dot dot dot et dire X est zéro.
Pourquoi est 1000 sont en fait parce que nous avons moins alors il ne recevra à 900 et puis X changements plus de 100 et puis Y changements plus de revenir à zéro.
Donc, pour chaque x, nous générons 10 y's.
Donc, cela finit par nous avoir 100 ou 100 itérations.
Donc, c'est un peu déroutant, mais il aide si vous passez par ce X commence à zéro y commence à zéro, mais alors X reste à 0 et y passe à 100 à 200.
Et nous dessinons un cercle à chacun de ces intel.
Pourquoi alors réinitialise puis X va et incrémente.
D'ACCORD.
Donc, à mon avis, la confusion.
La dernière chose que nous pouvons faire est un petit changement.
Nous n'avons pas besoin d'enregistrer cette variable à chaque fois.
Nous pouvons simplement changer cela comme ceci et il est légèrement plus efficace où nous ne sommes pas réaffecter une variable en permanence parce que nous ne faisons jamais rien avec ces cercles à nouveau.
Nous les faisons une fois.
Donc, plutôt que de réécrire et de réinitialiser une variable à chaque fois à travers la boucle, nous venons de faire un nouveau cercle lui donner une couleur de remplissage de violet ou de faire jaune sauvegarder rafraîchir.
Voilà.
D'ACCORD.
Donc, c'était un peu un peu de diversion ici mais encore assez important.
Encore une fois la motivation derrière vous faire cela.
J'espère que vous l'avez fait.
Mais la motivation était pour vous d'obtenir juste la pratique combinant les boucles de compétences javascript avec le papier oui et voir que tout ce que vous avez à faire est de vous appeler savoir une courte ligne de code et il exécuterait un tas de code dans les coulisses pour faire réellement ce cercle OK dans la prochaine vidéo va réellement se mettre en branle avec le spectacle et commencer à vraiment travailler sur notre clone d'attaque pad.