1
00:00:00,180 --> 00:00:02,530
Quindi ora abbiamo due cose diverse su cui possiamo concentrarci.

2
00:00:02,610 --> 00:00:09,540
Il primo sta cambiando il display qui per essere verde sul giocatore vincente e quello è piuttosto

3
00:00:09,540 --> 00:00:10,110
semplice.

4
00:00:10,140 --> 00:00:14,670
E il secondo sta facendo funzionare il pulsante di reset in modo che possiamo resettare e giocare di nuovo.

5
00:00:14,850 --> 00:00:20,530
Quindi iniziamo con il cambio colore e lo farò definendo una classe in un file CSSA.

6
00:00:20,580 --> 00:00:25,420
Quindi ho bisogno di creare un file C S S e chiamerò quel segnapunti.

7
00:00:25,590 --> 00:00:35,790
C Ss quindi collegherò ad esso invece del mio segnapunti per file HDMI Dotsie SS e salvo.

8
00:00:35,790 --> 00:00:43,080
chiamerò solo inverno e dirò che il colore è verde e questo è tutto ciò di cui abbiamo bisogno e che salveremo.

9
00:00:43,080 --> 00:00:47,090
Poi andrò al mio file CSSA e definirò una classe e la

10
00:00:47,190 --> 00:00:49,620
E solo per controllare che assomigli al modo in cui voglio.

11
00:00:49,620 --> 00:00:57,270
Aggiungiamolo allo span, quindi diremo che è uguale alla classe e gli daremo una classe di vincitori per il

12
00:00:57,270 --> 00:00:59,540
display del giocatore 1 fin dall'inizio.

13
00:00:59,610 --> 00:01:03,090
E se aggiorno, puoi vedere che otteniamo un 0 verde.

14
00:01:03,090 --> 00:01:05,700
Questo è esattamente ciò che vogliamo come incremento.

15
00:01:05,730 --> 00:01:09,260
Ovviamente vogliamo che inizi come nero e aggiunga solo la classe.

16
00:01:09,360 --> 00:01:14,320
Quando il gioco è finito, dobbiamo tornare al nostro javascript e sbarazzarci di questo.

17
00:01:14,520 --> 00:01:17,030
Quindi torna al nero.

18
00:01:17,310 --> 00:01:18,910
Vai alla nostra javascript ora.

19
00:01:19,530 --> 00:01:24,840
Quindi inizieremo solo per il giocatore 1 e dobbiamo verificare se il punteggio del giocatore 1 è uguale al punteggio vincente.

20
00:01:24,870 --> 00:01:26,640
Ciò significa che il giocatore uno ha vinto.

21
00:01:26,760 --> 00:01:33,360
Quindi qui aggiungeremo all'elenco delle classi di visualizzazione del lettore 1.

22
00:01:33,360 --> 00:01:37,570
Stiamo per aggiungere il vincitore della classe e questo è tutto quello che dobbiamo fare.

23
00:01:37,830 --> 00:01:44,500
Quindi, se aggiorniamo, vedrai aumentare il punteggio del giocatore 1 e arrivare a 5.

24
00:01:44,520 --> 00:01:46,580
Quella classe è stata aggiunta.

25
00:01:46,830 --> 00:01:49,390
Quindi se diamo un'occhiata qui lo ispezionerò.

26
00:01:49,410 --> 00:01:54,090
Non esiste una classe e continuo ad aumentare fino a raggiungere il 5.

27
00:01:54,090 --> 00:01:59,640
Presta attenzione qui dentro e otteniamo il vincitore della classe pari al vincitore Quando arriviamo a 5.

28
00:01:59,910 --> 00:02:02,900
Quindi faremo la stessa cosa per Player 2.

29
00:02:03,150 --> 00:02:07,230
Quindi se il giocatore due segna il punteggio vincente cambierà il giocatore da mostrare.

30
00:02:07,710 --> 00:02:10,480
Controlliamo l'incremento a 5.

31
00:02:10,650 --> 00:02:12,060
Grande.

32
00:02:13,110 --> 00:02:15,030
Tutto sembra funzionare bene.

33
00:02:15,450 --> 00:02:19,260
Quindi il prossimo pezzo sta facendo funzionare il pulsante di reset adesso.

34
00:02:19,350 --> 00:02:22,490
Se perdiamo il gioco, è sempre vero.

35
00:02:22,500 --> 00:02:24,990
Non c'è modo di cambiare gioco.

