Quindi ora abbiamo due cose diverse su cui possiamo concentrarci.
Il primo sta cambiando il display qui per essere verde sul giocatore vincente e quello è piuttosto
semplice.
E il secondo sta facendo funzionare il pulsante di reset in modo che possiamo resettare e giocare di nuovo.
Quindi iniziamo con il cambio colore e lo farò definendo una classe in un file CSSA.
Quindi ho bisogno di creare un file C S S e chiamerò quel segnapunti.
C Ss quindi collegherò ad esso invece del mio segnapunti per file HDMI Dotsie SS e salvo.
chiamerò solo inverno e dirò che il colore è verde e questo è tutto ciò di cui abbiamo bisogno e che salveremo.
Poi andrò al mio file CSSA e definirò una classe e la
E solo per controllare che assomigli al modo in cui voglio.
Aggiungiamolo allo span, quindi diremo che è uguale alla classe e gli daremo una classe di vincitori per il
display del giocatore 1 fin dall'inizio.
E se aggiorno, puoi vedere che otteniamo un 0 verde.
Questo è esattamente ciò che vogliamo come incremento.
Ovviamente vogliamo che inizi come nero e aggiunga solo la classe.
Quando il gioco è finito, dobbiamo tornare al nostro javascript e sbarazzarci di questo.
Quindi torna al nero.
Vai alla nostra javascript ora.
Quindi inizieremo solo per il giocatore 1 e dobbiamo verificare se il punteggio del giocatore 1 è uguale al punteggio vincente.
Ciò significa che il giocatore uno ha vinto.
Quindi qui aggiungeremo all'elenco delle classi di visualizzazione del lettore 1.
Stiamo per aggiungere il vincitore della classe e questo è tutto quello che dobbiamo fare.
Quindi, se aggiorniamo, vedrai aumentare il punteggio del giocatore 1 e arrivare a 5.
Quella classe è stata aggiunta.
Quindi se diamo un'occhiata qui lo ispezionerò.
Non esiste una classe e continuo ad aumentare fino a raggiungere il 5.
Presta attenzione qui dentro e otteniamo il vincitore della classe pari al vincitore Quando arriviamo a 5.
Quindi faremo la stessa cosa per Player 2.
Quindi se il giocatore due segna il punteggio vincente cambierà il giocatore da mostrare.
Controlliamo l'incremento a 5.
Grande.
Tutto sembra funzionare bene.
Quindi il prossimo pezzo sta facendo funzionare il pulsante di reset adesso.
Se perdiamo il gioco, è sempre vero.
Non c'è modo di cambiare gioco.
Quindi facendo clic sul pulsante di ripristino è necessario attivare alcune righe di codice diverse.
Il primo che vuoi cambiare.
Il punteggio del giocatore 1 e il giocatore tornano a zero.
Vogliamo cambiare i valori qui visualizzati nel display del player 1 e il player da
mostrare come zero e vogliamo rimuovere questa classe verde dall'elemento in cui si trova.
E poi l'ultima cosa è che dobbiamo assicurarci che il gioco finisca per essere falso in modo che il nostro
codice e qui possa essere eseguito di nuovo.
Quindi la prima cosa che dobbiamo selezionare è il pulsante che abbiamo dato a id uguale reset.
Quindi dobbiamo andare qui e selezionarlo.
Quindi lo farò con gli altri pulsanti finora.
Il pulsante di reset equivale al punto del documento e faremo un altro elemento get per id e questa volta l'ID viene resettato
e salverà e solo per verificare che funzioni.
Fai un registro costante.
Ripristina il pulsante di ripristino e aggiorna.
Se guardiamo nella nostra console otteniamo il nostro pulsante corretto.
È stato cancellato è stato registrato.
OK, quindi dovremmo iniziare aggiungendo il nostro listener di eventi per un clic su quel pulsante di reset in
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
quel reset di registro cliccato solo per assicurarsi che funzioni e lì andiamo il nostro pulsante di reset è stato cliccato.
Quindi la logica però, come abbiamo discusso, dobbiamo impostare.
Il punteggio del giocatore 1 e il giocatore tornano a zero.
Quindi è abbastanza semplice.
Il punteggio del giocatore 1 è pari a zero.
Ma se corro questo ora dove cambio solo il punteggio del giocatore 1 nel giocatore per segnare a zero e incrementare in modo che
il giocatore uno vince e quindi fare clic su Ripristina.
Nulla sembra accadere ed è perché cambiamo solo il punteggio in javascript.
Non abbiamo mai aggiornato i punteggi sulla pagina, quindi quelle sono le variabili di visualizzazione P1 e P2 che
dobbiamo aggiornare.
Quindi vorremmo fare un contenuto del testo visualizzato e possiamo semplicemente azzerarlo.
Potremmo anche impostarlo per essere 1 punteggio.
Dovrebbero essere entrambi zero.
Quindi la stessa cosa Pete per visualizzare il contenuto del testo è zero.
Se aggiorniamo ora e arriviamo a 5.
Entrambi tornano a zero.
Quindi facciamo un gioco più vicino.
E fare clic su Ripristina entrambi tornare a zero.
Avanti, rimuoviamo la clausola del vincitore.
Lo farà in modo semplice rimuovendo la classe del vincitore da entrambi.
Quindi non controlleremo nemmeno quale dei due ha.
Lo rimuoveremo da entrambi.
È solo questione di un display.
Le liste di classe rimuovono il vincitore.
In tal modo si eliminerà la clausola e lo farà anche su display.
Quindi, qualunque ne abbia uno, non importa perché lo stiamo rimuovendo da entrambi.
Quindi ora se giochiamo abbiamo un vincitore.
Faccio clic su Ripristina.
Entrambi tornano solo a un semplice testo vuoto.
Ma come puoi vedere, arrivo a cinque.
Ho fatto clic sul pulsante di reset ancora non funzionano.
E questo perché il game over è ancora vero.
E così nessuno del nostro codice invece di questi eventi verrà eseguito.
Quindi l'ultima cosa che dobbiamo fare è impostare.
Il gioco torna a falso e questo dovrebbe permetterci di continuare a giocare.
Quindi aggiornerò i incrementali.
Finiamo un gioco.
Eccoci.
Non posso più suonare.
Clicco su reset e ora il game over torna a false e posso giocare di nuovo e poi continuare.
Quindi questa è la funzionalità principale qui.
Abbiamo quasi fatto tutto, l'ultima cosa è ottenere il numero di gioco o il punteggio vincente
come variabile.
Quindi non sono sempre solo le cinque.
Quindi abbiamo questo input e vogliamo usare questo in modo che quando cambio questo a sette, questo dice di
giocare a 7 e il nostro massimo o il nostro punteggio di vincita è sette anziché cinque.
Quindi abbiamo qualche passo per arrivarci.
La prima cosa che dobbiamo fare è selezionare questo input come puoi vedere abbiamo il tipo di input uguale al numero.
È l'unico input sulla pagina.
Quindi non dobbiamo necessariamente dargli un ID o altro.
Quindi ho intenzione di andare qui e basta selezionarlo con i miei altri selettori var.
Chiamiamolo come input non equivale al documento e ci sono molti modi per farlo documentare
l'input del selettore di query.
Potremmo anche specificare solo dove.
Il tipo è uguale al numero perché potrebbero esserci altri input.
Nel nostro caso lo terrò semplice.
C'è solo un input.
Quindi funzionerà bene.
OK.
Quindi abbiamo selezionato quell'input.
Quindi ora aggiungiamo un evento.
Quindi quello che vogliamo succedere è che ogni volta che questo cambia il valore o quel numero cambia, vogliamo che
questo si aggiorni e vogliamo che anche la variabile del punteggio vincente si aggiorni.
Quindi quello che dobbiamo fare è aggiungere un evento.
Quindi andremo a intorpidire e mettere Dot ha avuto un evento Lessner click, fallo qui in questo modo.
Funzione e tutti fanno un avviso.
clic sull'input e vedrai che in realtà un click listener non è lo strumento migliore per questo lavoro.
Fai
Perché sì possiamo cambiare il valore con un clic come ho fatto lì.
Ma posso anche premere delete e digitare un numero me stesso e nessun evento è stato licenziato perché non dovevo fare clic.
Quindi se uso i piccoli pulsanti qui si attiva un evento rapido.
Altrimenti, se uso la mia tastiera, non riceviamo un evento rapido.
Quindi c'è un altro tipo di evento che è molto meglio in questo caso che si chiama cambiamento.
Quindi un evento di modifica verrà eseguito ogni volta che il valore cambia e non importa in che modo tale valore è cambiato.
Se era perché ho cliccato o premuto il tasto di cancellazione.
Quindi, in effetti, cambiamo l'avviso qui per dire cambiato l'input e poi aggiorniamo.
E se clicco qui per cambiarlo mi dice che hai cambiato l'input.
Ma se cancello e scrivo un numero che non comporta il clic, mi dice anche che
cambio l'input, quindi è fantastico.
Questo è l'evento in cui vogliamo utilizzare l'evento change ogni volta che il valore cambia, vogliamo aggiornare questo
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
nuovo punteggio di vincita.
Spero che questo non sia il nostro vero punteggio vincente.
Decisamente lungo gioco di forbici di carta rock.
Quindi la prima cosa è aggiornare questo valore qui.
Quindi, proprio come prima, dobbiamo selezionarlo, che è un paragrafo.
Quindi dobbiamo selezionare il nostro paragrafo e farò solo un paragrafo VAR uguale al documento che interroghi il tag
di selezione.
E poi in questo rapido evento cambieremo solo quel contenuto di testo e inizieremo semplicemente cambiandolo
per dire clic o diciamo che il valore è cambiato.
Proprio così e aggiorna.
Ora se cambio il valore che il paragrafo cambia per dire che il valore è cambiato, ma questo è
lo stesso problema che abbiamo incontrato prima con l'H-1, non vogliamo modificare l'intero paragrafo.
Vogliamo solo cambiare questa piccola parte.
Quindi quello che vogliamo usare è in realtà un altro intervallo.
Quindi torneremo e aggiungeremo un intervallo attorno al numero.
E questo è un uso perfetto per una spanna in cui ancora una volta possiamo usarlo per colpire solo una
piccola parte di un elemento, non l'intera cosa.
E stavolta non ho intenzione di dargli un'idea, solo per mostrarti un altro modo di selezionarlo.
Quindi ricorda che è un intervallo invece di un paragrafo.
Ed è l'unico come quello sulla nostra pagina.
Quindi torneremo.
Quindi, piuttosto che selezionare il paragrafo, creiamo una nuova variabile e la chiameremo visualizzazione del punteggio vincente
e sarà selettore di query di documenti.
Ma piuttosto che span perché ci sono altri span nella pagina vogliamo selezionare span all'interno
dei paragrafi.
Quindi questo è tutto ciò che dobbiamo scrivere.
Spazio P
Span.
E salveremo.
E ora andiamo avanti e aggiorniamo il punteggio vincente visualizzato qui invece del paragrafo.
Quindi il punteggio vincente viene visualizzato in questo modo.
E non sarà ancora perfetto.
Si aggiornerà solo il valore ogni volta, ma almeno non si sta aggiornando l'intero paragrafo.
per visualizzare il numero che si trova all'interno dell'ingresso in modo che i valori siano sincronizzati insieme.
Quindi il prossimo passo è farlo aggiornare
Quindi non abbiamo effettivamente visto come otteniamo i dati da un input.
Come otteniamo il valore corrente.
Ti mostrerò qui selezionando l'input.
Quindi documentate il selettore di query e lo faremo nell'input della console e io lo salverò su una
variabile, quindi chiamatelo var input document taqueria selezionate il vostro input e poi faremo un
input daat value.
Quindi quel valore sarà una stringa di ciò che è contenuto in questo input qualunque sia il valore.
Quindi se cambio questo a 7 e eseguo nuovamente il codice ottengo 7.
Se lo faccio un numero enorme e questa volta lo faccio di nuovo, riflette qualunque valore si trovi all'interno di
questo input.
Quindi faremo uso di ciò cambiando questo invece del valore della stringa modificato.
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
visualizzare il contenuto del testo.
Quindi aggiorniamo e aggiorno questo e ora puoi sincronizzarli insieme.
questo da uno a tre, il mio punteggio di gioco o quello del punteggio vincente vengono aggiornati anche da 1 a 3.
Così, mentre aggiorno
Quindi, ovviamente, non stiamo giocando a 123.
Stiamo ancora giocando a cinque.
E questo perché la nostra logica non riflette questo nuovo valore di input e tutto ciò che riflette è il
nostro originale punteggio di 5.
Quindi vogliamo anche cambiare qui il punteggio vincente per essere uguale al valore di input numb e salvare.
E ora proviamo a cambiare questo, quindi stiamo giocando a tre e clicchiamo e noteremo
un comportamento strano.
Quindi non si è nemmeno fermato alle cinque.
Continua solo per sempre.
Quindi questo è un bug divertente che ha a che fare con diversi tipi di stringhe e numeri di dati e confrontandoli
con i doppi uguali contro i tre uguali.
Quindi, per arrivare a fondo, facciamo degli svantaggi. registrazione.
Quindi sappiamo che il punto cruciale di tutto questo è questa linea qui o questa linea qui dove stiamo controllando se il giocatore ne
ha uno se il punteggio del giocatore è uguale al punteggio vincente.
Questo è quando abbiamo impostato il gioco per essere vero.
E questo non sta succedendo adesso perché il gioco è finito.
Se cambiamo il punteggio.
Il game over non cambia mai.
È sempre falso.
Quindi qualcosa sta andando storto in questa linea.
Quindi facciamo un registro cancellato e faremo due cose.
Stampiamo il punteggio del giocatore 1 e stamperemo il punteggio vincente e possiamo separarli con
le virgole e li stamperemo semplicemente sulla stessa riga.
Solo una breve nota con i registri Comstock è il modo in cui eseguiremo il debug per ora, ma in
futuro parleremo di metodi di debug più avanzati.
Quindi aggiornerò e se iniziamo diamo un'occhiata al punteggio aumentato del giocatore 1 e puoi vedere che ne prendiamo tre
e lo confrontiamo con il numero cinque.
Quindi il punteggio del giocatore 1 è tre il punteggio di vittoria è cinque.
Ma non appena cambio questo, diciamo 7 e ora clicco.
Giocatore 1 stiamo ora confrontando il punteggio del giocatore 1 che è il numero quattro al punteggio vincente che è la
corda sette.
Quindi aggiorna di nuovo se inizio solo con cinque.
Funziona bene.
Ma se cambio questo e ora lo paragoniamo al numero e alla stringa e questo non funzionerà per
noi perché stiamo facendo triple equals qui.
Quindi potremmo fare il doppio dei pari ma sai che non ne sono un fan.
Quindi quello che faremo invece è scendere qui e prendere questo e mettere quel valore e trasformarlo
in una stringa.
il numero e poi passa e metti valore che poi lo trasformerà in una stringa e stabilirà che sarà il punteggio vincente.
Quindi conta come il capitale e
Quindi eravamo freschi.
Ora funziona perfettamente.
Arriviamo alle cinque, ma se cambiamo anche questo per il nostro gioco è finito alle 2.
C'è un piccolo problema che dobbiamo concentrarci su quale è se stiamo giocando a un gioco a cinque, che è quello
che abbiamo iniziato a fare.
E se deciderò a metà strada di voler cambiare il punteggio vincente al punteggio massimo.
lo gestisce molto bene, perché se lo cambio ora stiamo giocando solo a tre.
Il nostro codice adesso non
Abbiamo due diversi modi di gestirlo.
Il primo sta ripristinando il punteggio e tutto torna a zero.
E l'altro continua a giocare fino a cinque.
Ma quello che sta realmente accadendo è che giocheremo a tre, ma ne abbiamo già passati tre.
Quindi, dato che lo abbiamo già passato, il nostro codice non funziona più perché stiamo mentendo, ma
è solo il controllo che il giocatore segna uguale al punteggio vincente.
Non sta controllando se è maggiore del punteggio vincente.
Quindi se potessimo cambiarlo.
Quindi dice che se è maggiore del punteggio vincente, la partita è finita e va bene.
Ma penso che la soluzione migliore sia azzerare ogni volta che cambiamo il punteggio massimo perché non abbiamo mai veramente cambiato il punteggio
massimo a metà di un gioco, comunque vorremmo iniziare il gioco e
l'altro motivo per cui voglio che lo facciamo è un caso utile per un refactore breve.
Quindi, quando cambiamo il punteggio, ecco il punteggio vincente.
Vogliamo ripristinare il gioco che è la stessa logica in cui stiamo correndo qui.
Quindi lo faremo semplicemente semplicemente copiando questo codice e creando una nuova funzione chiamata reset.
Quindi la funzione reset si limita a inserire tutto questo codice e quindi una volta che
l'immissione del numero cambia, eseguiremo il reset.
Quindi vedrai che resetto qui suonando fino a cinque.
Funziona bene
Arriviamo alle cinque.
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
chiamata alla funzione di ripristino.
E ora, se aggiorniamo, arriviamo al 5.
Faccio clic su Ripristina.
Va tutto bene.
E ora se sono nel bel mezzo di una partita e cambio il punteggio, ci resetta e ora giochiamo a 1.
E funziona.
O se cambio.
Quindi stiamo giocando a 7.
Ci riporta a zero.
Quindi se decido tu sai che questo è in realtà un gioco che va a 2 invece cambia le specifiche a zero.
E non dobbiamo preoccuparci di come gestirlo.
Se cambiamo a metà strada.
Quindi, quello che stiamo facendo è che il ripristino ha creato una funzione separata per
asciugare il codice piuttosto che duplicarlo qui e qui.
Quindi è tutto per ora.
Questo è tutto ciò che dobbiamo fare.
Alcuni di voi potrebbero chiedersi se questo codice è davvero il modo migliore in cui possiamo farlo.
La risposta è no.
E se osservi da vicino vedrai che è estremamente simile.
È praticamente lo stesso, tranne che ne stiamo facendo uno qui e P2 qui.
Ma ogni altra parola è la stessa.
Quindi ci sono modi più avanzati di refactoring per rendere questo un po 'migliore.
Ma non lo farò qui perché tutto ciò su cui voglio concentrarmi è concettualmente su come possiamo prendere in considerazione
i relatori dell'evento javascript, la relazione dominante e l'IMO HD interattivo, ed è quello su cui voglio concentrarmi.
Ma sappi che vedremo modi per rendere un po 'più breve il codice come questo, un
po' più breve.
C'è una cosa che potremmo fare qui e metterla all'ascoltatore dell'evento.
Potremmo semplicemente sostituire l'input numerico qui con la parola questo è un cambiamento minore, ma possiamo farlo e accorciare il
codice un po '.
Quindi se cambio questo ora stiamo giocando a tre.
Tutto funziona ancora esattamente allo stesso modo.
Ho appena usato la parola chiave questo che si riferisce a qualsiasi cosa l'evento stava ascoltando su cui era il numero di input.
Va bene così è tutto per questa lezione.
progetto, costruiremo qualcosa di più sostanzioso e prometto che sembrerà molto meglio di questo.
Come ho detto nel prossimo