Donc, pour nous assurer que l'ordinateur peut réellement terminer ce jeu et deviner le bon nombre,
nous devons vérifier ce que l'ordinateur a deviné, puis terminer le jeu s'il
s'agit du numéro que nous avons entré. Pour cela, nous pouvons utiliser un autre crochet React et c'est le crochet useEffect.
useEffect vous permet d'exécuter des effets secondaires ou en général, vous permet d'exécuter la logique après chaque cycle de rendu et
comme mentionné précédemment, si toute cette chose React hooks est relativement nouvelle pour vous, consultez
certainement quelques ressources dédiées React hooks ou plongez dans mon React Complete Guide Course
où je couvre les crochets en détail. Donc, ce que je vais faire avec useEffect maintenant, c'est que je
l'appellerai ici après avoir initialisé mon état et mes références ici et là, nous avons une fonction, donc useEffect prend une fonction et cette fonction s'exécute
par défaut après chaque cycle de rendu pour ce composant. Donc, chaque fois qu'elle a
été rendue, cette fonction est exécutée, après avoir été rendue, c'est
aussi important, pas avant, pas simultanément, après.
Maintenant, là-dedans, je veux vérifier si la supposition actuelle faite par l'ordinateur est égale au choix de l'utilisateur, car cela signifie
que le jeu est terminé.
Bien sûr, cela ne peut pas être le cas pour le premier cycle de rendu, car nous
excluons le choix de l'utilisateur des nombres devinables, mais à partir
de la deuxième ligne, donc une fois que nous avons cliqué plus ou moins pour la première fois, cela peut arriver.
Donc, là-dedans, je veux ensuite déclencher un
message de fin de partie et l'envoyer à l'application. js afin que nous puissions échanger l'écran de jeu pour un jeu
sur écran.
Maintenant, nous n'avons pas encore cet écran,
alors ajoutons-le, ajoutons un jeu sur l'écran ici dans le dossier screens et créons-en un très simple pour l'instant, nous le
peaufinerons plus tard. Là-bas, j'aurai
simplement une vue et un texte et une feuille
de style, donc ce que nous importons généralement de React Native et que nous avons ensuite le composant game over screen là-dedans qui prend quelques accessoires
puis retourne du jsx à la fin.
Ici, nous avons ces styles avec la feuille de style. créer et ensuite nous exportons le jeu sur l'écran par défaut.
Maintenant là-dedans comme je l'ai dit, je veux garder ça simple pour l'instant, j'aurai juste une vue là-dedans avec un texte du
jeu terminé et nous publierons plus de détails là-bas plus tard. Pour l'instant, ici je vais simplement
assigner un style, mon style d'écran que j'ajouterai à cet objet que nous avons passé à
la
feuille de style ici en bas, définir flex à 1 et peut-être justifier le contenu au centre puis aligner les éléments au centre, pour que
ce texte soit centré pour le moment.
Nous avons maintenant le jeu sur l'écran et nous voulons le rendre à la place
de l'écran de jeu si le jeu est terminé. Revenons donc à l'application. fichier js et importez le jeu sur écran à
partir du dossier screens et là du jeu sur écran
et la question est maintenant bien sûr, quelle est notre condition pour rendre cela? Eh bien, à la fin, nous aurons besoin d'une information
supplémentaire de toute façon et
c'est le nombre de tours qu'il a fallu à l'ordinateur pour terminer le jeu.
Donc, une chose que je veux stocker ici dans le composant d'application est un autre état que je gère et c'est
le nombre de tours qu'il a fallu pour terminer, qui est zéro au départ parce que nous n'avons pas encore commencé
le jeu et je nommerai
cette ronde de devinettes et définir des tours de devinettes et vous pouvez nommer ce que vous voulez.
Maintenant, le but est de régler cela lorsque le jeu est terminé.
Donc, pour cela, je vais également ajouter une autre fonction ici au
composant de l'application, game over handler et là, je veux obtenir mon nombre de tours comme argument, donc je m'attends à obtenir
ceci ici afin que je puisse appeler set guess rounds à mon
nombre de tours que je suis arrivé ici. Maintenant, le gestionnaire de jeu doit être déclenché de l'intérieur de l'écran de jeu, bien sûr.
Donc ici sur l'écran de jeu, je veux passer un accessoire que je nommerai sur GameOver, qui ressemble à
un nom approprié qui peut être appelé de l'intérieur de l'écran de jeu ou qui contient une référence de fonction qui
peut ensuite être appelée de l'intérieur du écran de jeu et la référence de fonction est une référence
à ce jeu sur la fonction de gestionnaire bien sûr.
Donc, à l'intérieur de l'écran de jeu, nous pouvons maintenant utiliser l'accessoire onGameOver pour exécuter cette fonction et passer le
nombre de tours qu'il a fallu à l'ordinateur pour deviner notre
nombre, puis nous définissons ce nombre de tours ici, le stockons dans notre état de tours de devinettes et maintenant dans le composant
d'application, nous savons que si les tours de supposition sont nuls, le jeu n'a pas encore commencé ou il est en cours d'exécution, s'il est supérieur à
zéro, alors le gestionnaire de jeu est exécuté et le
jeu est terminé.
Nous voulons donc montrer le jeu à
l'écran si les tours de devinettes sont supérieurs à zéro.
Soit dit en passant, si nous commençons un nouveau jeu, je veux également remettre à zéro mes tours de devinettes, car si un
nouveau
jeu démarre, nous voulons réinitialiser le nombre de tours que l'ordinateur a pris à 0.
Donc, s'il est supérieur à zéro, le
jeu est terminé, alors dans ce cas, je veux montrer le jeu sur l'écran.
Donc, ici, si je vérifie si nous avons un numéro d'utilisateur, auquel cas je montre l'écran de jeu,
ce n'est correct que si les tours de devinettes sont plus petits ou égaux à zéro, plus
petit n'est pas possible mais quand même, nous pouvons vérifier cela.
Donc, si c'est le cas, alors nous savons que le jeu
est certainement en cours d'exécution, sinon si les tours de devinettes sont supérieurs à zéro, nous savons que le jeu est terminé et
que le contenu sera donc égal au jeu sur
l'écran, en ce moment c'est juste un composant comme celui-ci sans aucun accessoire que nous passons.
Alors maintenant, nous avons une condition où nous rendons le jeu sur l'écran, tout ce que nous devons faire maintenant, nous
devons utiliser le onGameOver Prop ici dans notre écran de jeu pour finalement appeler cette fonction et transmettre le nombre de
tours au composant d'application .
Donc, de retour dans l'écran de jeu, si useEffect ici détermine que le bon choix a été fait, la bonne supposition a
été faite et donc le jeu est terminé, alors ici, je veux appeler les accessoires onGameOver en tant que fonction et transmettre
le nombre de tours qu'il a a pris l'ordinateur pour deviner notre résultat ou notre choix et c'est donc un
autre état que nous devons gérer ici dans l'écran de jeu. Nous avons nos rounds et set rounds et initialement, c'est zéro,
lorsque ce composant est créé pour la première fois, c'est bien sûr zéro et rounds est donc maintenant ce que je transmets ici parce que c'est un
nombre que nous incrémenterons avec chaque supposition parce que dans le prochain gestionnaire de suppositions,
si nous générons une prochaine supposition, en plus de définir cette supposition ici dans notre état, je
veux bien sûr également définir mes tours et utiliser la forme de fonction où j'obtiens mes tours actuels et je retourne les tours
actuels un de plus.
J'ajoute donc un à mon nombre actuel de tours que je stocke dans mon état, de sorte que le nouvel état soit
d'anciens tours plus un parce qu'un nouveau tour a commencé. Donc, avec cela, nous gérons le nombre de tours et nous
utilisons cela comme condition dans le composant d'application pour rendre le jeu sur l'écran et dans l'écran du jeu, nous vérifions si le
jeu est ici en cours d'utilisation , nous le faisons chaque fois que ce composant effectue
un nouveau rendu.
Maintenant, nous pouvons le faire, mais nous pouvons également être plus honnêtes ou plus directs concernant les dépendances de cet effet et
c'est quelque chose que vous pouvez être ou vous pouvez faire en ajoutant un deuxième argument
à useEffect, le premier argument est la fonction qu'il doit exécuter après le rendu le second argument
du composant que vous avez transmis à useEffect est un tableau
de dépendances de cette fonction et ici vous devez spécifier toute valeur provenant de l'extérieur de cette fonction d'effet.
Donc, dans notre cas, ce serait la supposition actuelle et ce serait le choix de l'utilisateur des accessoires et les accessoires sur GameOver et chaque fois
qu'une telle valeur change, cet effet se réexécutera, wo chaque fois qu'une tâche changera
après un cycle de rendu, l'effet se réexécutera, je devrais dire . Si un cycle de rendu s'est produit et que les valeurs
que vous avez spécifiées ici sont toujours les mêmes que pour le
cycle de rendu précédent, alors l'effet ne sera pas réexécuté, donc l'effet ne sera à nouveau
exécuté que si l'une de nos dépendances a changé. Maintenant, comme je l'ai dit, le choix de
l'utilisateur des accessoires et les accessoires onGameOver sont toutes les dépendances et pour m'en occuper, je vais utiliser une syntaxe Javascript moderne
où j'utilise la déstructuration d'objet pour détruire mes accessoires et obtenir le choix de l'utilisateur et onGameOver d'eux, ce la syntaxe peut sembler étrange, mais
c'est
comme la déstructuration des tableaux, juste pour les objets, nous tirons ces propriétés, donc ces noms de propriété
de cet objet d'accessoires et les stockent dans des constantes avec des noms égaux de sorte qu'ici nous pouvons
maintenant simplement utiliser le choix de l'utilisateur et juste utilisez onGameOver puisque nous avons maintenant ces valeurs stockées dans des constantes de ce nom
retirées des accessoires et je le fais parce que maintenant nous pouvons ajouter le choix de l'utilisateur et onGameOver
en tant que dépendances dans cette liste, sinon nous aurions à ajouter
des accessoires ici et cela en fait change chaque fois que le composant parent change et donc ce
n'est pas une bonne vérification.
C'est une meilleure vérification car maintenant nous nous assurons que si quelque chose d'autre dans les accessoires change, nous ne nous en
soucions pas, seulement si l'une de ces deux valeurs change, alors cet effet devrait se réexécuter. Maintenant, avec cela, nous avons notre chèque en
place qui devrait, espérons-le, conduire à la présentation du jeu sur écran
si l'ordinateur a deviné nos chiffres, alors
maintenant, enregistrons cela et essayons, peut-être ici sur Android pour mélanger les choses. Je vais donc entrer un nombre ici, 32, confirmer, démarrer un jeu et c'est 2, donc il devrait être plus
grand, permettez-moi de vous
montrer à quoi ressemble l'avertissement quand je suis sur Android,
c'est cette alerte Android par défaut. Il en était ainsi 32, donc
bien sûr, il devrait être plus grand, encore plus grand,
maintenant il devrait être plus bas, plus bas, plus grand, plus bas, plus bas, plus bas, plus grand, plus grand,
le le jeu est
fini.
Cela semble bon, la supposition était probablement de 32, serait logique en ce qui concerne la séquence de nombres
que nous avions ici et, par conséquent, cette sortie est logique ici.