36
00:02:24,990 --> 00:02:28,830
Quindi facendo clic sul pulsante di ripristino è necessario attivare alcune righe di codice diverse.

37
00:02:28,860 --> 00:02:30,540
Il primo che vuoi cambiare.

38
00:02:30,540 --> 00:02:33,390
Il punteggio del giocatore 1 e il giocatore tornano a zero.

39
00:02:33,420 --> 00:02:38,820
Vogliamo cambiare i valori qui visualizzati nel display del player 1 e il player da

40
00:02:38,820 --> 00:02:43,860
mostrare come zero e vogliamo rimuovere questa classe verde dall'elemento in cui si trova.

41
00:02:44,130 --> 00:02:49,170
E poi l'ultima cosa è che dobbiamo assicurarci che il gioco finisca per essere falso in modo che il nostro

42
00:02:49,170 --> 00:02:51,180
codice e qui possa essere eseguito di nuovo.

43
00:02:51,240 --> 00:02:57,200
Quindi la prima cosa che dobbiamo selezionare è il pulsante che abbiamo dato a id uguale reset.

44
00:02:57,390 --> 00:03:00,170
Quindi dobbiamo andare qui e selezionarlo.

45
00:03:00,330 --> 00:03:02,590
Quindi lo farò con gli altri pulsanti finora.

46
00:03:02,640 --> 00:03:11,880
Il pulsante di reset equivale al punto del documento e faremo un altro elemento get per id e questa volta l'ID viene resettato

47
00:03:13,050 --> 00:03:16,400
e salverà e solo per verificare che funzioni.

48
00:03:16,580 --> 00:03:17,820
Fai un registro costante.

49
00:03:18,060 --> 00:03:22,900
Ripristina il pulsante di ripristino e aggiorna.

50
00:03:22,900 --> 00:03:26,050
Se guardiamo nella nostra console otteniamo il nostro pulsante corretto.

51
00:03:26,070 --> 00:03:27,960
È stato cancellato è stato registrato.

52
00:03:28,390 --> 00:03:35,220
OK, quindi dovremmo iniziare aggiungendo il nostro listener di eventi per un clic su quel pulsante di reset in

53
00:03:35,610 --> 00:03:45,510
modo da reimpostare il pulsante che il listener di eventi fa clic sulla nostra funzione di callback e tutto ciò che vogliamo fare per ricominciare basta cancellare

54
00:03:45,510 --> 00:03:53,490
quel reset di registro cliccato solo per assicurarsi che funzioni e lì andiamo il nostro pulsante di reset è stato cliccato.

55
00:03:54,360 --> 00:03:57,780
Quindi la logica però, come abbiamo discusso, dobbiamo impostare.

56
00:03:57,780 --> 00:04:00,330
Il punteggio del giocatore 1 e il giocatore tornano a zero.

57
00:04:00,450 --> 00:04:02,440
Quindi è abbastanza semplice.

58
00:04:02,460 --> 00:04:05,890
Il punteggio del giocatore 1 è pari a zero.

59
00:04:06,330 --> 00:04:12,210
Ma se corro questo ora dove cambio solo il punteggio del giocatore 1 nel giocatore per segnare a zero e incrementare in modo che

60
00:04:12,330 --> 00:04:14,790
il giocatore uno vince e quindi fare clic su Ripristina.

61
00:04:14,850 --> 00:04:20,050
Nulla sembra accadere ed è perché cambiamo solo il punteggio in javascript.

62
00:04:20,100 --> 00:04:26,400
Non abbiamo mai aggiornato i punteggi sulla pagina, quindi quelle sono le variabili di visualizzazione P1 e P2 che

63
00:04:26,400 --> 00:04:27,050
dobbiamo aggiornare.

64
00:04:27,300 --> 00:04:34,020
Quindi vorremmo fare un contenuto del testo visualizzato e possiamo semplicemente azzerarlo.

65
00:04:34,020 --> 00:04:37,180
Potremmo anche impostarlo per essere 1 punteggio.

66
00:04:37,320 --> 00:04:38,690
Dovrebbero essere entrambi zero.

67
00:04:39,090 --> 00:04:42,700
Quindi la stessa cosa Pete per visualizzare il contenuto del testo è zero.

68
00:04:42,930 --> 00:04:46,060
Se aggiorniamo ora e arriviamo a 5.

69
00:04:47,280 --> 00:04:48,410
Entrambi tornano a zero.

