1
00:00:00,700 --> 00:00:02,670
OK, quindi riprendiamo da dove eravamo rimasti.

2
00:00:02,790 --> 00:00:06,990
Inizieremo ad aggiungere alcuni comportamenti per quando fai clic sul colore giusto e quando

3
00:00:06,990 --> 00:00:08,620
fai clic sul colore sbagliato.

4
00:00:08,640 --> 00:00:10,860
Quindi iniziamo con quando scegli il colore sbagliato.

5
00:00:11,010 --> 00:00:16,000
Quello che vogliamo fare è sfumare in modo che corrisponda al colore dello sfondo qui.

6
00:00:16,170 --> 00:00:18,070
Quindi questo è in realtà piuttosto semplice.

7
00:00:18,070 --> 00:00:26,520
È solo questione di scrivere questo stile punto che lo sfondo è uguale e quindi dobbiamo solo abbinare

8
00:00:26,520 --> 00:00:31,080
il colore che abbiamo impostato nel nostro C Ss.

9
00:00:31,080 --> 00:00:33,980
Quindi lo incolleremo e salveremo.

10
00:00:34,530 --> 00:00:35,470
Proviamoci.

11
00:00:35,610 --> 00:00:37,050
Facciamo clic su uno di quelli sbagliati.

12
00:00:37,140 --> 00:00:41,670
Puoi vederlo svanire e se ho cliccato su quello giusto otteniamo ancora il nostro avviso.

13
00:00:42,060 --> 00:00:43,710
OK, quindi mi aggiornerò.

14
00:00:43,710 --> 00:00:45,490
Quindi è quello con cui inizieremo.

15
00:00:45,600 --> 00:00:52,230
E l'altra cosa che vogliamo succedere è che vogliamo un display in modo da poter vedere qui proprio qui.

16
00:00:52,320 --> 00:00:56,700
Ci sarà un display quindi se clicco su uno dei colori e dice di riprovare.

17
00:00:57,090 --> 00:01:04,740
E se ho capito bene come qui, viene visualizzato correttamente e quindi si concentrerà sulle altre cose come cambiare

18
00:01:04,740 --> 00:01:05,620
il colore.

19
00:01:05,820 --> 00:01:07,290
Una volta che otteniamo quella prima parte.

20
00:01:07,350 --> 00:01:13,290
Quindi aggiungiamo in questo paragrafo o l'intervallo in realtà è quello che è e farlo visualizzare il messaggio corretto.

21
00:01:14,370 --> 00:01:20,520
Quindi torniamo al nostro HMO e aggiungeremo un altro div in e in realtà abbiamo tre o quattro pezzi

22
00:01:20,520 --> 00:01:22,680
diversi che andranno qui alla fine.

23
00:01:22,680 --> 00:01:26,890
Per ora sarà solo un piccolo intervallo che entra in quel div.

24
00:01:27,450 --> 00:01:29,220
Quindi, come ho detto, sarà di più.

25
00:01:29,220 --> 00:01:34,340
Per ora è solo l'intervallo che sarà vuoto per iniziare mentre aggiorno la pagina è possibile

26
00:01:34,350 --> 00:01:36,480
vedere non c'è nessun messaggio qui.

27
00:01:36,480 --> 00:01:41,520
Quindi andremo qui Ho una campata vuota e diamogli una I. D. e lo chiameremo semplicemente messaggio.

28
00:01:41,910 --> 00:01:45,410
E in questo modo possiamo selezionarlo dal nostro Javascript.

29
00:01:45,420 --> 00:01:49,000
Quindi andiamo al nostro javascript ora e selezionalo.

30
00:01:49,140 --> 00:01:59,670
Quindi qui chiameremo la visualizzazione dei messaggi Farm uguale al documento e faremo un selettore di query sul selettore di query

31
00:02:00,080 --> 00:02:02,870
e che chiameremo quel messaggio.

32
00:02:03,090 --> 00:02:04,410
Abbiamo bisogno dell'ID.

33
00:02:05,010 --> 00:02:06,400
Quindi abbiamo bisogno dell'arco per Thor.

34
00:02:06,960 --> 00:02:09,110
E poi se l'utente indovina sbagliato.

35
00:02:09,210 --> 00:02:20,260
Tutto quello che dobbiamo fare è scrivere il contenuto del testo del punto di visualizzazione dei messaggi equivale a riprovare.

36
00:02:21,180 --> 00:02:25,560
E se ci aggiorniamo e fai clic su quello sbagliato, è davvero difficile da vedere.

37
00:02:25,920 --> 00:02:28,470
Quindi dovremmo cambiare il colore di sfondo o il colore del testo.

