1
00:00:00,290 --> 00:00:00,650
OK.

2
00:00:00,690 --> 00:00:05,850
Quindi, come ho detto, faremo un rapido esercizio e sarà molto travolgente per quanto

3
00:00:05,850 --> 00:00:11,030
riguarda il prodotto finito, ma è buono solo per fare pratica con la paperchase.

4
00:00:11,100 --> 00:00:14,920
Quindi in realtà davvero semplici 4 righe di codice ish di cui hai bisogno.

5
00:00:15,150 --> 00:00:23,520
Tutto ciò che voglio è una griglia di cerchi e le misure esatte non contano quello che ho qui è

6
00:00:23,640 --> 00:00:28,410
un cerchio che inizia a zero zero e ogni 100 pixel.

7
00:00:28,620 --> 00:00:29,750
Sto disegnando un altro cerchio.

8
00:00:29,750 --> 00:00:33,720
Penso che il raggio sia 10 fino a 1000.

9
00:00:33,720 --> 00:00:36,540
Quindi questo è 1000 1000 proprio qui.

10
00:00:37,260 --> 00:00:43,680
Quindi non importa solo avere 100 cerchi ish sullo schermo, ovviamente senza farlo manualmente uno alla volta,

11
00:00:43,680 --> 00:00:45,380
questo è il punto.

12
00:00:45,390 --> 00:00:46,830
Quindi, come puoi farlo.

13
00:00:46,890 --> 00:00:48,240
Dipende da te.

14
00:00:48,270 --> 00:00:53,220
Avrai bisogno di capire come generare quelle coordinate x e y che stanno aumentando.

15
00:00:53,760 --> 00:00:57,440
E sentiti libero di renderli tutti viola o di qualsiasi colore.

16
00:00:57,460 --> 00:01:00,250
Non è davvero il punto o renderli un'altra forma.

17
00:01:00,270 --> 00:01:07,140
Quindi prova a fare un quadrato o un rettangolo o prova qualcosa di più divertente dove hai i colori su una sfumatura in modo che

18
00:01:07,410 --> 00:01:10,810
man mano che X diventa più grande il colore diventa più rosso.

19
00:01:10,970 --> 00:01:16,410
Ricordo bene, immagino di non ricordare davvero di non averti detto questo, ma quel foglio JSE è

20
00:01:16,410 --> 00:01:17,840
possibile eseguire colori RGV esadecimali.

21
00:01:17,970 --> 00:01:23,610
Quindi puoi generare un colore nel punto in cui stai incrementando il componente rosso o quel componente verde.

22
00:01:23,820 --> 00:01:28,670
Ma come minimo cerco solo una griglia di cerchi di almeno 100.

23
00:01:28,700 --> 00:01:29,260
E se vuoi.

24
00:01:29,270 --> 00:01:32,770
Potresti anche randomizzarli in modo che siano dappertutto.

25
00:01:32,850 --> 00:01:34,940
Voglio solo che tu abbia un sacco di cerchi sulla pagina.

26
00:01:35,010 --> 00:01:35,530
OK.

27
00:01:35,610 --> 00:01:37,540
Quindi prenditi un momento per mettere in pausa un video.

28
00:01:37,680 --> 00:01:39,020
Prova questo da solo.

29
00:01:39,030 --> 00:01:40,380
Ti raccomando di perderti.

30
00:01:40,380 --> 00:01:41,400
I documenti sono un po '

31
00:01:41,430 --> 00:01:42,370
Prova alcune cose.

32
00:01:42,390 --> 00:01:51,110
Guarda gli esempi e poi torna e andremo oltre la soluzione.

33
00:01:51,120 --> 00:01:51,480
Tutto ok.

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

35
00:01:52,590 --> 00:01:58,780
Quindi questo è quello che avevo prima da dove avevo interrotto e ho intenzione di sbarazzarmi di quasi tutto questo codice.

36
00:01:58,950 --> 00:02:00,940
Quindi non vogliamo più quella linea.

37
00:02:01,230 --> 00:02:02,940
Qualsiasi cosa.

38
00:02:02,940 --> 00:02:03,930
Diamo un'occhiata.

39
00:02:03,930 --> 00:02:07,330
Risolviamo quel cerchio gigante di cui non abbiamo veramente bisogno.