70
00:04:48,450 --> 00:04:50,750
Quindi facciamo un gioco più vicino.

71
00:04:52,360 --> 00:04:55,120
E fare clic su Ripristina entrambi tornare a zero.

72
00:04:55,500 --> 00:04:58,030
Avanti, rimuoviamo la clausola del vincitore.

73
00:04:58,090 --> 00:05:01,430
Lo farà in modo semplice rimuovendo la classe del vincitore da entrambi.

74
00:05:01,540 --> 00:05:03,650
Quindi non controlleremo nemmeno quale dei due ha.

75
00:05:03,730 --> 00:05:05,260
Lo rimuoveremo da entrambi.

76
00:05:05,300 --> 00:05:07,620
È solo questione di un display.

77
00:05:07,780 --> 00:05:12,070
Le liste di classe rimuovono il vincitore.

78
00:05:12,310 --> 00:05:16,440
In tal modo si eliminerà la clausola e lo farà anche su display.

79
00:05:16,480 --> 00:05:20,830
Quindi, qualunque ne abbia uno, non importa perché lo stiamo rimuovendo da entrambi.

80
00:05:21,940 --> 00:05:25,160
Quindi ora se giochiamo abbiamo un vincitore.

81
00:05:25,600 --> 00:05:26,850
Faccio clic su Ripristina.

82
00:05:26,920 --> 00:05:30,560
Entrambi tornano solo a un semplice testo vuoto.

83
00:05:31,140 --> 00:05:33,700
Ma come puoi vedere, arrivo a cinque.

84
00:05:33,790 --> 00:05:36,340
Ho fatto clic sul pulsante di reset ancora non funzionano.

85
00:05:36,610 --> 00:05:39,930
E questo perché il game over è ancora vero.

86
00:05:40,110 --> 00:05:42,900
E così nessuno del nostro codice invece di questi eventi verrà eseguito.

87
00:05:43,090 --> 00:05:45,000
Quindi l'ultima cosa che dobbiamo fare è impostare.

88
00:05:45,100 --> 00:05:50,340
Il gioco torna a falso e questo dovrebbe permetterci di continuare a giocare.

89
00:05:50,820 --> 00:05:53,350
Quindi aggiornerò i incrementali.

90
00:05:53,520 --> 00:05:55,530
Finiamo un gioco.

91
00:05:55,540 --> 00:05:55,990
Eccoci.

92
00:05:55,990 --> 00:05:57,240
Non posso più suonare.

93
00:05:57,250 --> 00:06:04,610
Clicco su reset e ora il game over torna a false e posso giocare di nuovo e poi continuare.

94
00:06:04,840 --> 00:06:07,220
Quindi questa è la funzionalità principale qui.

95
00:06:07,320 --> 00:06:13,660
Abbiamo quasi fatto tutto, l'ultima cosa è ottenere il numero di gioco o il punteggio vincente

96
00:06:13,870 --> 00:06:14,650
come variabile.

97
00:06:14,640 --> 00:06:16,520
Quindi non sono sempre solo le cinque.

98
00:06:16,930 --> 00:06:22,750
Quindi abbiamo questo input e vogliamo usare questo in modo che quando cambio questo a sette, questo dice di

99
00:06:22,750 --> 00:06:27,710
giocare a 7 e il nostro massimo o il nostro punteggio di vincita è sette anziché cinque.

100
00:06:27,970 --> 00:06:29,750
Quindi abbiamo qualche passo per arrivarci.

101
00:06:29,760 --> 00:06:35,260
La prima cosa che dobbiamo fare è selezionare questo input come puoi vedere abbiamo il tipo di input uguale al numero.

102
00:06:35,740 --> 00:06:37,330
È l'unico input sulla pagina.

103
00:06:37,360 --> 00:06:40,410
Quindi non dobbiamo necessariamente dargli un ID o altro.

104
00:06:40,420 --> 00:06:46,790
Quindi ho intenzione di andare qui e basta selezionarlo con i miei altri selettori var.

105
00:06:47,050 --> 00:06:55,360
Chiamiamolo come input non equivale al documento e ci sono molti modi per farlo documentare

106
00:06:55,360 --> 00:06:58,030
l'input del selettore di query.

107
00:06:58,020 --> 00:07:01,400
Potremmo anche specificare solo dove.

108
00:07:01,420 --> 00:07:06,540
Il tipo è uguale al numero perché potrebbero esserci altri input.

109
00:07:06,730 --> 00:07:08,070
Nel nostro caso lo terrò semplice.