38
00:02:28,580 --> 00:02:30,120
Possiamo farlo qui.

39
00:02:30,420 --> 00:02:37,320
Diremo solo che tutte le span dovrebbero avere il colore bianco e se siamo freschi.

40
00:02:37,320 --> 00:02:39,620
Ora ho fatto clic su quello sbagliato.

41
00:02:39,690 --> 00:02:41,330
Mi dice di riprovare.

42
00:02:41,910 --> 00:02:42,250
OK.

43
00:02:42,270 --> 00:02:44,620
E continuiamo a farlo finché non avrò quello giusto.

44
00:02:44,760 --> 00:02:46,180
E otteniamo ancora questo avviso.

45
00:02:46,410 --> 00:02:54,360
Quindi, se otteniamo quello corretto, quello che vorremmo fare è cambiare ciò che mostriamo in quel display dei messaggi.

46
00:02:54,780 --> 00:02:57,060
Vogliamo cambiarlo per essere corretto.

47
00:02:57,300 --> 00:03:00,840
Quindi il messaggio mostra che il contenuto

48
00:03:03,540 --> 00:03:05,700
del testo è corretto.

49
00:03:06,630 --> 00:03:07,980
Proprio così.

50
00:03:08,080 --> 00:03:11,000
E ora se proviamo questo ci sbagliamo e proviamo ancora.

51
00:03:11,190 --> 00:03:13,730
Abbiamo capito bene e ci dice corretto.

52
00:03:14,100 --> 00:03:14,340
OK.

53
00:03:14,340 --> 00:03:20,730
Quindi abbiamo quella logica di base lì ora dove stiamo controllando se abbiamo ragione o torto e stiamo

54
00:03:20,730 --> 00:03:21,280
mostrando qualcosa.

55
00:03:21,420 --> 00:03:27,030
La prossima cosa che potremmo fare è aggiungere la funzione dove, quando ottieni la risposta giusta, tutti i quadrati

56
00:03:27,030 --> 00:03:28,940
cambiano colore per abbinare quella risposta.

57
00:03:28,950 --> 00:03:32,180
Quindi qui fai clic sulla risposta giusta, tutti cambiano di livello.

58
00:03:32,340 --> 00:03:35,370
E poi possiamo anche fare lo sfondo di questo H1.

59
00:03:35,370 --> 00:03:38,360
Quindi la prima cosa che dobbiamo fare per farlo funzionare.

60
00:03:38,580 --> 00:03:42,750
In realtà scriverò una funzione separata per farlo solo per mantenere il mio codice

61
00:03:42,750 --> 00:03:43,900
un po 'più organizzato.

62
00:03:44,040 --> 00:03:52,290
Cambia i colori e ci vorrà un singolo argomento per una stringa di colori e poi all'interno di

63
00:03:52,290 --> 00:04:01,430
qui abbiamo bisogno di scorrere tutti i quadrati per cambiare ogni colore in modo che corrisponda al colore dato.

64
00:04:02,550 --> 00:04:09,700
VAR I uguale a zero è inferiore alla lunghezza del colore o alla lunghezza del colore più il valore più.

65
00:04:09,750 --> 00:04:15,770
Quindi, per passare in rassegna tutti i quadrati che abbiamo già fatto, solo una questione di quattro

66
00:04:15,970 --> 00:04:21,880
E poi dentro è dove dovremo cambiare ogni colore e lo abbiamo già fatto prima.

67
00:04:22,080 --> 00:04:23,530
Sono solo un colore

68
00:04:23,740 --> 00:04:32,820
Ho ottenuto uno stile di sfondo duro uguale a quello che abbiamo fornito tecnicamente il nostro codice cambierà ogni singolo quadrato

69
00:04:32,910 --> 00:04:35,260
in modo che corrisponda al colore.

70
00:04:35,370 --> 00:04:38,670
Quindi includendo questo che è il colore corretto.

71
00:04:38,700 --> 00:04:42,640
Lo sovrascriverà e lo cambierà nello stesso colore che è già.

72
00:04:42,660 --> 00:04:47,340
qui, che è lo sfondo in stile del colore che è stato cliccato

73
00:04:47,520 --> 00:04:56,550
Possiamo aggiungere del codice per risolvere il problema ma iniziamo con questo e poi dobbiamo chiamare questa funzione per cambiare i colori e dobbiamo passare il

74
00:04:56,550 --> 00:04:59,660
colore corretto che è la variabile che abbiamo creato

75
00:04:59,790 --> 00:05:00,700
E lo stiamo facendo.

76
00:05:00,750 --> 00:05:02,080
Se lo hanno indovinato correttamente.

77
00:05:02,130 --> 00:05:05,600
Quindi se salviamo e aggiorniamo vediamo se abbiamo errori.

