Ben tornato.
Quindi fino ad ora tutto ciò che abbiamo fatto in giro per gli eventi e gli ascoltatori di eventi nel dormitorio
e la relazione dominante e scaricare le lettere che abbiamo appena fatto uno di esercizi veloci che non
sono davvero molto.
E questo era solo per mostrare ai singoli pezzi come funzionavano.
Ora vedremo come si integrano tutti e creeranno un'app sostanziale.
Quindi come puoi vedere questa non è l'app più bella che sta arrivando.
qui come prendiamo eventi come selezioniamo gli elementi come scriviamo invecchiando come e come tutti quelli si incastrano.
Ci stiamo solo concentrando su come concettualmente i pezzi si incastrano insieme
Lo stile è solo extra.
A questo punto, ma nel prossimo progetto che realizziamo.
Daremo molta importanza allo styling e lo renderà piacevole.
Lo prometto.
Quindi quello che faremo è una semplice app per la registrazione dei punti.
le forbici di carta con un amico o un ping pong o un tic tac toe ed è
così stancante tenere traccia del punteggio e così difficile sapere chi sta vincendo quando questo l'app è per te come funziona.
Quindi voglio che ripensi a tutte quelle volte in cui hai giocato con
Giocatore di due giocatori 1 giocatore di punteggio da segnare.
Carichi la pagina e ci dice che stiamo giocando a cinque.
E quindi tutto ciò che facciamo è aggiungere un punto facendo clic su un pulsante.
Quindi per aggiungere un punto al giocatore 1, clicchiamo su Giocatore 1 se vogliamo aggiungere un giocatore punto per fare
clic su Giocatore 2 e poi chi arriva a cinque.
Noti che diventa verde.
E se provo a segnare ancora non posso.
Questo perché il gioco è finito.
Quindi posso ripristinare facendo clic sul pulsante di reset.
E ora un top player due totalmente spazzato e questo è ciò che non possiamo più giocare.
E quel reset rapido.
Quindi, un'altra caratteristica è che possiamo anche specificare a cosa stiamo giocando.
Quindi se vuoi avere un gioco che va fino alle 7:00 posso usare questo numero qui e poi
tutto quello che devo fare è fare un gioco più vicino e il giocatore uno si intrufola alla fine 4:53 e il gioco finisce a 7 e
il giocatore 1 diventa verde e non possiamo aggiungere altri punti e quindi possiamo resettare di nuovo.
Quindi questo è ciò che focalizzeremo sulla costruzione qui.
Quindi la prima cosa che vogliamo fare è ottenere il nostro set di file e quindi creare la struttura L del
team H e poi entreremo con javascript e far funzionare le cose.
Quindi andiamo avanti e cominciamo.
Quindi ho un vuoto che documenterò.
Sto chiamando il segnapunti dot h Timo che va ad aggiungere nel nostro boilerplate e dargli un
titolo proprio così.
Devo quindi iniziare parlando di quello che stiamo guardando qui.
Quindi questo non è H-1 H1 e lo cambieremo alla fine.
Non vogliamo che sia solo una cosa solida perché ci sono due cose dentro questo H-1 che deve essere
come il giocatore 1 che segna 2 giocatori per segnare, ma dobbiamo essere in grado di selezionarlo separatamente da questo.
Quindi vogliamo un modo per dividere questo H1 in pezzi più piccoli.
Quindi vedremo come possiamo farlo in un po '.
Quindi questo è un paragrafo a cui stai giocando.
E giochiamo giusto alle sette per iniziare.
O facciamo cinque.
Penso che come è stato.
E quindi abbiamo un input qui.
Questo è il tipo di input uguale al numero.
Quindi il tipo di input è uguale al numero e questo è tutto ciò di cui abbiamo bisogno.
E poi abbiamo il nostro primo pulsante.
Giocatore 1 o secondo pulsante giocatore 2.
E il nostro ultimo pulsante resettato.
Quindi, se aggiorniamo questa pagina e ora apriamo la nostra pagina che abbiamo creato.
Diamo un'occhiata.
Sembrano praticamente uguali.
Zoom in un po 'su questo che sembra giusto.
Ovviamente non succede niente quando clicchiamo su qualsiasi cosa.
Quindi ora entriamo nel nostro javascript in.
Quindi creerò un nuovo file che chiamerò scorekeeper J. S. e come faccio sempre o
aggiungo il mio avviso qui che è collegato.
o h t m l e includerò la mia sceneggiatura e ho intenzione di farlo in fondo qui per iniziare.
Poi andrò ai segnapunti
Quindi il tipo di script chiama javascript source equivale a scorekeeper.
Sì, proprio così.
Ora se ci aggiorniamo.
Questa è la mia versione della pagina che mi dice javascript alert connected.
Tutto ok.
Quindi abbiamo impostato la nostra posta elettronica.
Sembra grandioso.
Quello che dobbiamo fare ora è ottenere qualche codice javascript che aggiunga effettivamente alcune funzionalità.
E come sempre dobbiamo iniziare selezionando i diversi elementi.
Quindi iniziamo selezionando i pulsanti e facciamo solo il giocatore uno e il giocatore o due
pulsanti e la prima funzione su cui ci concentreremo è quando clicchiamo su uno di questi pulsanti
il ​​punteggio dovrebbe aumentare qui.
Quindi tutto quello che dobbiamo fare è iniziare selezionando quel giocatore con un pulsante e se guardiamo è solo
un pulsante che potremmo voler aggiungere in ID quindi chiameremo questo e fatto qui ne aggiungeremo uno per P2 e poi potremo aggiungine anche
uno per il reset che chiameremo reset.
Quindi abbiamo tre idee ora.
Quindi è molto più facile da selezionare.
Lo chiameremo semplicemente un pulsante VIP equivale a un selettore di query sui documenti.
Oppure potremmo ottenere l'elemento per ID.
Li mescolerò qui così il primo farà con il selettore di query P1 e poi P2.
Il pulsante sarà il punto del documento e otterremo l'elemento per ID e non abbiamo più bisogno di Octa Thorpe.
Quindi questo ci dà i due pulsanti.
nostro primo listener quando clicchiamo su questo primo pulsante avviseremo o cancelleremo quel registro.
E impostiamo il
Quindi vogliamo scrivere il pulsante P1 e aggiungere listener di eventi al clic e quindi aggiungeremo la nostra funzione qui.
E all'interno di quella funzione stiamo solo per avvisare che l'avviso ha fatto clic e questo è tutto.
Quindi, se aggiorni la nostra pagina e riprovi facendo clic su ottimo che ci dice che abbiamo selezionato correttamente e abbiamo aggiunto
il nostro listener per l'evento Click correttamente.
Il giocatore 2 però non fa nulla perché l'abbiamo aggiunto solo al pulsante 1 del giocatore.
Quindi ora parliamo di come funzionerà davvero.
dobbiamo avere una variabile chiamata punteggio del Player 1 o qualcosa che tenga traccia di quanti punti.
Quando clicco qui,
Il giocatore uno ha e clicco dovrebbe aggiungere uno al punteggio del giocatore 1 e poi l'ultima parte sta aggiornando questo
qui per riflettere il punteggio del giocatore 1.
Quindi creerò una variabile chiamiamola 1 punteggio e imposteremo zero per iniziare.
E poi tutto quello che voglio fare è quando clicchiamo, ma aggiungiamo sempre uno al punteggio del giocatore 1.
Quindi questo sarà solo il punteggio più un plus.
Proprio così.
E ci aggiorniamo e non abbiamo visto nulla perché probabilmente dovremmo cancellare quel registro.
Ha vinto il punteggio prima piuttosto che all'erta.
Diventa molto fastidioso molto velocemente se aggiorniamo ora e apri la console e il punteggio del giocatore 1 di McCook e vedi
come va.
Uno due tre quattro cinque e andrà avanti.
Quindi ci sono alcuni problemi.
Uno è che non stiamo visualizzando il punteggio qui e due dice che stiamo giocando a cinque.
E ovviamente non è così perché stiamo semplicemente incrementando quanto vogliamo.
Quindi abbiamo bisogno di avere una logica che dice se superiore a cinque game over o qualcosa del genere.
Ma iniziamo a capire come possiamo aggiornare questo H1.
Quindi quello che potremmo fare è semplicemente selezionare l'H-1 per iniziare.
Quindi chiamiamolo lontano.
H1 è uguale al documento che interroga il selettore H-1 proprio così.
E poi dentro di noi diremo solo che il contenuto del testo del punto H-1 equivale a un punteggio proprio così.
Quindi prendiamo questo e cambiamo il contenuto del testo per essere qualunque sia il punteggio che
eravamo senza registrazione.
qui bene quel tipo di lavoro, ma puoi vedere che abbiamo completamente annullato tutto ciò che era all'interno di ognuno.
E se io segnassi
Vogliamo mantenere i due e l'altro punteggio.
Vogliamo solo cambiare questo numero.
Quindi c'è un modo per farlo usando un h extra in un maschio che rende la vita molto
più facile se torniamo dal nostro segnapunti ma ogni volta che introdurremo un elemento span.
E il modo in cui lo span funzionerà è che avvolgerà solo il numero del punteggio.
Quindi, questo significa che ora possiamo ispezionarlo.
Nulla sembra che cambi e questo è il punto di una spanna.
È solo un giorno non invadente se vuoi è solo un modo per avvolgere qualcosa con qualche tag
che puoi usare successivamente o con uno stile diverso o selezionare con javascript che è esattamente
quello che faremo se cerchiamo H-1 ma proprio qui ora avere uno span speciale avvolgendo quel numero.
Quindi se selezioniamo quella span e cambiamo solo quella span avremo ancora il tĂo e la nostra spaziatura
correttamente e l'altro punteggio.
Quindi vogliamo selezionare lo span e fare di nuovo un ID qui.
Quindi span e chiameremo questo display P1 proprio così.
E ora dobbiamo andare dal nostro segnapunti J S e cambiare alcune cose.
Quindi non abbiamo più bisogno di selezionare l'H-1 per sbarazzarcene.
Selezioneremo molto più display uguale a get del documento e selezioniamo il selettore di query solo per varietà nuovamente.
Selettore di query.
E lo chiamiamo display P1 in modo tale da darci lo span e se volessimo verificare
che funzionasse.
Perché non facciamo solo un registro dei vault del concerto qui.
Vinto display solo per vedere quando cariciamo la pagina di aggiornamento dovrebbe stampare OK.
Selezionato il nostro spand correttamente.
OK.
Quindi ora quello che vogliamo fare e sbarazzarci è aggiungerne uno al punteggio.
Possiamo sbarazzarci degli altri nostri contro. Ma accedi invece di cambiare il contenuto del testo sull'intero H-1.
Vogliamo solo cambiarlo sul nostro display P1 che è questa piccola spanna proprio qui.
E se ci aggiorniamo, eccoci qui.
Quindi otteniamo che il player 1 che aggiorna il player 2 non faccia ancora nulla, ma abbiamo questa
caratteristica funzionante.
Quindi facciamo la stessa cosa per il giocatore 2.
Quindi tornerò indietro aggiungendo un altro intervallo attorno al nostro ID di intervallo zero uguale a visualizzare e quindi passare a
zero in mezzo.
Rinfreschiamo nulla dovrebbe apparire diverso ma ora abbiamo due span.
Quindi puoi vedere allora torniamo al nostro scorekeeper J us e aggiungiamo due nuove variabili.
Quindi abbiamo bisogno di mostrare lo span affinché il giocatore abbia bisogno di selezionarlo con quell'ID.
Userò di nuovo il selettore di query.
E poi abbiamo bisogno di una variabile per il giocatore del punteggio, non vogliamo che siano solo lo stesso punteggio.
Ovviamente abbiamo bisogno di due modi separati per tenere traccia dei loro valori.
Quindi la prima cosa che voglio fare è testare che il pulsante del nostro giocatore sia selezionato correttamente.
Quindi farò semplicemente un pulsante di registrazione di un concerto da concerto e vedrò cosa stamperà.
E se ci rinfreschiamo e guardiamo i contro. Puoi vedere che qualcosa è storto.
Abbiamo selezionato il pulsante un giocatore non il pulsante due giocatori.
Quindi qualcosa non va con il nostro selezionatore.
Potete vedere qui che stiamo selezionando l'elemento di id P1, che è lo stesso di quello che avevamo qui sopra.
Quindi dobbiamo selezionare P2.
Ok, adesso che ci siamo presi cura di aggiornare l'ID del pulsante P2, che è ottimo.
Ora aggiungiamo il nostro ascoltatore.
Quindi Pete per pulsante quel listener di eventi pubblicitari clic e mi piace sempre iniziare semplicemente stampando
qualcosa o avvisando qualcosa di un clic di registro P2 proprio come quello aggiornamento.
E otteniamo P2 cliccato il nostro giocatore uno funziona ancora e P2 sta eseguendo del codice.
Ora abbiamo solo bisogno di inserire il codice giusto.
Se diamo un'occhiata a ciò che abbiamo fatto per il pulsante 1 del giocatore, abbiamo bisogno che un giocatore segnerà un
incremento variabile per iniziare.
Punteggio P2 finora.
E dovrebbe iniziare anche a zero.
E poi verremo qui e cambiamo questo per ottenere il punteggio P2 plus per noi e quindi dobbiamo aggiornarlo
sul display che non abbiamo ancora selezionato.
Quindi dobbiamo anche selezionare quella estensione.
Ricorda lo span proprio qui ID del display P2.
Quindi lo faremo.
Copierà quella linea e la cambierà per visualizzare il documento P2 del selettore di Duckery
e poi cambieremo semplicemente la visualizzazione sul contenuto del testo per essere uguale al punteggio del giocatore.
Quindi diamo un'occhiata.
Clicca sul giocatore 1 che funziona ancora.
Che ne pensi del giocatore 2 che funziona pure.
OK.
Quindi non c'è fine al nostro gioco in questo momento.
Questo andrebbe avanti per sempre.
Quindi dobbiamo lavorare per aggiungere quella funzionalità.
in cui lo faremo è con una variabile che terrà traccia dello stato del nostro gioco.
E il modo
Quindi il nostro gioco ha due stati.
Il primo è lo stato normale in questo momento in cui posso fare clic su dove posso giocare.
E il secondo stato sarebbe quello che potremmo chiamare game over dove qualcuno ne ha uno.
Quindi abbiamo bisogno di due stati e possiamo usare un booleano per modellare solo quello vero o falso.
E lo chiamerò game over finora.
Game over e inizia questo falso perché game over.
Non vero all'inizio del gioco.
E poi quello che faremo aggiorneremo il gioco in modo vero o falso, a seconda che qualcuno vince.
Quindi se qualcuno arriva a cinque game ora dovrebbe essere vero e questo dovrebbe significare che non possiamo più aggiornare
il punteggio e che dobbiamo colpire reset e reset dovrebbe quindi rendere nuovamente il gioco più falso e
ricominciare tutto da capo.
Quindi lascia che ti mostri cosa intendo.
La prima cosa che vogliamo fare è aggiungere un'altra variabile.
Lo chiamerò punteggio vincente.
E sarà pari a 5.
Quindi quella variabile è ciò che compareremo con il giocatore 1 e il giocatore con il punteggio 2.
Quindi controlleremo come un giocatore 1 ha raggiunto il punteggio vincente se lui o lei lo ha fatto.
Quindi dobbiamo dire che il game over è vero.
Quindi la logica sarà simile a questa.
Avere una dichiarazione if e sembrerà che il game over non sia stato ancora raggiunto.
Quindi, se non la partita finita, ti permetteremo di aggiungere il punteggio proprio come questo.
Quando eseguo questo adesso, non noterai nulla di diverso.
Funzionerà esattamente allo stesso modo per il giocatore 1 e questo perché il game over è sempre falso.
Non cambia mai.
Quindi quando dovremmo cambiarlo per essere vero.
Bene, quando c'è un gioco finito.
E quando ciò accade è quando gli utenti segnano così quando il punteggio del giocatore 1 è uguale al punteggio vincente.
Quindi, dopo aver aggiunto uno al punteggio del giocatore 1, verificheremo se facciamo un punteggio tripla uguale al punteggio
vincente.
Quindi, se sono uguali tra loro, iniziamo con il registro di Contador.
Gioco finito.
Proprio così.
E se aggiorniamo e recensiamo il nostro Console e ho provato a cambiare questo finora questo non è vero, quindi questo
non succede mai.
Questa volta però aggiungo un giocatore, un punteggio va a cinque.
Stiamo controllando se il punteggio del giocatore 1 è uguale al punteggio vincente e qui arriviamo alla fine del gioco.
Quindi, piuttosto che cancellare il gioco di chiusura, in realtà vogliamo cambiare questo stato o ora.
Game over è vero.
noi, ti mostrerò se aggiornarlo, ci impedirà di aggiungere altro al punteggio perché il game over è vero.
Quindi ciò che questo farà per
Appare questo piccolo controllo.
Controlla.
È ancora finito il gioco.
E se è game over nessuno di questo codice viene eseguito.
Quindi proviamoci.
Arrivo a cinque e sono bloccato.
Non posso più aumentarlo.
Comunque posso andare al giocatore 2 e aumentare quel punteggio perché la nostra logica è solo per il giocatore 1.
Vogliamo andare a questo giocatore per escludere l'ascoltatore di eventi e aggiungere la stessa logica.
Quindi se non è game over allora ti permetteremo di incrementare il punteggio e aggiornare il display e quindi
dovremo anche controllare se il nuovo giocatore a segnare è uguale al punteggio vincente, quindi è game over.
Game over è vero, il che significa che l'utente né l'utente né il giocatore uno o il giocatore due possono
continuare a incrementare ulteriormente il punteggio.
Quindi controlliamo che questo funzioni aggiorna.
OK possiamo arrivare a cinque qui e abbiamo finito.
Il giocatore 2 non funziona o possiamo arrivare a cinque qui e abbiamo finito.
E il giocatore 1 non funziona neanche.