1
00:00:00,090 --> 00:00:01,280
Quindi siamo in buona forma qui.

2
00:00:01,370 --> 00:00:06,980
Quello che vogliamo fare è fare in modo che non usiamo gli stessi sei colori ogni volta.

3
00:00:07,230 --> 00:00:12,990
Invece, vogliamo generare sei colori casuali e riempire questo array con quei sei colori casuali e quindi

4
00:00:12,990 --> 00:00:15,620
scegliere uno di quelli per generare quei colori.

5
00:00:15,630 --> 00:00:18,320
In realtà scriverò un'altra funzione per aiutarci.

6
00:00:18,390 --> 00:00:24,360
Quindi la nostra funzione Nener la nostra razza l'array hardcoded e ho intenzione di impostare i

7
00:00:24,360 --> 00:00:30,960
colori uguale alla nostra chiamata di funzione che chiameremo generare colori casuali e non esiste ancora e ci

8
00:00:30,960 --> 00:00:34,590
vorrà un singolo argomento che decide quanti colori generare nell'array.

9
00:00:34,590 --> 00:00:40,230
Quindi se vogliamo un array con tre elementi che vorremmo alla fine quando andremo in modalità facile rispetto

10
00:00:40,230 --> 00:00:41,820
a modalità difficile, vogliamo 6.

11
00:00:42,060 --> 00:00:43,510
Quindi inizieremo con 6.

12
00:00:43,560 --> 00:00:45,570
Questo è ciò che vogliamo quando viene caricata la pagina.

13
00:00:45,900 --> 00:00:51,900
Quindi dobbiamo creare la funzione generare colori casuali che prende un numero e restituisce il numero X

14
00:00:51,960 --> 00:00:54,430
di colori casuali invece di un array.

15
00:00:54,450 --> 00:00:57,900
Quindi lo farò qui.

16
00:00:57,900 --> 00:01:08,730
funzione genera colori casuali e dovrebbe prendere una discussione che chiameremo solo numb e poi invece di qui.

17
00:01:08,730 --> 00:01:09,060
La

18
00:01:09,060 --> 00:01:10,440
Va bene il mio pseudo codice.

19
00:01:10,440 --> 00:01:12,550
Quindi ho intenzione di creare un array.

20
00:01:12,900 --> 00:01:22,410
Aggiungerò alcuni colori casuali all'array e poi restituirò quella matrice alla fine.

21
00:01:24,120 --> 00:01:26,370
Quindi per iniziare questa è la parte più semplice.

22
00:01:26,370 --> 00:01:28,200
Crea un array solo vuoto.

23
00:01:28,380 --> 00:01:34,590
Quindi lo chiameremo semplicemente un array vuoto e in fondo restituiremo

24
00:01:34,590 --> 00:01:35,980
lo stesso array.

25
00:01:36,000 --> 00:01:38,610
La parte difficile è la logica che va in mezzo.

26
00:01:38,640 --> 00:01:42,660
Quindi qui abbiamo bisogno di aggiungere i colori casuali.

27
00:01:42,690 --> 00:01:46,700
Quindi, questo significa che dobbiamo ripetere qualcosa per sapere quante volte.

28
00:01:46,760 --> 00:01:49,000
Quindi sei o tre volte.

29
00:01:49,230 --> 00:01:50,830
Quindi useremo un ciclo per farlo.

30
00:01:51,120 --> 00:01:55,540
Quindi inizieremo con il nostro ciclo per i nostri pari zero.

31
00:01:56,430 --> 00:02:01,800
Io sono meno che insensibile.

32
00:02:02,100 --> 00:02:06,930
non lo useremo realmente, è solo un modo per ripetere tre volte sei volte Nahm.

33
00:02:07,410 --> 00:02:13,350
E non importa se iniziamo a zero o se iniziamo a 1 e lo rendiamo inferiore o uguale

34
00:02:13,350 --> 00:02:13,910
a perché