40
00:02:07,470 --> 00:02:12,780
Vogliamo mantenere quel codice in modo che sappiamo come fare un cerchio ma non vogliamo uno gigante.

41
00:02:12,960 --> 00:02:15,500
Quindi quello che vogliamo fare qui è usare un ciclo.

42
00:02:15,930 --> 00:02:23,070
Quindi vogliamo usare un ciclo per fare un cerchio qui e quindi un cerchio qui cerchio qui

43
00:02:23,070 --> 00:02:28,610
fondamentalmente aggiungerà 10 o 100 effettivamente alla coordinata x, così possiamo iniziare facendo ciò.

44
00:02:28,800 --> 00:02:34,080
Quindi faremo un ciclo e inizieremo a zero loop per molto lontano.

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

46
00:02:35,650 --> 00:02:38,110
È meno divertente e può essere qualsiasi cosa.

47
00:02:38,130 --> 00:02:40,080
L'ho fatto come 1000.

48
00:02:40,140 --> 00:02:43,980
E in realtà mi consente di ottenere X in modo che sia più chiaro.

49
00:02:45,300 --> 00:02:46,780
E ogni volta attraverso.

50
00:02:46,800 --> 00:02:54,540
Invece di fare X plus plus che potremmo usare per fare un cerchio ogni singolo pixel farà salti di

51
00:02:54,870 --> 00:03:04,020
100 e quindi tutto ciò che farà è copiare questo codice e fare un cerchio ma lo altereremo un po 'se lo

52
00:03:05,220 --> 00:03:05,890
avessimo lasciato.

53
00:03:05,930 --> 00:03:09,960
Questo ci renderebbe 10 cerchi nello stesso identico punto della stessa gara.

54
00:03:09,960 --> 00:03:19,050
Quindi non quello che vogliamo facciamolo X virgola e y sarà fissato come 0.

55
00:03:19,860 --> 00:03:27,260
Quindi questo dovrebbe farci una linea di cerchi tutti con coordinate y di zero e raggio 10.

56
00:03:27,330 --> 00:03:35,840
refresh puoi vedere qui che otteniamo 10 cerchi che attraversano ogni 100 pixel ne riceviamo uno nuovo.

57
00:03:35,850 --> 00:03:38,640
E se diamo un'occhiata a quel

58
00:03:38,670 --> 00:03:42,790
Quindi quello che vogliamo fare è sostanzialmente ripeterlo di nuovo.

59
00:03:42,930 --> 00:03:45,670
Quindi abbiamo la nostra prima volta.

60
00:03:45,900 --> 00:03:49,700
Abbiamo bisogno di una di queste righe per 10 volte.

61
00:03:49,980 --> 00:03:52,790
E il modo migliore per farlo è usare un altro ciclo.

62
00:03:53,070 --> 00:03:58,820
Quindi vogliamo prendere ciò che abbiamo qui e ripetere tutto questo in modo da poter fare un altro ciclo.

63
00:03:59,340 --> 00:04:02,990
E questa volta lo faremo per la coordinata y.

64
00:04:03,060 --> 00:04:09,240
Quindi, perché dovrebbe salire e dire anche 1000 y plus uguale a 100.

65
00:04:09,540 --> 00:04:12,130
E ti spiegherò esattamente come funziona.

66
00:04:12,150 --> 00:04:14,520
Penso che i cicli annidati possano creare un po 'di

67
00:04:17,490 --> 00:04:21,560
confusione se cambiamo solo 0 per essere y Ora questo è tutto ciò che dobbiamo fare.

68
00:04:21,990 --> 00:04:24,940
Ricapitoliamo, vediamo se otteniamo quella griglia.

69
00:04:25,080 --> 00:04:29,880
Quindi non è la cosa più eccitante ma abbiamo aggiunto molto rapidamente un sacco di cerchi.

70
00:04:29,910 --> 00:04:32,430
Diamo un'occhiata a questo ciclo annidato.

71
00:04:32,460 --> 00:04:37,210
Così ho disegnato un piccolo diagramma la prima volta che X inizia da zero.

72
00:04:37,800 --> 00:04:43,610
Quindi lo farò come questo dove abbiamo x e y.