110
00:07:08,080 --> 00:07:09,330
C'è solo un input.

111
00:07:09,460 --> 00:07:11,190
Quindi funzionerà bene.

112
00:07:11,810 --> 00:07:12,120
OK.

113
00:07:12,120 --> 00:07:14,420
Quindi abbiamo selezionato quell'input.

114
00:07:14,440 --> 00:07:16,390
Quindi ora aggiungiamo un evento.

115
00:07:16,420 --> 00:07:22,540
Quindi quello che vogliamo succedere è che ogni volta che questo cambia il valore o quel numero cambia, vogliamo che

116
00:07:22,530 --> 00:07:26,920
questo si aggiorni e vogliamo che anche la variabile del punteggio vincente si aggiorni.

117
00:07:26,950 --> 00:07:29,200
Quindi quello che dobbiamo fare è aggiungere un evento.

118
00:07:29,280 --> 00:07:40,190
Quindi andremo a intorpidire e mettere Dot ha avuto un evento Lessner click, fallo qui in questo modo.

119
00:07:41,050 --> 00:07:44,750
Funzione e tutti fanno un avviso.

120
00:07:45,300 --> 00:07:54,150
clic sull'input e vedrai che in realtà un click listener non è lo strumento migliore per questo lavoro.

121
00:07:54,150 --> 00:07:54,720
Fai

122
00:07:54,920 --> 00:07:58,880
Perché sì possiamo cambiare il valore con un clic come ho fatto lì.

123
00:07:59,470 --> 00:08:06,910
Ma posso anche premere delete e digitare un numero me stesso e nessun evento è stato licenziato perché non dovevo fare clic.

124
00:08:07,360 --> 00:08:11,110
Quindi se uso i piccoli pulsanti qui si attiva un evento rapido.

125
00:08:11,110 --> 00:08:14,670
Altrimenti, se uso la mia tastiera, non riceviamo un evento rapido.

126
00:08:14,680 --> 00:08:19,680
Quindi c'è un altro tipo di evento che è molto meglio in questo caso che si chiama cambiamento.

127
00:08:19,770 --> 00:08:25,240
Quindi un evento di modifica verrà eseguito ogni volta che il valore cambia e non importa in che modo tale valore è cambiato.

128
00:08:25,240 --> 00:08:27,840
Se era perché ho cliccato o premuto il tasto di cancellazione.

129
00:08:27,850 --> 00:08:35,000
Quindi, in effetti, cambiamo l'avviso qui per dire cambiato l'input e poi aggiorniamo.

130
00:08:35,320 --> 00:08:39,900
E se clicco qui per cambiarlo mi dice che hai cambiato l'input.

131
00:08:40,090 --> 00:08:45,900
Ma se cancello e scrivo un numero che non comporta il clic, mi dice anche che

132
00:08:45,900 --> 00:08:47,960
cambio l'input, quindi è fantastico.

133
00:08:47,980 --> 00:08:52,740
Questo è l'evento in cui vogliamo utilizzare l'evento change ogni volta che il valore cambia, vogliamo aggiornare questo

134
00:08:52,750 --> 00:08:59,430
numero qui e vogliamo anche aggiornare il nostro punteggio vincente in modo che il nostro gioco continui ad andare fino a quando non raggiungiamo il

135
00:08:59,430 --> 00:09:00,650
nuovo punteggio di vincita.

136
00:09:00,700 --> 00:09:02,700
Spero che questo non sia il nostro vero punteggio vincente.

137
00:09:02,740 --> 00:09:04,850
Decisamente lungo gioco di forbici di carta rock.

138
00:09:05,080 --> 00:09:08,530
Quindi la prima cosa è aggiornare questo valore qui.

139
00:09:08,860 --> 00:09:13,020
Quindi, proprio come prima, dobbiamo selezionarlo, che è un paragrafo.

140
00:09:13,060 --> 00:09:20,440
Quindi dobbiamo selezionare il nostro paragrafo e farò solo un paragrafo VAR uguale al documento che interroghi il tag

141
00:09:21,690 --> 00:09:22,590
di selezione.

142
00:09:23,290 --> 00:09:30,330
E poi in questo rapido evento cambieremo solo quel contenuto di testo e inizieremo semplicemente cambiandolo

143
00:09:30,340 --> 00:09:35,070
per dire clic o diciamo che il valore è cambiato.

144
00:09:36,640 --> 00:09:39,310
Proprio così e aggiorna.