35
00:02:14,130 --> 00:02:23,010
E poi qui avremo effettivamente colori casuali e spingerli nell'array.

36
00:02:23,070 --> 00:02:28,190
Quindi questa linea è in realtà solo ripetere numb volte.

37
00:02:28,590 --> 00:02:33,360
Quindi realizzerò una funzione separata che genererà il colore casuale per noi

38
00:02:33,360 --> 00:02:36,190
e lo chiamerò solo un colore casuale.

39
00:02:36,270 --> 00:02:41,990
Quindi funziona a colori casuali e quello che stai vedendo è che ho una funzione qui.

40
00:02:42,090 --> 00:02:47,310
sto chiamando un'altra funzione chiamata solo colore casuale e che è in realtà solo per rompere un codice.

41
00:02:47,310 --> 00:02:49,860
Genera colori casuali che chiamo all'interno di quello che

42
00:02:49,860 --> 00:02:55,410
Rendi chiaro tutto ciò che fa ciò che potremmo avere tutto in assenza di funzioni potrebbe essere solo quello

43
00:02:55,950 --> 00:02:58,680
che la gente chiamerebbe codice degli spaghetti, è dappertutto.

44
00:02:58,830 --> 00:03:01,760
Quindi aggiungeremo alcune funzioni qui per aggiungere qualche struttura.

45
00:03:01,920 --> 00:03:06,540
E ancora alla fine di questo progetto, quando lo abbiamo completato, sembra che tutte le funzionalità

46
00:03:06,540 --> 00:03:07,090
siano presenti.

47
00:03:07,230 --> 00:03:12,690
Avrò un video facoltativo su refactoring e parlerò di come può cambiare le cose in giro

48
00:03:12,690 --> 00:03:18,080
renderli un po 'più puliti un po' più carini ma funzionerà esattamente allo stesso modo.

49
00:03:18,090 --> 00:03:30,210
Quindi, per iniziare i colori casuali per creare un colore casuale, avremo bisogno di scegliere una lettura da 0 a 5 5 ripetizioni da 0 2 a 5 5

50
00:03:31,020 --> 00:03:38,250
e quindi dobbiamo scegliere un verde da zero a 2 5 5 e poi un blu .

51
00:03:39,210 --> 00:03:45,490
E quindi per scegliere qualsiasi numero compreso tra 0 e 255, dobbiamo anche usare la matematica non a caso.

52
00:03:45,570 --> 00:03:49,230
Quindi sarà matematica non casuale.

53
00:03:49,350 --> 00:03:51,760
Questo ci dà tra 0 e 1.

54
00:03:51,870 --> 00:03:53,070
Non include uno.

55
00:03:53,220 --> 00:03:57,900
Dobbiamo moltiplicare per 256 perché ricorda che stiamo arrotondando per difetto.

56
00:03:58,050 --> 00:04:05,910
più grande possibile per molti da moltiplicare di un altro 256 e quindi dobbiamo mettere a posto quel piano di matematica.

57
00:04:05,910 --> 00:04:08,730
Quindi vogliamo che 255 sia il numero

58
00:04:08,900 --> 00:04:16,290
Quindi vai dal mio avvocato e incolla questo codice che puoi vedere se otteniamo un numero casuale compreso tra 0 e 255 e

59
00:04:16,650 --> 00:04:19,630
probabilmente non vedrai che in realtà vada a 255.

60
00:04:19,660 --> 00:04:21,770
Dovremo fidarci di me per quello.

61
00:04:21,900 --> 00:04:23,700
Ma puoi vedere almeno che si avvicina.

62
00:04:23,700 --> 00:04:25,590
Penso che abbiamo visto 253.

63
00:04:25,590 --> 00:04:26,770
Questo è abbastanza buono per ora.

64
00:04:27,060 --> 00:04:33,000
che tutti i quadrati sono andati in viola e questo perché i nostri colori casuali non restituiscono nulla.

65
00:04:33,000 --> 00:04:33,920
E vedi anche