73
00:04:44,220 --> 00:04:44,910
OK.

74
00:04:44,910 --> 00:04:48,970
Fammelo capitalizzare in modo che X inizi da zero.

75
00:04:50,460 --> 00:04:55,840
E poi mentre X è 0 facciamo questa parola loop Y inizia da zero.

76
00:04:56,280 --> 00:04:58,540
Proprio così.

77
00:04:59,400 --> 00:05:03,460
E poi la prossima volta attraverso questo y loop X è ancora zero.

78
00:05:03,660 --> 00:05:06,210
Ma questa volta perché è 100.

79
00:05:06,210 --> 00:05:13,610
Perché aggiungiamo cento e quindi x è ancora zero e Y è 200.

80
00:05:14,130 --> 00:05:15,350
Quindi X è zero.

81
00:05:15,390 --> 00:05:18,090
Perché è 300 e così via.

82
00:05:18,280 --> 00:05:21,260
Farò un punto punto e dire che X è zero.

83
00:05:21,660 --> 00:05:31,800
Perché in realtà 1000 sono perché abbiamo meno di quello che otterremo solo 900 e poi X cambierà

84
00:05:31,800 --> 00:05:37,590
per essere 100 e poi Y cambierà per tornare a zero.

85
00:05:38,460 --> 00:05:44,690
Quindi fondamentalmente per ogni x generiamo 10 y.

86
00:05:44,970 --> 00:05:49,500
Quindi questo finisce con noi con 100 o 100 iterazioni.

87
00:05:49,530 --> 00:05:56,400
Quindi è un po 'confuso, ma aiuta se passi attraverso questa X inizia da zero y inizia da zero ma poi

88
00:05:56,400 --> 00:06:00,210
X rimane a 0 e y sale a 100 o 200.

89
00:06:00,210 --> 00:06:03,370
E stiamo disegnando un cerchio su ciascuna di quelle informazioni.

90
00:06:03,420 --> 00:06:07,590
Perché poi si reimposta e quindi X va e aumenta.

91
00:06:07,890 --> 00:06:08,250
OK.

92
00:06:08,250 --> 00:06:12,060
Quindi, a mio avviso, è un po 'confuso.

93
00:06:12,060 --> 00:06:15,000
L'ultima cosa che possiamo fare è un piccolo cambiamento.

94
00:06:15,000 --> 00:06:18,430
In realtà non è necessario salvarlo in una variabile ogni volta.

95
00:06:19,230 --> 00:06:26,070
Possiamo semplicemente cambiare questo modo ed è leggermente più efficiente dove non stiamo riassegnando una variabile costantemente perché

96
00:06:26,070 --> 00:06:29,740
non stiamo mai più facendo nulla con quei cerchi.

97
00:06:30,120 --> 00:06:31,290
Li stiamo facendo solo una volta.

98
00:06:31,410 --> 00:06:37,650
Quindi, piuttosto che riscrivere e reinizializzare una variabile ogni volta attraverso il ciclo, facciamo

99
00:06:37,650 --> 00:06:45,730
semplicemente un nuovo cerchio dandogli un colore di riempimento di viola o eseguiamo un aggiornamento di salvataggio giallo.

100
00:06:45,900 --> 00:06:46,560
Eccoci.

101
00:06:46,800 --> 00:06:47,220
OK.

102
00:06:47,370 --> 00:06:52,560
Quindi questo è stato un po 'di diversione qui, ma ancora piuttosto importante.

103
00:06:52,560 --> 00:06:54,680
Di nuovo la motivazione che sta dietro a te.

104
00:06:54,690 --> 00:06:55,380
Spero che tu l'abbia fatto.

105
00:06:55,400 --> 00:07:02,010
Ma la motivazione era che tu facessi pratica combinando i circuiti delle abilità di javascript con la carta sì e vedendo che tutto

106
00:07:02,070 --> 00:07:08,550
ciò che devi fare è chiamarti con una breve riga di codice e farebbe girare un sacco di codice dietro le quinte

107
00:07:08,550 --> 00:07:13,620
per fare effettivamente quella circonferenza OK nel prossimo video andrà davvero in onda con lo show e

108
00:07:13,620 --> 00:07:16,810
inizieremo davvero a lavorare sul nostro clone di attacco da pad.