1
00:00:00,650 --> 00:00:02,670
OK torneremo in questo video.

2
00:00:02,670 --> 00:00:05,040
Lavoreremo su alcune nuove funzionalità.

3
00:00:05,040 --> 00:00:08,190
Il primo è quando vinco il gioco.

4
00:00:08,460 --> 00:00:09,410
Mi dice corretto.

5
00:00:09,630 --> 00:00:15,440
E poi posso fare nuovamente clic su Play per ottenere nuovi colori e se non ho ancora vinto.

6
00:00:15,530 --> 00:00:19,460
Ma voglio anche nuovi colori, perché per qualche motivo non mi piacciono i colori che ho.

7
00:00:19,680 --> 00:00:21,750
Posso anche fare clic sul pulsante Nuovi colori.

8
00:00:21,930 --> 00:00:27,300
nuovo colore casuale tra i sei colori casuali e torneremo alla modalità facile e difficile per ultimi.

9
00:00:27,300 --> 00:00:32,770
Quindi, in pratica, abbiamo bisogno di un pulsante che ripristinerà il gioco, i nuovi colori selezioneranno un

10
00:00:32,940 --> 00:00:35,870
Quindi questo pulsante fa la stessa cosa.

11
00:00:36,040 --> 00:00:42,240
Il testo cambia però se abbiamo vinto il gioco e ha chiesto se vogliamo giocare di nuovo in modo che possiamo fare nuovamente

12
00:00:42,240 --> 00:00:44,150
clic su Play e questo lo ripristinerà.

13
00:00:44,220 --> 00:00:48,540
Ma posso anche fare clic su nuovi colori e anche questo lo ripristinerà.

14
00:00:48,570 --> 00:00:49,840
Quindi questo è ciò su cui ci concentreremo.

15
00:00:50,010 --> 00:00:55,590
E per iniziare ho intenzione di andare avanti e aggiungere il pulsante e aggiungere quella striscia che attraversa in

16
00:00:55,590 --> 00:01:00,290
modo che la striscia conterrà questo pulsante per un nuovo colore o per giocare di nuovo.

17
00:01:00,870 --> 00:01:02,890
E contiene il messaggio che abbiamo già.

18
00:01:03,060 --> 00:01:04,970
E poi i due pulsanti che faremo più tardi.

19
00:01:05,250 --> 00:01:11,590
Quindi se andiamo la prima cosa che dobbiamo fare abbiamo già un div, gli darò solo l'id di stripe

20
00:01:12,750 --> 00:01:14,240
e quindi potremo usarlo.

21
00:01:14,550 --> 00:01:19,560
E quindi abbiamo già la nostra durata all'interno che mostrerà qualcosa di simile o riprovare.

22
00:01:19,590 --> 00:01:27,990
E qui dentro aggiungeremo il nostro pulsante e questo pulsante inizierà dicendo nuovi colori che possiamo salvare

23
00:01:28,780 --> 00:01:29,820
e aggiornare.

24
00:01:30,160 --> 00:01:33,140
OK, sembra tanto male come ci si aspetterebbe.

25
00:01:33,330 --> 00:01:39,330
Andiamo avanti e aggiungiamo il colore di sfondo bianco e centriamo tutto in questo div Così il nostro div

26
00:01:39,330 --> 00:01:40,210
è chiamato stripe.

27
00:01:40,590 --> 00:01:45,220
Andiamo alle nostre C S e selezioneremo Strype che è un ID.

28
00:01:45,360 --> 00:01:48,970
Quindi dobbiamo usare la striscia con un ripensamento.

29
00:01:49,260 --> 00:01:54,580
E stiamo per impostare uno sfondo di colore di sfondo per essere bianco.

30
00:01:54,660 --> 00:02:02,460
Ho intenzione di impostare l'altezza di 30 pixel in modo che abbiamo una div bella e alta

31
00:02:02,460 --> 00:02:09,030
sono div relativamente alti e ho intenzione di impostare il testo allineato per essere centrale.

32
00:02:09,300 --> 00:02:13,330
E ora, se ti rinfresco, ottieni un div bianco che attraversa tutto il percorso.

33
00:02:13,350 --> 00:02:15,220
È un po 'più alto di quello che era.

34
00:02:15,240 --> 00:02:17,230
Abbiamo un pulsante qui solo per qualsiasi cosa.

35
00:02:17,400 --> 00:02:23,640
E se vinco o perdo o ottengo la risposta sbagliata c'è un intervallo che non riesci a vederlo.

36
00:02:23,640 --> 00:02:27,290
E questo perché il testo di quella spanna è bianco.