145
00:09:39,310 --> 00:09:45,470
Ora se cambio il valore che il paragrafo cambia per dire che il valore è cambiato, ma questo è

146
00:09:45,460 --> 00:09:49,730
lo stesso problema che abbiamo incontrato prima con l'H-1, non vogliamo modificare l'intero paragrafo.

147
00:09:49,810 --> 00:09:52,390
Vogliamo solo cambiare questa piccola parte.

148
00:09:52,390 --> 00:09:55,000
Quindi quello che vogliamo usare è in realtà un altro intervallo.

149
00:09:55,300 --> 00:09:58,950
Quindi torneremo e aggiungeremo un intervallo attorno al numero.

150
00:09:59,380 --> 00:10:04,300
E questo è un uso perfetto per una spanna in cui ancora una volta possiamo usarlo per colpire solo una

151
00:10:04,300 --> 00:10:06,400
piccola parte di un elemento, non l'intera cosa.

152
00:10:06,820 --> 00:10:11,380
E stavolta non ho intenzione di dargli un'idea, solo per mostrarti un altro modo di selezionarlo.

153
00:10:11,710 --> 00:10:14,780
Quindi ricorda che è un intervallo invece di un paragrafo.

154
00:10:14,920 --> 00:10:17,010
Ed è l'unico come quello sulla nostra pagina.

155
00:10:17,110 --> 00:10:18,060
Quindi torneremo.

156
00:10:18,310 --> 00:10:26,470
Quindi, piuttosto che selezionare il paragrafo, creiamo una nuova variabile e la chiameremo visualizzazione del punteggio vincente

157
00:10:27,010 --> 00:10:30,170
e sarà selettore di query di documenti.

158
00:10:30,970 --> 00:10:38,740
Ma piuttosto che span perché ci sono altri span nella pagina vogliamo selezionare span all'interno

159
00:10:38,740 --> 00:10:39,520
dei paragrafi.

160
00:10:39,550 --> 00:10:40,690
Quindi questo è tutto ciò che dobbiamo scrivere.

161
00:10:40,810 --> 00:10:41,930
Spazio P

162
00:10:41,930 --> 00:10:42,710
Span.

163
00:10:43,240 --> 00:10:44,490
E salveremo.

164
00:10:44,980 --> 00:10:49,970
E ora andiamo avanti e aggiorniamo il punteggio vincente visualizzato qui invece del paragrafo.

165
00:10:49,990 --> 00:10:53,710
Quindi il punteggio vincente viene visualizzato in questo modo.

166
00:10:54,010 --> 00:10:56,020
E non sarà ancora perfetto.

167
00:10:56,080 --> 00:11:02,080
Si aggiornerà solo il valore ogni volta, ma almeno non si sta aggiornando l'intero paragrafo.

168
00:11:02,950 --> 00:11:08,680
per visualizzare il numero che si trova all'interno dell'ingresso in modo che i valori siano sincronizzati insieme.

169
00:11:08,680 --> 00:11:10,840
Quindi il prossimo passo è farlo aggiornare

170
00:11:10,880 --> 00:11:13,920
Quindi non abbiamo effettivamente visto come otteniamo i dati da un input.

171
00:11:13,960 --> 00:11:15,940
Come otteniamo il valore corrente.

172
00:11:15,940 --> 00:11:18,100
Ti mostrerò qui selezionando l'input.

173
00:11:18,250 --> 00:11:24,940
Quindi documentate il selettore di query e lo faremo nell'input della console e io lo salverò su una

174
00:11:24,940 --> 00:11:30,790
variabile, quindi chiamatelo var input document taqueria selezionate il vostro input e poi faremo un

175
00:11:31,630 --> 00:11:32,750
input daat value.

176
00:11:33,040 --> 00:11:39,040
Quindi quel valore sarà una stringa di ciò che è contenuto in questo input qualunque sia il valore.

177
00:11:39,040 --> 00:11:43,800
Quindi se cambio questo a 7 e eseguo nuovamente il codice ottengo 7.

178
00:11:44,120 --> 00:11:50,800
Se lo faccio un numero enorme e questa volta lo faccio di nuovo, riflette qualunque valore si trovi all'interno di

179
00:11:50,800 --> 00:11:51,520
questo input.

180
00:11:51,520 --> 00:11:56,950
Quindi faremo uso di ciò cambiando questo invece del valore della stringa modificato.