66
00:04:33,930 --> 00:04:36,240
Quindi restituisce solo una stringa vuota.

67
00:04:36,300 --> 00:04:39,300
Quindi in realtà non stiamo eseguendo il looping e dando un colore a ciascuno di essi.

68
00:04:39,300 --> 00:04:44,360
Quindi è solo prendere il default viola da C Ss solo una nota a margine.

69
00:04:44,700 --> 00:04:48,480
Quindi questo genererà un numero da 0 a 255.

70
00:04:48,870 --> 00:04:58,080
Lo salveremo in una variabile chiamata R e poi faremo la stessa cosa per il verde e per il blu, così come

71
00:04:58,080 --> 00:05:05,730
questo spazio correttamente e cambiamo i nomi in modo che G e B ci diano tre numeri da

72
00:05:05,730 --> 00:05:07,250
0 a 255.

73
00:05:07,530 --> 00:05:14,850
E la parte peggiore è sintetizzarli in questa grande stringa che segue il formato di R. G. B parentesi e quindi i

74
00:05:14,970 --> 00:05:18,640
numeri all'interno di R G e B.

75
00:05:18,900 --> 00:05:22,260
E questo significa molte stringhe di apertura e chiusura e più segni.

76
00:05:22,260 --> 00:05:25,390
Quindi iniziamo con ciò che assomiglia a questo.

77
00:05:25,410 --> 00:05:32,350
Avremo il nostro G-B e quindi apriremo le parentesi e poi il canale rosso.

78
00:05:32,370 --> 00:05:45,720
Questo numero da 0 a 2 5 5 più una virgola più il valore di G più un'altra virgola più il valore di B più le

79
00:05:46,770 --> 00:05:48,980
nostre parentesi di chiusura.

80
00:05:49,620 --> 00:05:51,230
E dovremmo essere bravi ad andare ora.

81
00:05:51,340 --> 00:05:52,530
Questa grande stringa.

82
00:05:52,680 --> 00:05:58,570
E quello che vogliamo fare è restituire quella stringa proprio così.

83
00:05:58,590 --> 00:06:03,350
Quindi restituisci questa grande stringa e genererà un colore casuale.

84
00:06:03,360 --> 00:06:05,090
Quindi è molto lavoro per un colore.

85
00:06:05,100 --> 00:06:07,650
Tre numeri diversi 0 2 2 5 5.

86
00:06:07,650 --> 00:06:12,450
Li mettiamo insieme con le virgole tra loro parentesi intorno a loro le lettere R. G. B.

87
00:06:12,660 --> 00:06:15,650
E poi ritorniamo così possiamo usarlo quassù.

88
00:06:15,660 --> 00:06:21,330
pagina, andiamo dal nostro console e proviamo a chiamare random a colori e questo mi sembra buono.

89
00:06:21,330 --> 00:06:25,600
E se vogliamo testare solo se funziona, andiamo avanti e aggiorniamo la

90
00:06:25,620 --> 00:06:26,770
Stiamo ottenendo un colore casuale.

91
00:06:26,790 --> 00:06:27,910
Le parentesi sono corrette.

92
00:06:27,990 --> 00:06:29,910
Le virgole sono tutte buone.

93
00:06:29,910 --> 00:06:33,510
Andiamo ora e usiamolo qui.

94
00:06:34,170 --> 00:06:39,990
Quindi chiameremo quel colore casuale e lo inseriremo nel nostro array.

95
00:06:39,990 --> 00:06:41,240
Eccoli.

96
00:06:41,280 --> 00:06:46,510
Quindi il nostro DOT spinge e non dobbiamo usare push, ma qui lo faremo.

97
00:06:46,710 --> 00:06:49,820
E questo ora ci costruirà una bella gamma di colori.

98
00:06:50,210 --> 00:06:52,580
Quindi genera colori casuali 6.

99
00:06:52,770 --> 00:06:56,740
Chiamiamo questo si ripete sei volte ogni volta.