37
00:02:28,380 --> 00:02:34,950
Quindi quello che potresti pensare di fare è entrare nella nostra stripe div e dire che il

38
00:02:34,950 --> 00:02:38,690
colore del testo dovrebbe essere nero ma sfortunatamente non funziona.

39
00:02:38,880 --> 00:02:45,390
con l'idea di striscia dovrebbe essere nero di colore nero e tu penseresti OK che è snidante che

40
00:02:45,390 --> 00:02:52,110
è super-specifico se puoi ripensare a le nostre prime lezioni e ID sulla specificità dei CSS sono molto specifiche.

41
00:02:52,170 --> 00:02:58,890
E questo è un problema di specificità perché stiamo dicendo che con questa linea proprio qui tutto dentro

42
00:02:58,890 --> 00:02:59,710
la cosa

43
00:02:59,790 --> 00:03:05,440
Il fatto è che questo è l'impostazione dei colori per essere nero sul div con striscia ID.

44
00:03:05,970 --> 00:03:13,080
E quindi stiamo impostando tutti gli span in modo che tu possa vedere qui il colore bianco in modo che l'impostazione sia bianca

45
00:03:13,140 --> 00:03:17,820
e ciò lo rende più specifico perché in realtà stiamo prendendo di mira l'elemento stesso

46
00:03:17,820 --> 00:03:20,630
anziché il genitore e se ne eredita il colore.

47
00:03:21,090 --> 00:03:22,570
Quindi abbiamo alcune opzioni.

48
00:03:22,590 --> 00:03:25,960
Per il momento, quello che farò è liberarsi di questo.

49
00:03:26,040 --> 00:03:31,710
Non imposteremo più il colore per diventare bianchi e possiamo aggiornare e vedremo che questo non cambia colore è

50
00:03:31,710 --> 00:03:36,720
ancora un bianco, anche se ci siamo sbarazzati della linea che diceva che tutti gli span sono

51
00:03:37,050 --> 00:03:42,960
bianchi e questo è perché è all'interno di un H1 e eredita il colore del testo H1 che è bianco.

52
00:03:42,990 --> 00:03:45,590
Lo stesso modo in cui questo intervallo qui è nero.

53
00:03:45,600 --> 00:03:51,720
Ha ereditato il colore del testo del nero o solo il nero colorato normale dal div di striscia

54
00:03:51,720 --> 00:03:55,160
che lo circonda, che puoi vedere qui di colore nero.

55
00:03:55,410 --> 00:03:56,770
E questo è ciò che ci ha colpito.

56
00:03:57,060 --> 00:03:57,660
OK.

57
00:03:57,810 --> 00:04:06,720
Ora lavoriamo su questo pulsante per resettare il gioco, quindi per iniziare dobbiamo aggiungere un listener di eventi.

58
00:04:06,870 --> 00:04:09,750
E prima che possiamo farlo, dobbiamo selezionare quel pulsante.

59
00:04:09,960 --> 00:04:18,000
Quindi ho intenzione di dare quel pulsante e l'ID qui che chiameremo ID uguale a reset e quindi selezioneremo quel

60
00:04:18,000 --> 00:04:21,000
pulsante di reset invece di un Javascript.

61
00:04:21,000 --> 00:04:31,980
Quindi il pulsante di ripristino var equivale a documentare il selettore di query con la nostra ottava o reset.

62
00:04:31,980 --> 00:04:37,120
E poi come sempre vorrei aggiungere il mio semplice ascoltatore di eventi di test.

63
00:04:37,140 --> 00:04:40,680
Quindi il pulsante di reset aggiunge listener di eventi.

64
00:04:40,860 --> 00:04:51,990
e quando facciamo clic su tutto ciò che faremo è fare un semplice pulsante di reset rapido di avviso proprio come quello essere aggiornato.

65
00:04:52,070 --> 00:04:52,820
Fare clic

66
00:04:52,970 --> 00:04:57,590
E se clicco su questo, ottengo la mia attenzione e questo significa che siamo a posto.

67
00:04:57,590 --> 00:05:01,030
Quindi, in seguito, possiamo effettivamente lavorare sulla logica da resettare.

68
00:05:01,250 --> 00:05:03,890
Quindi, cosa dobbiamo fare, scriviamo lo pseudo codice.

69
00:05:03,890 --> 00:05:10,030
Quando fai clic su quel pulsante devi generare tutti i nuovi colori.

70
00:05:10,040 --> 00:05:20,750
Abbiamo bisogno di scegliere un nuovo colore casuale dalla matrice e quindi abbiamo bisogno di cambiare i colori dei quadrati

71
00:05:20,750 --> 00:05:22,030
sulla pagina.