181
00:11:56,950 --> 00:12:10,030
Lo cambieremo con il valore del punto di input Nahm in modo tale da prendere il valore da qui e modificare il punteggio vincente per

182
00:12:10,030 --> 00:12:12,710
visualizzare il contenuto del testo.

183
00:12:13,370 --> 00:12:18,690
Quindi aggiorniamo e aggiorno questo e ora puoi sincronizzarli insieme.

184
00:12:19,030 --> 00:12:26,020
questo da uno a tre, il mio punteggio di gioco o quello del punteggio vincente vengono aggiornati anche da 1 a 3.

185
00:12:26,020 --> 00:12:26,900
Così, mentre aggiorno

186
00:12:27,340 --> 00:12:30,580
Quindi, ovviamente, non stiamo giocando a 123.

187
00:12:30,580 --> 00:12:32,350
Stiamo ancora giocando a cinque.

188
00:12:32,740 --> 00:12:38,590
E questo perché la nostra logica non riflette questo nuovo valore di input e tutto ciò che riflette è il

189
00:12:38,870 --> 00:12:40,280
nostro originale punteggio di 5.

190
00:12:40,480 --> 00:12:51,430
Quindi vogliamo anche cambiare qui il punteggio vincente per essere uguale al valore di input numb e salvare.

191
00:12:51,430 --> 00:12:57,700
E ora proviamo a cambiare questo, quindi stiamo giocando a tre e clicchiamo e noteremo

192
00:12:57,700 --> 00:12:58,790
un comportamento strano.

193
00:12:58,840 --> 00:13:00,940
Quindi non si è nemmeno fermato alle cinque.

194
00:13:00,970 --> 00:13:02,370
Continua solo per sempre.

195
00:13:02,650 --> 00:13:08,200
Quindi questo è un bug divertente che ha a che fare con diversi tipi di stringhe e numeri di dati e confrontandoli

196
00:13:08,240 --> 00:13:10,300
con i doppi uguali contro i tre uguali.

197
00:13:10,300 --> 00:13:14,200
Quindi, per arrivare a fondo, facciamo degli svantaggi. registrazione.

198
00:13:14,200 --> 00:13:21,220
Quindi sappiamo che il punto cruciale di tutto questo è questa linea qui o questa linea qui dove stiamo controllando se il giocatore ne

199
00:13:21,220 --> 00:13:24,700
ha uno se il punteggio del giocatore è uguale al punteggio vincente.

200
00:13:24,820 --> 00:13:26,790
Questo è quando abbiamo impostato il gioco per essere vero.

201
00:13:27,130 --> 00:13:29,610
E questo non sta succedendo adesso perché il gioco è finito.

202
00:13:29,620 --> 00:13:31,460
Se cambiamo il punteggio.

203
00:13:31,450 --> 00:13:33,730
Il game over non cambia mai.

204
00:13:33,820 --> 00:13:35,460
È sempre falso.

205
00:13:35,710 --> 00:13:37,660
Quindi qualcosa sta andando storto in questa linea.

206
00:13:37,780 --> 00:13:41,860
Quindi facciamo un registro cancellato e faremo due cose.

207
00:13:41,870 --> 00:13:46,900
Stampiamo il punteggio del giocatore 1 e stamperemo il punteggio vincente e possiamo separarli con

208
00:13:46,900 --> 00:13:49,700
le virgole e li stamperemo semplicemente sulla stessa riga.

209
00:13:49,720 --> 00:13:54,640
Solo una breve nota con i registri Comstock è il modo in cui eseguiremo il debug per ora, ma in

210
00:13:54,820 --> 00:13:56,820
futuro parleremo di metodi di debug più avanzati.

211
00:13:57,010 --> 00:14:04,010
Quindi aggiornerò e se iniziamo diamo un'occhiata al punteggio aumentato del giocatore 1 e puoi vedere che ne prendiamo tre

212
00:14:04,810 --> 00:14:07,470
e lo confrontiamo con il numero cinque.

213
00:14:07,540 --> 00:14:10,670
Quindi il punteggio del giocatore 1 è tre il punteggio di vittoria è cinque.

214
00:14:10,900 --> 00:14:15,250
Ma non appena cambio questo, diciamo 7 e ora clicco.

215
00:14:15,250 --> 00:14:22,330
Giocatore 1 stiamo ora confrontando il punteggio del giocatore 1 che è il numero quattro al punteggio vincente che è la

216
00:14:22,390 --> 00:14:23,160
corda sette.