100
00:06:56,910 --> 00:06:59,230
Spinge un colore casuale nell'array.

101
00:06:59,430 --> 00:07:02,440
Quindi ho intenzione di spostare il nostro commento qui.

102
00:07:02,460 --> 00:07:03,260
Eccoci.

103
00:07:03,600 --> 00:07:06,040
E per verificare che funzioni se ci aggiorniamo.

104
00:07:06,180 --> 00:07:13,050
colori casuali e che non solo il colore casuale che selezioniamo cambia anche il colore che abbiamo scelto dall'array.

105
00:07:13,050 --> 00:07:15,250
Puoi vedere ora che otteniamo sei

106
00:07:15,270 --> 00:07:16,520
Quindi non l'abbiamo infranto.

107
00:07:16,530 --> 00:07:19,190
Tutto funziona ancora o lo fa.

108
00:07:19,200 --> 00:07:20,000
Vediamo.

109
00:07:20,000 --> 00:07:25,510
Quindi, se clicco su alcuni di questi colori, prova ancora, prova di nuovo, forse ho solo un libro davvero brutto, ma non

110
00:07:25,860 --> 00:07:27,210
c'è qualcosa che non va.

111
00:07:27,400 --> 00:07:28,920
Quindi il problema è un po 'complicato.

112
00:07:29,130 --> 00:07:34,830
bug che ho riscontrato quando abbiamo fatto il gioco del punteggio quando stavamo confrontando le cose proprio qui.

113
00:07:34,830 --> 00:07:36,500
È un po 'simile al

114
00:07:36,930 --> 00:07:42,260
Se stiamo controllando se l'utente ha ragione se sceglie il colore giusto qualcosa andava storto prima di

115
00:07:42,300 --> 00:07:43,110
avere un numero.

116
00:07:43,110 --> 00:07:44,880
E lo stavamo confrontando con una stringa.

117
00:07:45,030 --> 00:07:46,760
In questo caso è un po 'diverso.

118
00:07:46,920 --> 00:07:53,000
Quindi lascia che ti mostri solo per fare un'altra truffa. registro della cinghia clicca per colorare e poi scegli il colore.

119
00:07:53,250 --> 00:07:56,190
E vediamo solo quello che sembrano forse sono leggermente diversi.

120
00:07:56,340 --> 00:08:00,570
Rinnova la pagina e apri la truffa. E iniziamo a fare clic.

121
00:08:00,570 --> 00:08:06,120
Quindi questa è una quantità media di Fred un po 'verde e un po' blu.

122
00:08:06,300 --> 00:08:07,510
Quindi facciamo clic su alcuni.

123
00:08:08,160 --> 00:08:12,700
E nota i numeri a sinistra della stringa RGV e quella a destra.

124
00:08:12,990 --> 00:08:15,180
E naturalmente questi non corrispondono.

125
00:08:15,840 --> 00:08:21,930
Ma se clicchi su quello giusto puoi vedere che quando lo abbinano pensa ancora che ci siamo sbagliati.

126
00:08:21,960 --> 00:08:23,220
Dice di riprovare.

127
00:08:23,490 --> 00:08:28,080
E se si confrontano le due stringhe qui questo è il colore cliccato.

128
00:08:28,080 --> 00:08:29,420
Questo è ciò che sta tornando.

129
00:08:29,550 --> 00:08:36,810
Quando clicchiamo su un elemento e chiediamo questo quadrante composto a punto e questo è il colore

130
00:08:36,810 --> 00:08:38,290
che abbiamo scelto dall'array.

131
00:08:38,400 --> 00:08:40,380
Quindi in qualche modo sono leggermente diversi.

132
00:08:40,380 --> 00:08:46,740
E quello che succede è che quando impostiamo in realtà il colore di sfondo di un elemento che SS

133
00:08:46,740 --> 00:08:50,620
aggiunge automaticamente nel dormitorio aggiungiamo automaticamente 10 spazi tra di loro.