72
00:05:22,280 --> 00:05:28,310
Quindi, per generare tutti i nuovi colori, abbiamo già una funzione esistente che genera colori casuali.

73
00:05:29,030 --> 00:05:33,940
Quindi diremo semplicemente che i colori ora equivalgono a generare colori casuali di sei.

74
00:05:34,580 --> 00:05:41,270
Quindi selezioneremo un nuovo colore casuale, quindi scegli il colore ora è uguale a selezionare il metodo o la

75
00:05:41,270 --> 00:05:42,860
funzione che abbiamo definito.

76
00:05:42,860 --> 00:05:48,890
C'è ancora una cosa che dobbiamo effettivamente fare, che è cambiare questo colore del display in modo che corrisponda al nuovo colore

77
00:05:48,890 --> 00:05:49,540
dei plettri.

78
00:05:49,850 --> 00:05:52,040
Quindi diremo semplicemente cambiare la

79
00:05:55,250 --> 00:06:01,090
visualizzazione del colore per abbinare il colore selezionato in modo che uno sia semplice.

80
00:06:01,160 --> 00:06:08,870
pagina e proviamo a fare clic su nuovi colori, ciò che sta facendo sta generando sei nuovi colori.

81
00:06:12,890 --> 00:06:21,890
Tutto quello che dobbiamo fare è dire che il contenuto del testo del display a colori equivale al colore selezionato e se

82
00:06:21,890 --> 00:06:23,110
aggiorniamo la nostra

83
00:06:23,120 --> 00:06:25,400
Non li stiamo ancora vedendo perché non abbiamo quel codice.

84
00:06:25,580 --> 00:06:30,750
E poi seleziona uno di questi come colore selezionato e poi cambia quello che vediamo qui per abbinare il

85
00:06:30,770 --> 00:06:31,410
colore picta.

86
00:06:31,730 --> 00:06:36,220
Quindi ci dà un nuovo colore casuale lassù e sei colori casuali dietro le quinte.

87
00:06:36,230 --> 00:06:42,230
Quindi l'ultimo pezzo è quello di riflettere quei sei nuovi colori sulla pagina e l'abbiamo già fatto prima.

88
00:06:42,260 --> 00:06:49,070
passiamo in rassegna tutti i quadrati e cambiamo stile in modo che lo sfondo sia il colore.

89
00:06:49,460 --> 00:06:50,440
Giù qui

90
00:06:50,450 --> 00:06:56,060
Quindi inizierò semplicemente duplicando tutto questo qui e lo rifatteremo.

91
00:06:56,350 --> 00:06:58,340
Ma per iniziare a mettere tutto qui.

92
00:06:58,370 --> 00:07:07,170
Quindi passiamo in rassegna tutti i quadrati delle piazze per aggirare I plus più e poi tutto ciò che dobbiamo fare

93
00:07:07,450 --> 00:07:12,600
è dire quadrati io stile che lo sfondo è uguale ai colori.

94
00:07:13,020 --> 00:07:15,820
Salverò.

95
00:07:16,070 --> 00:07:21,660
E se aggiorniamo e facciamo clic su nuovi colori, genera 60 colori casuali.

96
00:07:21,740 --> 00:07:22,820
Ne sceglie uno.

97
00:07:22,820 --> 00:07:29,090
Aggiorna il display per riflettere il colore dell'immagine e cambia tutti i sei quadrati per abbinare i

98
00:07:29,090 --> 00:07:30,360
nuovi sei colori.

99
00:07:30,710 --> 00:07:34,730
Quindi proviamo e vediamo se anche la nostra precedente logica regge.

100
00:07:35,240 --> 00:07:35,850
OK.

101
00:07:36,290 --> 00:07:39,130
Quindi questa è una discreta quantità di rosso.

102
00:07:39,140 --> 00:07:41,460
Molto poco verde e una discreta quantità di blu.

103
00:07:41,840 --> 00:07:45,280
Proviamo a cliccare su alcuni che non pensiamo siano corretti.

104
00:07:46,160 --> 00:07:48,880
E ora andiamo per uno dei viola.

105
00:07:49,070 --> 00:07:50,940
Quindi sembra un po 'più rosso il blu.

106
00:07:50,960 --> 00:07:56,510
Quindi ho intenzione di indovinare questo e abbiamo ragione e sembra che le cose funzionino ancora bene.

107
00:07:56,540 --> 00:07:58,470
Nuovi colori rapidi di nuovo.

108
00:07:58,610 --> 00:08:00,320
Vogliamo resettare questo.

109
00:08:00,320 --> 00:08:01,960
Questa è una cosa cosmetica davvero piccola.