78
00:05:05,700 --> 00:05:06,330
No.

79
00:05:06,630 --> 00:05:07,770
E ora è veloce.

80
00:05:07,770 --> 00:05:08,370
Sbagliato.

81
00:05:08,400 --> 00:05:09,030
Sbagliato.

82
00:05:10,050 --> 00:05:16,250
Correggere e abbiamo un problema quando si fa clic sulla corretta ci dice che non è possibile impostare lo

83
00:05:16,590 --> 00:05:22,670
sfondo di proprietà di indefinito se guardiamo a ciò che sta parlando di colori io stile lo sfondo.

84
00:05:22,770 --> 00:05:27,780
Ovviamente abbiamo un problema qui perché sto facendo questo al nostro array di colori e questo non dovrebbe

85
00:05:27,780 --> 00:05:28,790
essere il nostro colore.

86
00:05:29,120 --> 00:05:30,570
Questa è la nostra gamma di colori.

87
00:05:30,600 --> 00:05:35,070
Dovrebbe essere sulla matrice di quadrati che sono i quadrati che stiamo cercando di cambiare.

88
00:05:35,060 --> 00:05:39,860
Quello che stavo facendo era l'array di colori solo le corde.

89
00:05:39,960 --> 00:05:45,810
Quindi quadra la lunghezza e ora dovrebbe essere bello andare e tutti cambiano per il colore che è

90
00:05:46,650 --> 00:05:48,120
stato selezionato proprio così.

91
00:05:48,120 --> 00:05:48,790
Tutto ok.

92
00:05:48,900 --> 00:05:54,990
Quindi, la prossima volta concentriamoci sull'ottenere i colori casuali nell'array e quindi scegliere un colore casuale

93
00:05:54,990 --> 00:05:55,940
da quella matrice.

94
00:05:55,940 --> 00:06:00,830
Quindi inizierò con la seconda cosa che seleziona un colore casuale invece di

95
00:06:00,840 --> 00:06:05,910
renderlo automaticamente color tre per aiutarci a scegliere un elemento casuale da questo array.

96
00:06:05,910 --> 00:06:07,830
In realtà sto per fare una funzione.

97
00:06:07,830 --> 00:06:12,630
E la ragione per cui lo sto facendo è quella di ripulire il nostro codice, ma in

98
00:06:12,720 --> 00:06:17,910
realtà useremo quella funzione in seguito perché ogni volta che iniziamo un nuovo gioco dobbiamo scegliere un nuovo colore.

99
00:06:17,940 --> 00:06:22,040
Quindi è qualcosa che dovremo chiamare un paio di volte per farlo funzionare.

100
00:06:22,050 --> 00:06:25,200
Inizierò chiamando la funzione che non esiste ancora.

101
00:06:25,200 --> 00:06:29,460
Quindi ho intenzione di dire che il colore di pick è uguale e chiamiamolo.

102
00:06:29,460 --> 00:06:34,760
Scegli il colore e quindi dobbiamo definire il colore scelto.

103
00:06:34,980 --> 00:06:38,420
Quindi vengo quaggiù, fallo in fondo per la selezione delle funzioni.

104
00:06:38,430 --> 00:06:43,070
Colore in questa funzione, dobbiamo fare due cose.

105
00:06:43,080 --> 00:06:45,330
Uno è scegliere un numero casuale.

106
00:06:45,810 --> 00:06:50,650
Quindi qualcosa come 0 o 1 o 2 fino all'ultimo indice di questo array.

107
00:06:51,180 --> 00:06:57,220
E poi dobbiamo usare quel numero per accedere al colore da questo array e restituire quel colore.

108
00:06:57,300 --> 00:06:59,070
Quindi inizieremo selezionando un numero casuale.

109
00:06:59,220 --> 00:07:05,160
E il modo in cui selezioniamo un numero casuale in javascript è usando la matematica casuale e la matematica fuori

110
00:07:05,190 --> 00:07:09,420
casuale sceglierà un numero compreso tra 0 e 1 e non ne include uno.

111
00:07:09,420 --> 00:07:11,420
Quindi lascia che ti mostri quella matematica

112
00:07:14,340 --> 00:07:16,620
non casuale ed è un decimale lungo e lungo.

113
00:07:16,620 --> 00:07:24,860
Quindi, se volessimo generare un numero compreso tra 0 e 6, ad esempio per simulare un

114
00:07:24,860 --> 00:07:28,850
Dayrell, faremmo matematica a caso e poi moltiplicarlo.

115
00:07:29,000 --> 00:07:36,560
Nel nostro caso, se avessimo fatto solo 6 centesimi, non avremmo mai ottenuto un numero superiore a cinque, nove, nove, nove

