Quindi, per essere sicuri che il computer possa effettivamente finire quel gioco e indovinare il numero
giusto, dobbiamo controllare cosa ha indovinato il computer e quindi terminare il gioco
se è il numero che abbiamo inserito. Per questo, possiamo usare un altro hook React e questo è il hook useEffect.
useEffect ti consente di eseguire effetti collaterali o in generale, ti consente di eseguire la logica dopo ogni ciclo di rendering e proprio
come menzionato prima, se tutta questa cosa di hook di React è relativamente nuova per te,
controlla sicuramente alcune risorse di hook di React dedicate o tuffati nel mio React Guida Completa
Corso in cui tratterò dettagliatamente i ganci. Quindi quello che farò con useEffect ora è che lo chiamerò qui
dopo aver inizializzato il mio stato e i miei riferimenti qui e là, abbiamo una funzione, quindi useEffect prende una funzione e questa funzione di default
viene eseguita dopo ogni ciclo di rendering per questo componente. Quindi ogni volta che è stato
eseguito il rendering, questa funzione viene eseguita, dopo essere stata renderizzata, anche
questo è importante, non prima, non simultaneamente, dopo.
Adesso, voglio verificare se l'attuale computer immaginato è uguale alla scelta dell'utente perché ciò significa che il
gioco è finito.
Ora, ovviamente, non può essere il caso del primo ciclo di rendering perché escludiamo la scelta
dell'utente dai numeri indovinabili ma dalla seconda riga in poi,
quindi una volta che abbiamo cliccato più in basso o più in alto per la prima volta, ciò può accadere.
Quindi, lì dentro, voglio in qualche modo
sparare un messaggio sul gioco e inviarlo all'app. js in modo che possiamo scambiare la schermata di gioco con una
partita sullo schermo.
Ora non abbiamo ancora quello schermo, quindi
aggiungiamolo, aggiungiamo un gioco sullo schermo qui nella cartella degli schermi e ne creiamo uno molto semplice per ora, lo perfezioneremo
in seguito. Lì, avrò
semplicemente una vista, un testo e un foglio di
stile, quindi quello che normalmente importiamo da React Native e quindi abbiamo il componente di gioco sullo schermo che prende alcuni oggetti di scena e poi
restituisce un po 'di jsx alla fine.
Qui abbiamo questi stili con il foglio di stile. creare e quindi esportiamo il gioco sullo schermo come predefinito.
Ora, come ho detto, voglio mantenerlo semplice per ora, avrò una visione lì dentro con un testo del
gioco finito e forniremo più dettagli lì in seguito. Per ora, qui assegnerò solo un
po 'di stile, il mio stile di schermo che aggiungerò a questo oggetto che abbiamo passato
al
foglio di stile qui in basso, impostando flex su 1 e forse giustificando il Centro al centro e quindi allineare gli elementi al centro, in modo
che questo testo sia centrato per il momento.
Ora abbiamo il gioco sullo schermo e vogliamo renderlo al posto dello
schermo del gioco se il gioco è finito. Quindi torniamo all'app. file js e importare il gioco sullo schermo
dalla cartella degli schermi e lì dal gioco sullo schermo
e la domanda ora ovviamente è: qual è la nostra condizione per renderlo? Bene, alla fine, avremo comunque bisogno di un'informazione
aggiuntiva e questo è
il numero di round necessari al computer per finire il gioco.
Quindi una cosa che voglio memorizzare qui nel componente dell'app è un altro stato che gestisco e che
è il numero di round necessari per terminare che è inizialmente zero perché non abbiamo ancora iniziato
il gioco e chiamerò
questo round di ipotesi e imposta i giri di ipotesi e puoi nominarlo come preferisci.
Ora l'obiettivo è impostare questo al termine del gioco.
Quindi, aggiungerò anche un'altra funzione qui al componente dell'app, game
over handler e lì, voglio ottenere il mio numero di round come argomento, quindi mi aspetto di ottenerlo qui
in modo da poter chiamare set round di ipotesi al
mio numero di round sono arrivato qui. Ora il game over handler dovrebbe essere attivato dalla schermata di gioco ovviamente.
Quindi qui sullo schermo del gioco, voglio passare un puntello che chiamerò su GameOver, suona come un nome
adatto che può essere chiamato dall'interno della schermata di gioco o che contiene un riferimento di funzione che può
quindi essere chiamato dall'interno del La schermata di gioco e il riferimento alla funzione sono ovviamente
un riferimento a questo gioco rispetto alla funzione gestore.
Quindi, all'interno della schermata di gioco, ora possiamo usare il puntello onGameOver per eseguire questa funzione e
passare il numero di round che il computer ha impiegato
per indovinare il nostro numero, quindi impostiamo questo numero di round qui, memorizziamo nel nostro stato di round di ipotesi e
ora nel componente dell'app, sappiamo che se indovinare i round è zero, il gioco non è ancora iniziato o è in esecuzione, se è maggiore
di zero, il gioco over handler viene eseguito e
il gioco termina.
Quindi vogliamo mostrare il gioco sullo
schermo se indovinare i round è maggiore di zero.
A proposito, se iniziamo un nuovo gioco, voglio anche azzerare i miei round di ipotesi perché se inizia un nuovo
gioco,
vogliamo reimpostare il numero di round che il computer ha portato a 0.
Quindi, se è maggiore di zero, il
gioco è finito, quindi in quel caso, voglio mostrare il gioco sullo schermo.
Quindi qui se controllo se abbiamo un numero utente, nel qual caso mostro la schermata di
gioco, è corretto solo se indovinare i round è più piccolo o uguale a zero,
più piccolo non è possibile ma ancora, possiamo verificarlo.
Quindi, se è così, allora sappiamo che il gioco è sicuramente
in esecuzione, altrimenti se indoviniamo i round è maggiore di zero, allora sappiamo che il gioco è finito e quindi il contenuto
sarà uguale al gioco sullo schermo, in questo
momento è solo un componente come questo senza oggetti di scena in cui passiamo.
Quindi ora abbiamo una condizione in cui eseguiamo il rendering del gioco sullo schermo, tutto ciò che ora dobbiamo fare, dobbiamo
usare il Prop onGameOver qui nella nostra schermata di gioco per infine chiamare questa funzione e inoltrare il numero di
round al componente dell'app .
Quindi nella schermata di gioco, se useEffect qui determina che è stata fatta la scelta giusta, è stata fatta la giusta ipotesi
e quindi il gioco è finito, quindi qui, voglio chiamare oggetti di scena su GameOver come funzione e inoltrare la quantità
di round ha preso il computer per indovinare il nostro risultato o la nostra scelta e questo è quindi
un altro stato che dobbiamo gestire qui nella schermata di gioco. Abbiamo i nostri round e set round e inizialmente, cioè zero,
quando questo componente viene creato per la prima volta, questo è ovviamente zero e round è quindi ora ciò che inoltro qui perché è un
numero che incrementeremo ad ogni ipotesi perché nel prossimo gestore di ipotesi, se stiamo
generando un'ipotesi successiva, oltre a impostare tale ipotesi qui nel nostro stato, ovviamente voglio anche impostare
i miei round e lì uso il modulo di funzione in cui ottengo i miei round attuali e restituisco i round
attuali più uno.
Quindi ne aggiungo uno al numero attuale di round che immagazzino nel mio stato, in modo che il nuovo stato sia un
round vecchio più uno perché è iniziato un nuovo round. Quindi, con questo, stiamo gestendo la quantità di round e stiamo
usando questo come condizione nel componente dell'app per rendere il gioco sullo schermo e nella schermata del gioco, controlliamo se il gioco è
qui in usoEffetto e in questo momento , lo facciamo ogni volta che questo componente viene eseguito
nuovamente il rendering.
Ora potremmo farlo, ma possiamo anche semplicemente essere più onesti o più diretti riguardo alle dipendenze di questo effetto ed
è qualcosa che puoi essere o che puoi fare aggiungendo un secondo argomento per usareEffect,
il primo argomento è la funzione che dovrebbe eseguire dopo il rendering il componente, secondo argomento
che hai passato a useEffect è una matrice di dipendenze
di questa funzione e qui devi specificare qualsiasi valore che provenga dall'esterno di questa funzione di effetto.
Quindi nel nostro caso, questa sarebbe la supposizione attuale e che sarebbe la scelta dell'utente e gli oggetti di scena su GameOver e ogni volta che
un tale valore cambia, questo effetto si ripete, guai ogni volta che un'attività viene
cambiata dopo un ciclo di rendering, l'effetto si ripete Dovrei dire . Se si è verificato un ciclo di rendering e
i valori specificati qui sono ancora gli stessi del ciclo
di rendering precedente, l'effetto non verrà eseguito nuovamente, quindi l'effetto verrà eseguito nuovamente
solo se una delle nostre dipendenze è cambiata. Ora, come ho detto, puntelli scelta dell'utente e
puntelli su GameOver sono tutte le dipendenze e per prendersi cura di queste, userò una moderna sintassi Javascript in cui
uso la destrutturazione degli oggetti per distruggere i miei oggetti di scena e ottenere la scelta dell'utente e su GameOver fuori di essi, questo
la
sintassi potrebbe sembrare strana ma è come la ristrutturazione dell'array, solo per gli oggetti, stiamo estraendo queste
proprietà, quindi questi nomi di proprietà da questo oggetto oggetti di scena e li memorizziamo in costanti con
nomi uguali in modo che qui ora possiamo semplicemente usare la scelta dell'utente e solo uso onGameOver poiché ora abbiamo questi valori memorizzati
in costanti con quel nome estratte dai puntelli e lo sto facendo perché ora possiamo aggiungere la scelta
dell'utente e onGameOver come dipendenze in questo elenco, altrimenti dovremmo aggiungere
puntelli qui e che in realtà cambia ogni volta che cambia il componente padre e quindi non
è un buon controllo.
Questo è un controllo migliore perché ora ci assicuriamo che se qualcos'altro nei props cambia, non ci interessa, solo se
uno di questi due valori cambia, allora questo effetto dovrebbe essere eseguito di nuovo. Ora con questo, abbiamo il nostro controllo sul
posto che dovrebbe portare alla presentazione del gioco sullo schermo se il
computer ha indovinato i nostri numeri, quindi
ora salviamo questo e proviamo, forse qui su Android per mescolare le cose. Quindi inserirò un numero qui, 32, confermerò, avvierò un gioco ed è 2, quindi dovrebbe essere maggiore,
lascia che ti
mostri anche come appare l'avviso quando sono su
Android, è questo avviso Android predefinito. Così è stato, quindi ovviamente dovrebbe
essere maggiore, dovrebbe essere ancora maggiore, ora dovrebbe essere inferiore,
dovrebbe essere inferiore, dovrebbe essere maggiore, dovrebbe essere inferiore, dovrebbe essere inferiore, dovrebbe essere maggiore, dovrebbe essere maggiore, il
il gioco è
finito.
Sembra buono, probabilmente l'ipotesi era 32, avrebbe senso per quanto riguarda la sequenza di numeri che
avevamo qui e quindi, questa uscita ha senso qui.