110
00:08:02,030 --> 00:08:08,470
Ma quando clicchiamo su nuovi colori dovremmo resettare lo schermo qui in modo che ritorni al nero

111
00:08:08,510 --> 00:08:11,000
o a questo colore grigio scuro.

112
00:08:11,000 --> 00:08:16,670
fare è che quando vogliamo che diciamo di giocare di nuovo come puoi vedere qui, allora vincerò qui.

113
00:08:17,030 --> 00:08:18,480
L'altra cosa che vogliamo

114
00:08:18,530 --> 00:08:20,350
Questo è molto verde.

115
00:08:20,540 --> 00:08:24,980
Io vinco e mi dice di giocare di nuovo e fa la stessa cosa.

116
00:08:24,980 --> 00:08:29,260
Funzionalmente non cambia in realtà solo noi e il nostro testo.

117
00:08:29,300 --> 00:08:31,060
Quindi è semplice da fare.

118
00:08:31,100 --> 00:08:35,150
Tutto quello che dobbiamo fare è trovare il codice per verificare se vinci.

119
00:08:35,180 --> 00:08:36,240
È proprio qui.

120
00:08:36,620 --> 00:08:39,500
E poi vogliamo solo cambiare il contenuto del testo di quel pulsante.

121
00:08:39,740 --> 00:08:41,820
Quindi il pulsante è stato chiamato pulsante di ripristino.

122
00:08:41,930 --> 00:08:51,740
Quindi, ripristina il pulsante che il contenuto del testo equivale a riprodurre di nuovo con un punto di domanda che aggiorna dice nuovi colori.

123
00:08:52,790 --> 00:08:54,560
Ora proviamo a suonare uno di questi.

124
00:08:54,740 --> 00:08:58,750
Quindi questo è molto rosso e molto verde e un po 'blu.

125
00:08:58,790 --> 00:09:02,070
Quindi molto rosso e tanto verde ci darà un colore giallo.

126
00:09:02,210 --> 00:09:04,100
Quindi restringiamo alcuni di essi.

127
00:09:04,100 --> 00:09:08,180
E poi un po 'di blu lo renderà più leggero e luminoso.

128
00:09:08,480 --> 00:09:13,590
Quindi se proviamo uno di questi come questo o questo vedrai che non sono del tutto corretti.

129
00:09:13,880 --> 00:09:17,230
E questa è la nostra risposta qui e ci dice di giocare di nuovo.

130
00:09:17,300 --> 00:09:20,120
E molto veloce e fa esattamente la stessa cosa.

131
00:09:20,180 --> 00:09:23,570
L'ultima cosa che ho menzionato è il ritorno del colore di sfondo.

132
00:09:23,570 --> 00:09:28,430
Quindi qui possiamo semplicemente farlo alla fine del pulsante di reset.

133
00:09:28,520 --> 00:09:30,950
Stiamo per selezionare quell'H-1.

134
00:09:31,200 --> 00:09:34,610
È un punto che abbiamo selezionato qui.

135
00:09:34,670 --> 00:09:37,090
Quello è lo sfondo dial-up.

136
00:09:37,160 --> 00:09:40,600
UPS è uguale.

137
00:09:40,640 --> 00:09:47,600
Ed è proprio quello esadecimale 2 3 2 3 2 3 che è se ti dimentichi che potresti andare a cercare in SEE per valutare

138
00:09:47,900 --> 00:09:49,560
il colore di sfondo del corpo.

139
00:09:49,800 --> 00:09:55,410
O lo impostiamo qui quando eliminiamo uno dei colori se scegli il colore sbagliato.

140
00:09:55,580 --> 00:09:58,680
Cambiamo il colore dello sfondo per essere lo stesso del corpo.

141
00:09:59,150 --> 00:10:02,130
OK, aggiorniamo i nuovi colori.

142
00:10:02,330 --> 00:10:03,820
Ora vinciamo.

143
00:10:04,010 --> 00:10:10,760
Semplicemente in modo casuale, solo per il tempo necessario, facciamo nuovamente clic su Play e questo torna su uno

144
00:10:10,760 --> 00:10:11,300
sfondo nero.

145
00:10:11,310 --> 00:10:13,060
O lo sfondo grigio scuro.

146
00:10:13,570 --> 00:10:15,530
OK, questo è tutto per questo video.

147
00:10:15,530 --> 00:10:19,790
In seguito aggiungeremo i pulsanti per scegliere tra la modalità facile e quella difficile.

148
00:10:19,820 --> 00:10:22,590
E poi, infine, modelleremo le cose in modo che sembrino belle