116
00:07:36,670 --> 00:07:37,320
e nove.

117
00:07:37,640 --> 00:07:44,790
Quindi, se vogliamo che quel numero passi da uno in alto e lo comunichi a sei, potremmo moltiplicarlo

118
00:07:44,940 --> 00:07:48,350
per sei e poi aggiungerne uno alla fine.

119
00:07:48,380 --> 00:07:53,570
Ora possiamo arrivare fino a sei virgola novantanove e ottenere un numero intero.

120
00:07:53,580 --> 00:08:00,660
che viene restituito dalla matematica moltiplicando casualmente per 6 aggiungendo 1 e quindi rimuovendo tutto dopo il punto decimale.

121
00:08:00,660 --> 00:08:08,250
Abbiamo quindi bisogno di tagliare quel decimale così possiamo usare l'ultimo piano di matematica che è un altro metodo e che

122
00:08:08,250 --> 00:08:09,630
prenderà semplicemente tutto ciò

123
00:08:09,770 --> 00:08:13,790
E questo ci dà numeri casuali tra 1 e 6.

124
00:08:13,920 --> 00:08:18,460
Come puoi vedere, ma non necessariamente vogliamo solo tra 1 e 6.

125
00:08:18,540 --> 00:08:22,090
Alla fine questo array potrebbe avere solo tre elementi.

126
00:08:22,620 --> 00:08:25,800
Come puoi vedere quando vado in modalità facile ci sono solo tre colori.

127
00:08:25,920 --> 00:08:27,600
Quindi potrebbe avere tre e potrebbe avere sei.

128
00:08:27,690 --> 00:08:33,110
quindi moltiplicarlo per la lunghezza dell'array e questo è OK perché ricorda che non è inclusivo.

129
00:08:33,120 --> 00:08:38,460
Quindi useremo solo la lunghezza dell'array per generare il nostro colore in modo che sembrerà casuale

130
00:08:38,460 --> 00:08:42,690
questa matematica penseremo di generare un numero compreso tra 0 e 1 e

131
00:08:42,750 --> 00:08:47,330
Quindi, anche se la lunghezza dell'array è uno più dell'indice più alto.

132
00:08:47,390 --> 00:08:48,970
Quindi la lunghezza è sei.

133
00:08:49,080 --> 00:08:51,040
Ma il numero più alto che vogliamo è cinque.

134
00:08:51,410 --> 00:08:54,500
Perché il numero casuale va solo tra 0 e 1.

135
00:08:54,500 --> 00:08:57,140
Ma non include uno siamo in buona forma.

136
00:08:57,330 --> 00:09:03,900
il punto decimale rimanente e poi, una volta ottenuto ciò, forniremo un numero casuale.

137
00:09:03,890 --> 00:09:11,070
Quindi lo genereremo e poi faremo il calcolo matematico su quel piano dell'intera cosa che taglierà

138
00:09:11,610 --> 00:09:18,810
La prossima cosa che dobbiamo fare è salvare questo in una variabile e quindi usare quella variabile per accedere a

139
00:09:18,810 --> 00:09:20,990
un elemento dalla matrice in quell'indice.

140
00:09:21,000 --> 00:09:26,720
Quindi, stiamo per dire restituire i colori casuali.

141
00:09:26,730 --> 00:09:33,230
Quindi questo sceglie un numero casuale come tre e poi restituisce i colori di tre.

142
00:09:33,240 --> 00:09:33,630
Tutto ok.

143
00:09:33,620 --> 00:09:35,420
Quindi proviamo questo.

144
00:09:35,460 --> 00:09:36,490
Abbiamo scelto il colore.

145
00:09:36,620 --> 00:09:39,150
Stiamo chiamando pick up in alto qui.

146
00:09:39,480 --> 00:09:45,690
Quindi, se aggiorno, dovremmo aspettarci che questo cambi e cambia mentre aggiorno.

147
00:09:45,720 --> 00:09:51,870
Puoi vedere che a volte ottieni lo stesso perché ce ne sono solo sei e non cambiano mai,

148
00:09:52,320 --> 00:09:54,170
ma cambia quasi ogni volta.

149
00:09:54,170 --> 00:09:57,900
Ora controlliamo se la nostra logica veloce funziona allo stesso modo.

150
00:09:57,890 --> 00:10:03,060
Quindi se clicco su questo è zero rosso zero verde e tutto blu.

151
00:10:03,060 --> 00:10:05,430
Quindi proviamo a cliccare su cyan rosso.

152
00:10:05,420 --> 00:10:06,120
Buona.

153
00:10:06,210 --> 00:10:08,130
Se clicco su blu è corretto