217
00:14:23,440 --> 00:14:27,090
Quindi aggiorna di nuovo se inizio solo con cinque.

218
00:14:27,110 --> 00:14:28,420
Funziona bene.

219
00:14:28,780 --> 00:14:34,490
Ma se cambio questo e ora lo paragoniamo al numero e alla stringa e questo non funzionerà per

220
00:14:34,480 --> 00:14:36,680
noi perché stiamo facendo triple equals qui.

221
00:14:36,790 --> 00:14:40,590
Quindi potremmo fare il doppio dei pari ma sai che non ne sono un fan.

222
00:14:40,610 --> 00:14:45,790
Quindi quello che faremo invece è scendere qui e prendere questo e mettere quel valore e trasformarlo

223
00:14:45,790 --> 00:14:46,670
in una stringa.

224
00:14:46,780 --> 00:14:54,730
il numero e poi passa e metti valore che poi lo trasformerà in una stringa e stabilirà che sarà il punteggio vincente.

225
00:14:54,730 --> 00:14:57,130
Quindi conta come il capitale e

226
00:14:57,220 --> 00:14:58,020
Quindi eravamo freschi.

227
00:14:58,020 --> 00:15:02,210
Ora funziona perfettamente.

228
00:15:02,760 --> 00:15:11,120
Arriviamo alle cinque, ma se cambiamo anche questo per il nostro gioco è finito alle 2.

229
00:15:11,230 --> 00:15:15,790
C'è un piccolo problema che dobbiamo concentrarci su quale è se stiamo giocando a un gioco a cinque, che è quello

230
00:15:15,790 --> 00:15:17,000
che abbiamo iniziato a fare.

231
00:15:17,170 --> 00:15:22,310
E se deciderò a metà strada di voler cambiare il punteggio vincente al punteggio massimo.

232
00:15:22,390 --> 00:15:27,160
lo gestisce molto bene, perché se lo cambio ora stiamo giocando solo a tre.

233
00:15:27,160 --> 00:15:28,920
Il nostro codice adesso non

234
00:15:28,960 --> 00:15:30,630
Abbiamo due diversi modi di gestirlo.

235
00:15:30,640 --> 00:15:34,610
Il primo sta ripristinando il punteggio e tutto torna a zero.

236
00:15:34,880 --> 00:15:37,790
E l'altro continua a giocare fino a cinque.

237
00:15:38,120 --> 00:15:43,010
Ma quello che sta realmente accadendo è che giocheremo a tre, ma ne abbiamo già passati tre.

238
00:15:43,300 --> 00:15:48,160
Quindi, dato che lo abbiamo già passato, il nostro codice non funziona più perché stiamo mentendo, ma

239
00:15:48,160 --> 00:15:51,390
è solo il controllo che il giocatore segna uguale al punteggio vincente.

240
00:15:51,400 --> 00:15:53,790
Non sta controllando se è maggiore del punteggio vincente.

241
00:15:54,040 --> 00:15:55,170
Quindi se potessimo cambiarlo.

242
00:15:55,180 --> 00:16:00,830
Quindi dice che se è maggiore del punteggio vincente, la partita è finita e va bene.

243
00:16:00,970 --> 00:16:08,920
Ma penso che la soluzione migliore sia azzerare ogni volta che cambiamo il punteggio massimo perché non abbiamo mai veramente cambiato il punteggio

244
00:16:08,920 --> 00:16:12,970
massimo a metà di un gioco, comunque vorremmo iniziare il gioco e

245
00:16:12,970 --> 00:16:18,520
l'altro motivo per cui voglio che lo facciamo è un caso utile per un refactore breve.

246
00:16:18,880 --> 00:16:22,410
Quindi, quando cambiamo il punteggio, ecco il punteggio vincente.

247
00:16:22,610 --> 00:16:27,370
Vogliamo ripristinare il gioco che è la stessa logica in cui stiamo correndo qui.

248
00:16:27,430 --> 00:16:34,720
Quindi lo faremo semplicemente semplicemente copiando questo codice e creando una nuova funzione chiamata reset.

249
00:16:34,720 --> 00:16:41,780
Quindi la funzione reset si limita a inserire tutto questo codice e quindi una volta che

250
00:16:41,770 --> 00:16:44,780
l'immissione del numero cambia, eseguiremo il reset.

251
00:16:44,890 --> 00:16:48,920
Quindi vedrai che resetto qui suonando fino a cinque.

252
00:16:48,940 --> 00:16:49,960
Funziona bene