134
00:08:50,970 --> 00:08:59,370
Quindi, per risolvere il problema, quello che vogliamo fare è aggiungere qui degli spazi tra i nostri numeri, quindi dopo le comete, e

135
00:08:59,370 --> 00:09:02,930
se lo facciamo, si confronteranno e saranno uguali tra loro.

136
00:09:02,970 --> 00:09:04,890
Quindi è una specie di bug insidioso.

137
00:09:04,920 --> 00:09:10,080
Ha solo a che fare con il modo in cui stiamo confrontando le cose con gli equidi tripli e non è

138
00:09:10,080 --> 00:09:11,740
che i doppi uguali possano risolverli comunque.

139
00:09:11,820 --> 00:09:15,660
Raddoppiare le chiamate non ignora gli spazi o altro, ma è solo un problema con il modo in cui

140
00:09:15,660 --> 00:09:16,460
abbiamo generato i colori.

141
00:09:16,740 --> 00:09:19,240
Quindi, se proviamo di nuovo e aggiorniamo.

142
00:09:19,410 --> 00:09:20,990
Ora facciamo semplicemente clic.

143
00:09:21,120 --> 00:09:24,780
Puoi vedere che i nostri spazi sono qui e questi sicuramente combaceranno.

144
00:09:24,780 --> 00:09:32,060
Una volta che clicchiamo sul colore giusto che è l'ultimo e otteniamo il nostro corretto.

145
00:09:32,100 --> 00:09:34,650
Quindi sicuramente un bug insidioso lì per concludere.

146
00:09:34,650 --> 00:09:40,110
Proviamo solo a giocare e a schermo intero, a sbarazzarci della console e ad aggiornare e ammirare

147
00:09:40,110 --> 00:09:41,280
i nostri colori casuali.

148
00:09:41,280 --> 00:09:48,210
L'ultima cosa che potremmo fare è quando abbiamo capito che potremmo anche cambiare lo sfondo H-1 come ho

149
00:09:48,210 --> 00:09:48,950
fatto qui.

150
00:09:49,110 --> 00:09:52,940
Quindi quando indovini il colore giusto cambia anche il colore dello sfondo.

151
00:09:53,040 --> 00:09:54,910
E questo è un semplice cambiamento.

152
00:09:54,960 --> 00:09:57,540
Tutto ciò che dobbiamo fare è selezionare l'H-1.

153
00:09:58,080 --> 00:10:01,920
Quindi H-1 e possiamo semplicemente selezionarlo questo l'unico H-1 sulla pagina.

154
00:10:01,950 --> 00:10:09,750
Quindi qui sopra selezionerò in fondo var H-1 uguale al documento che il selettore

155
00:10:13,470 --> 00:10:16,200
di query H-1 lo salva.

156
00:10:16,200 --> 00:10:25,470
E poi, quando l'utente indovina correttamente, è qui che cambieremo lo sfondo del DOD

157
00:10:25,620 --> 00:10:28,460
H-1 o lo sfondo.

158
00:10:29,610 --> 00:10:39,860
E questo ora dovrebbe equivalere a raccogliere il colore e salveremo che andiamo alla versione corretta del nostro gioco di aggiornamento e

159
00:10:40,080 --> 00:10:42,060
proviamo a fare clic.

160
00:10:42,930 --> 00:10:47,880
abbiamo un modo per andare con il nostro stile rispetto a questo, ma ci stiamo arrivando con la logica.

161
00:10:47,880 --> 00:10:48,950
E qui andiamo decisamente

162
00:10:49,200 --> 00:10:53,120
Quindi indovina in modo errato che scompare semplicemente cambiando il colore di sfondo.

163
00:10:53,400 --> 00:10:58,240
E se hai indovinato, cambiano colore e cambia anche l'H-1.

164
00:10:58,620 --> 00:11:03,690
Nel prossimo video aggiungeremo la funzionalità di riproduzione e aggiungeremo un po 'di stile in più.