1 00:00:02,440 --> 00:00:07,590 Quindi, per essere sicuri che il computer possa effettivamente finire quel gioco e indovinare il numero 2 00:00:07,720 --> 00:00:12,000 giusto, dobbiamo controllare cosa ha indovinato il computer e quindi terminare il gioco 3 00:00:12,010 --> 00:00:17,590 se è il numero che abbiamo inserito. Per questo, possiamo usare un altro hook React e questo è il hook useEffect. 4 00:00:17,590 --> 00:00:25,670 useEffect ti consente di eseguire effetti collaterali o in generale, ti consente di eseguire la logica dopo ogni ciclo di rendering e proprio 5 00:00:25,810 --> 00:00:31,300 come menzionato prima, se tutta questa cosa di hook di React è relativamente nuova per te, 6 00:00:31,300 --> 00:00:36,790 controlla sicuramente alcune risorse di hook di React dedicate o tuffati nel mio React Guida Completa 7 00:00:36,850 --> 00:00:42,660 Corso in cui tratterò dettagliatamente i ganci. Quindi quello che farò con useEffect ora è che lo chiamerò qui 8 00:00:42,770 --> 00:00:49,370 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 9 00:00:49,370 --> 00:00:54,950 viene eseguita dopo ogni ciclo di rendering per questo componente. Quindi ogni volta che è stato 10 00:00:54,950 --> 00:00:59,750 eseguito il rendering, questa funzione viene eseguita, dopo essere stata renderizzata, anche 11 00:00:59,750 --> 00:01:03,150 questo è importante, non prima, non simultaneamente, dopo. 12 00:01:03,200 --> 00:01:10,290 Adesso, voglio verificare se l'attuale computer immaginato è uguale alla scelta dell'utente perché ciò significa che il 13 00:01:10,290 --> 00:01:11,980 gioco è finito. 14 00:01:12,120 --> 00:01:16,830 Ora, ovviamente, non può essere il caso del primo ciclo di rendering perché escludiamo la scelta 15 00:01:16,830 --> 00:01:19,940 dell'utente dai numeri indovinabili ma dalla seconda riga in poi, 16 00:01:19,940 --> 00:01:25,790 quindi una volta che abbiamo cliccato più in basso o più in alto per la prima volta, ciò può accadere. 17 00:01:25,860 --> 00:01:29,220 Quindi, lì dentro, voglio in qualche modo 18 00:01:29,220 --> 00:01:35,970 sparare un messaggio sul gioco e inviarlo all'app. js in modo che possiamo scambiare la schermata di gioco con una 19 00:01:35,970 --> 00:01:36,890 partita sullo schermo. 20 00:01:36,970 --> 00:01:39,000 Ora non abbiamo ancora quello schermo, quindi 21 00:01:39,000 --> 00:01:45,300 aggiungiamolo, aggiungiamo un gioco sullo schermo qui nella cartella degli schermi e ne creiamo uno molto semplice per ora, lo perfezioneremo 22 00:01:45,300 --> 00:01:47,250 in seguito. Lì, avrò 23 00:01:47,250 --> 00:01:50,660 semplicemente una vista, un testo e un foglio di 24 00:01:50,700 --> 00:02:00,760 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 25 00:02:00,760 --> 00:02:04,000 restituisce un po 'di jsx alla fine. 26 00:02:04,000 --> 00:02:12,270 Qui abbiamo questi stili con il foglio di stile. creare e quindi esportiamo il gioco sullo schermo come predefinito. 27 00:02:12,370 --> 00:02:17,170 Ora, come ho detto, voglio mantenerlo semplice per ora, avrò una visione lì dentro con un testo del 28 00:02:17,170 --> 00:02:22,220 gioco finito e forniremo più dettagli lì in seguito. Per ora, qui assegnerò solo un 29 00:02:22,230 --> 00:02:28,090 po 'di stile, il mio stile di schermo che aggiungerò a questo oggetto che abbiamo passato 30 00:02:28,090 --> 00:02:28,560 al 31 00:02:28,690 --> 00:02:37,720 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 32 00:02:37,750 --> 00:02:40,410 che questo testo sia centrato per il momento. 33 00:02:40,420 --> 00:02:44,440 Ora abbiamo il gioco sullo schermo e vogliamo renderlo al posto dello 34 00:02:44,440 --> 00:02:53,050 schermo del gioco se il gioco è finito. Quindi torniamo all'app. file js e importare il gioco sullo schermo 35 00:02:53,050 --> 00:02:56,100 dalla cartella degli schermi e lì dal gioco sullo schermo 36 00:02:56,240 --> 00:03:04,240 e la domanda ora ovviamente è: qual è la nostra condizione per renderlo? Bene, alla fine, avremo comunque bisogno di un'informazione 37 00:03:04,390 --> 00:03:07,000 aggiuntiva e questo è 38 00:03:07,000 --> 00:03:12,570 il numero di round necessari al computer per finire il gioco. 39 00:03:12,700 --> 00:03:18,720 Quindi una cosa che voglio memorizzare qui nel componente dell'app è un altro stato che gestisco e che 40 00:03:18,730 --> 00:03:24,580 è il numero di round necessari per terminare che è inizialmente zero perché non abbiamo ancora iniziato 41 00:03:24,580 --> 00:03:26,120 il gioco e chiamerò 42 00:03:26,260 --> 00:03:31,540 questo round di ipotesi e imposta i giri di ipotesi e puoi nominarlo come preferisci. 43 00:03:31,540 --> 00:03:34,130 Ora l'obiettivo è impostare questo al termine del gioco. 44 00:03:34,140 --> 00:03:38,230 Quindi, aggiungerò anche un'altra funzione qui al componente dell'app, game 45 00:03:38,230 --> 00:03:45,790 over handler e lì, voglio ottenere il mio numero di round come argomento, quindi mi aspetto di ottenerlo qui 46 00:03:45,790 --> 00:03:50,010 in modo da poter chiamare set round di ipotesi al 47 00:03:50,020 --> 00:03:56,440 mio numero di round sono arrivato qui. Ora il game over handler dovrebbe essere attivato dalla schermata di gioco ovviamente. 48 00:03:56,560 --> 00:04:01,390 Quindi qui sullo schermo del gioco, voglio passare un puntello che chiamerò su GameOver, suona come un nome 49 00:04:01,420 --> 00:04:06,430 adatto che può essere chiamato dall'interno della schermata di gioco o che contiene un riferimento di funzione che può 50 00:04:06,430 --> 00:04:10,960 quindi essere chiamato dall'interno del La schermata di gioco e il riferimento alla funzione sono ovviamente 51 00:04:10,960 --> 00:04:13,600 un riferimento a questo gioco rispetto alla funzione gestore. 52 00:04:13,600 --> 00:04:19,450 Quindi, all'interno della schermata di gioco, ora possiamo usare il puntello onGameOver per eseguire questa funzione e 53 00:04:19,450 --> 00:04:22,720 passare il numero di round che il computer ha impiegato 54 00:04:22,720 --> 00:04:29,460 per indovinare il nostro numero, quindi impostiamo questo numero di round qui, memorizziamo nel nostro stato di round di ipotesi e 55 00:04:29,470 --> 00:04:37,480 ora nel componente dell'app, sappiamo che se indovinare i round è zero, il gioco non è ancora iniziato o è in esecuzione, se è maggiore 56 00:04:37,480 --> 00:04:40,560 di zero, il gioco over handler viene eseguito e 57 00:04:40,720 --> 00:04:41,970 il gioco termina. 58 00:04:41,980 --> 00:04:43,840 Quindi vogliamo mostrare il gioco sullo 59 00:04:43,870 --> 00:04:46,490 schermo se indovinare i round è maggiore di zero. 60 00:04:46,540 --> 00:04:52,180 A proposito, se iniziamo un nuovo gioco, voglio anche azzerare i miei round di ipotesi perché se inizia un nuovo 61 00:04:52,180 --> 00:04:52,570 gioco, 62 00:04:52,570 --> 00:04:56,350 vogliamo reimpostare il numero di round che il computer ha portato a 0. 63 00:04:56,470 --> 00:04:58,600 Quindi, se è maggiore di zero, il 64 00:04:58,630 --> 00:05:02,110 gioco è finito, quindi in quel caso, voglio mostrare il gioco sullo schermo. 65 00:05:02,110 --> 00:05:07,540 Quindi qui se controllo se abbiamo un numero utente, nel qual caso mostro la schermata di 66 00:05:07,960 --> 00:05:13,110 gioco, è corretto solo se indovinare i round è più piccolo o uguale a zero, 67 00:05:13,120 --> 00:05:16,780 più piccolo non è possibile ma ancora, possiamo verificarlo. 68 00:05:16,900 --> 00:05:20,770 Quindi, se è così, allora sappiamo che il gioco è sicuramente 69 00:05:20,770 --> 00:05:28,650 in esecuzione, altrimenti se indoviniamo i round è maggiore di zero, allora sappiamo che il gioco è finito e quindi il contenuto 70 00:05:28,650 --> 00:05:31,960 sarà uguale al gioco sullo schermo, in questo 71 00:05:31,980 --> 00:05:37,160 momento è solo un componente come questo senza oggetti di scena in cui passiamo. 72 00:05:37,180 --> 00:05:43,270 Quindi ora abbiamo una condizione in cui eseguiamo il rendering del gioco sullo schermo, tutto ciò che ora dobbiamo fare, dobbiamo 73 00:05:43,270 --> 00:05:49,330 usare il Prop onGameOver qui nella nostra schermata di gioco per infine chiamare questa funzione e inoltrare il numero di 74 00:05:49,330 --> 00:05:51,010 round al componente dell'app . 75 00:05:51,820 --> 00:05:59,510 Quindi nella schermata di gioco, se useEffect qui determina che è stata fatta la scelta giusta, è stata fatta la giusta ipotesi 76 00:05:59,530 --> 00:06:07,120 e quindi il gioco è finito, quindi qui, voglio chiamare oggetti di scena su GameOver come funzione e inoltrare la quantità 77 00:06:07,240 --> 00:06:14,380 di round ha preso il computer per indovinare il nostro risultato o la nostra scelta e questo è quindi 78 00:06:14,410 --> 00:06:22,750 un altro stato che dobbiamo gestire qui nella schermata di gioco. Abbiamo i nostri round e set round e inizialmente, cioè zero, 79 00:06:22,810 --> 00:06:32,280 quando questo componente viene creato per la prima volta, questo è ovviamente zero e round è quindi ora ciò che inoltro qui perché è un 80 00:06:32,290 --> 00:06:37,390 numero che incrementeremo ad ogni ipotesi perché nel prossimo gestore di ipotesi, se stiamo 81 00:06:37,390 --> 00:06:43,510 generando un'ipotesi successiva, oltre a impostare tale ipotesi qui nel nostro stato, ovviamente voglio anche impostare 82 00:06:43,540 --> 00:06:51,630 i miei round e lì uso il modulo di funzione in cui ottengo i miei round attuali e restituisco i round 83 00:06:51,760 --> 00:06:53,330 attuali più uno. 84 00:06:53,380 --> 00:06:59,560 Quindi ne aggiungo uno al numero attuale di round che immagazzino nel mio stato, in modo che il nuovo stato sia un 85 00:06:59,560 --> 00:07:05,930 round vecchio più uno perché è iniziato un nuovo round. Quindi, con questo, stiamo gestendo la quantità di round e stiamo 86 00:07:05,930 --> 00:07:12,530 usando questo come condizione nel componente dell'app per rendere il gioco sullo schermo e nella schermata del gioco, controlliamo se il gioco è 87 00:07:12,740 --> 00:07:17,480 qui in usoEffetto e in questo momento , lo facciamo ogni volta che questo componente viene eseguito 88 00:07:17,490 --> 00:07:18,690 nuovamente il rendering. 89 00:07:19,010 --> 00:07:26,240 Ora potremmo farlo, ma possiamo anche semplicemente essere più onesti o più diretti riguardo alle dipendenze di questo effetto ed 90 00:07:26,270 --> 00:07:31,640 è qualcosa che puoi essere o che puoi fare aggiungendo un secondo argomento per usareEffect, 91 00:07:31,880 --> 00:07:37,550 il primo argomento è la funzione che dovrebbe eseguire dopo il rendering il componente, secondo argomento 92 00:07:37,560 --> 00:07:41,630 che hai passato a useEffect è una matrice di dipendenze 93 00:07:41,630 --> 00:07:47,690 di questa funzione e qui devi specificare qualsiasi valore che provenga dall'esterno di questa funzione di effetto. 94 00:07:47,690 --> 00:07:53,660 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 95 00:07:54,000 --> 00:07:57,260 un tale valore cambia, questo effetto si ripete, guai ogni volta che un'attività viene 96 00:07:57,290 --> 00:08:03,380 cambiata dopo un ciclo di rendering, l'effetto si ripete Dovrei dire . Se si è verificato un ciclo di rendering e 97 00:08:03,380 --> 00:08:06,840 i valori specificati qui sono ancora gli stessi del ciclo 98 00:08:06,860 --> 00:08:11,300 di rendering precedente, l'effetto non verrà eseguito nuovamente, quindi l'effetto verrà eseguito nuovamente 99 00:08:11,390 --> 00:08:17,120 solo se una delle nostre dipendenze è cambiata. Ora, come ho detto, puntelli scelta dell'utente e 100 00:08:17,120 --> 00:08:24,230 puntelli su GameOver sono tutte le dipendenze e per prendersi cura di queste, userò una moderna sintassi Javascript in cui 101 00:08:24,320 --> 00:08:32,720 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 102 00:08:32,720 --> 00:08:33,400 la 103 00:08:33,440 --> 00:08:39,500 sintassi potrebbe sembrare strana ma è come la ristrutturazione dell'array, solo per gli oggetti, stiamo estraendo queste 104 00:08:39,500 --> 00:08:45,860 proprietà, quindi questi nomi di proprietà da questo oggetto oggetti di scena e li memorizziamo in costanti con 105 00:08:45,860 --> 00:08:53,930 nomi uguali in modo che qui ora possiamo semplicemente usare la scelta dell'utente e solo uso onGameOver poiché ora abbiamo questi valori memorizzati 106 00:08:53,930 --> 00:09:00,350 in costanti con quel nome estratte dai puntelli e lo sto facendo perché ora possiamo aggiungere la scelta 107 00:09:00,350 --> 00:09:04,340 dell'utente e onGameOver come dipendenze in questo elenco, altrimenti dovremmo aggiungere 108 00:09:04,340 --> 00:09:10,370 puntelli qui e che in realtà cambia ogni volta che cambia il componente padre e quindi non 109 00:09:10,420 --> 00:09:11,990 è un buon controllo. 110 00:09:12,050 --> 00:09:16,430 Questo è un controllo migliore perché ora ci assicuriamo che se qualcos'altro nei props cambia, non ci interessa, solo se 111 00:09:16,430 --> 00:09:23,300 uno di questi due valori cambia, allora questo effetto dovrebbe essere eseguito di nuovo. Ora con questo, abbiamo il nostro controllo sul 112 00:09:23,300 --> 00:09:28,280 posto che dovrebbe portare alla presentazione del gioco sullo schermo se il 113 00:09:28,280 --> 00:09:31,530 computer ha indovinato i nostri numeri, quindi 114 00:09:31,670 --> 00:09:42,580 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, 115 00:09:42,580 --> 00:09:43,990 lascia che ti 116 00:09:43,990 --> 00:09:46,710 mostri anche come appare l'avviso quando sono su 117 00:09:46,750 --> 00:09:50,280 Android, è questo avviso Android predefinito. Così è stato, quindi ovviamente dovrebbe 118 00:09:50,290 --> 00:09:53,170 essere maggiore, dovrebbe essere ancora maggiore, ora dovrebbe essere inferiore, 119 00:09:53,200 --> 00:09:58,780 dovrebbe essere inferiore, dovrebbe essere maggiore, dovrebbe essere inferiore, dovrebbe essere inferiore, dovrebbe essere maggiore, dovrebbe essere maggiore, il 120 00:09:58,780 --> 00:09:59,780 il gioco è 121 00:09:59,830 --> 00:10:00,490 finito. 122 00:10:00,580 --> 00:10:05,590 Sembra buono, probabilmente l'ipotesi era 32, avrebbe senso per quanto riguarda la sequenza di numeri che 123 00:10:05,590 --> 00:10:08,800 avevamo qui e quindi, questa uscita ha senso qui.