253
00:16:49,960 --> 00:16:50,950
Arriviamo alle cinque.

254
00:16:51,100 --> 00:16:58,240
Ho fatto clic su Ripristina e non abbiamo chiamato la funzione di ripristino all'interno di questo listener di eventi, quindi è necessario aggiungere la nostra

255
00:16:58,240 --> 00:16:59,840
chiamata alla funzione di ripristino.

256
00:16:59,950 --> 00:17:02,370
E ora, se aggiorniamo, arriviamo al 5.

257
00:17:02,770 --> 00:17:03,980
Faccio clic su Ripristina.

258
00:17:04,030 --> 00:17:04,970
Va tutto bene.

259
00:17:05,140 --> 00:17:11,840
E ora se sono nel bel mezzo di una partita e cambio il punteggio, ci resetta e ora giochiamo a 1.

260
00:17:11,890 --> 00:17:12,800
E funziona.

261
00:17:13,100 --> 00:17:14,220
O se cambio.

262
00:17:14,230 --> 00:17:17,710
Quindi stiamo giocando a 7.

263
00:17:17,800 --> 00:17:19,730
Ci riporta a zero.

264
00:17:20,020 --> 00:17:27,190
Quindi se decido tu sai che questo è in realtà un gioco che va a 2 invece cambia le specifiche a zero.

265
00:17:27,280 --> 00:17:29,910
E non dobbiamo preoccuparci di come gestirlo.

266
00:17:29,920 --> 00:17:31,380
Se cambiamo a metà strada.

267
00:17:31,510 --> 00:17:37,510
Quindi, quello che stiamo facendo è che il ripristino ha creato una funzione separata per

268
00:17:37,510 --> 00:17:40,900
asciugare il codice piuttosto che duplicarlo qui e qui.

269
00:17:40,960 --> 00:17:41,940
Quindi è tutto per ora.

270
00:17:41,950 --> 00:17:43,510
Questo è tutto ciò che dobbiamo fare.

271
00:17:43,630 --> 00:17:48,610
Alcuni di voi potrebbero chiedersi se questo codice è davvero il modo migliore in cui possiamo farlo.

272
00:17:48,620 --> 00:17:49,590
La risposta è no.

273
00:17:49,850 --> 00:17:54,500
E se osservi da vicino vedrai che è estremamente simile.

274
00:17:54,490 --> 00:18:00,150
È praticamente lo stesso, tranne che ne stiamo facendo uno qui e P2 qui.

275
00:18:00,160 --> 00:18:01,930
Ma ogni altra parola è la stessa.

276
00:18:02,470 --> 00:18:06,390
Quindi ci sono modi più avanzati di refactoring per rendere questo un po 'migliore.

277
00:18:06,490 --> 00:18:12,490
Ma non lo farò qui perché tutto ciò su cui voglio concentrarmi è concettualmente su come possiamo prendere in considerazione

278
00:18:12,550 --> 00:18:18,020
i relatori dell'evento javascript, la relazione dominante e l'IMO HD interattivo, ed è quello su cui voglio concentrarmi.

279
00:18:18,380 --> 00:18:23,800
Ma sappi che vedremo modi per rendere un po 'più breve il codice come questo, un

280
00:18:23,800 --> 00:18:25,010
po' più breve.

281
00:18:25,030 --> 00:18:29,860
C'è una cosa che potremmo fare qui e metterla all'ascoltatore dell'evento.

282
00:18:30,050 --> 00:18:37,150
Potremmo semplicemente sostituire l'input numerico qui con la parola questo è un cambiamento minore, ma possiamo farlo e accorciare il

283
00:18:37,150 --> 00:18:38,620
codice un po '.

284
00:18:38,740 --> 00:18:41,650
Quindi se cambio questo ora stiamo giocando a tre.

285
00:18:41,650 --> 00:18:43,870
Tutto funziona ancora esattamente allo stesso modo.

286
00:18:43,880 --> 00:18:50,480
Ho appena usato la parola chiave questo che si riferisce a qualsiasi cosa l'evento stava ascoltando su cui era il numero di input.

287
00:18:50,990 --> 00:18:52,650
Va bene così è tutto per questa lezione.

288
00:18:52,780 --> 00:18:57,280
progetto, costruiremo qualcosa di più sostanzioso e prometto che sembrerà molto meglio di questo.

289
00:18:57,280 --> 00:18:59,010
Come ho detto nel prossimo