1 00:00:02,440 --> 00:00:07,590 Donc, pour nous assurer que l'ordinateur peut réellement terminer ce jeu et deviner le bon nombre, 2 00:00:07,720 --> 00:00:12,000 nous devons vérifier ce que l'ordinateur a deviné, puis terminer le jeu s'il 3 00:00:12,010 --> 00:00:17,590 s'agit du numéro que nous avons entré. Pour cela, nous pouvons utiliser un autre crochet React et c'est le crochet useEffect. 4 00:00:17,590 --> 00:00:25,670 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 5 00:00:25,810 --> 00:00:31,300 comme mentionné précédemment, si toute cette chose React hooks est relativement nouvelle pour vous, consultez 6 00:00:31,300 --> 00:00:36,790 certainement quelques ressources dédiées React hooks ou plongez dans mon React Complete Guide Course 7 00:00:36,850 --> 00:00:42,660 où je couvre les crochets en détail. Donc, ce que je vais faire avec useEffect maintenant, c'est que je 8 00:00:42,770 --> 00:00:49,370 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 9 00:00:49,370 --> 00:00:54,950 par défaut après chaque cycle de rendu pour ce composant. Donc, chaque fois qu'elle a 10 00:00:54,950 --> 00:00:59,750 été rendue, cette fonction est exécutée, après avoir été rendue, c'est 11 00:00:59,750 --> 00:01:03,150 aussi important, pas avant, pas simultanément, après. 12 00:01:03,200 --> 00:01:10,290 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 13 00:01:10,290 --> 00:01:11,980 que le jeu est terminé. 14 00:01:12,120 --> 00:01:16,830 Bien sûr, cela ne peut pas être le cas pour le premier cycle de rendu, car nous 15 00:01:16,830 --> 00:01:19,940 excluons le choix de l'utilisateur des nombres devinables, mais à partir 16 00:01:19,940 --> 00:01:25,790 de la deuxième ligne, donc une fois que nous avons cliqué plus ou moins pour la première fois, cela peut arriver. 17 00:01:25,860 --> 00:01:29,220 Donc, là-dedans, je veux ensuite déclencher un 18 00:01:29,220 --> 00:01:35,970 message de fin de partie et l'envoyer à l'application. js afin que nous puissions échanger l'écran de jeu pour un jeu 19 00:01:35,970 --> 00:01:36,890 sur écran. 20 00:01:36,970 --> 00:01:39,000 Maintenant, nous n'avons pas encore cet écran, 21 00:01:39,000 --> 00:01:45,300 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 22 00:01:45,300 --> 00:01:47,250 peaufinerons plus tard. Là-bas, j'aurai 23 00:01:47,250 --> 00:01:50,660 simplement une vue et un texte et une feuille 24 00:01:50,700 --> 00:02:00,760 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 25 00:02:00,760 --> 00:02:04,000 puis retourne du jsx à la fin. 26 00:02:04,000 --> 00:02:12,270 Ici, nous avons ces styles avec la feuille de style. créer et ensuite nous exportons le jeu sur l'écran par défaut. 27 00:02:12,370 --> 00:02:17,170 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 28 00:02:17,170 --> 00:02:22,220 jeu terminé et nous publierons plus de détails là-bas plus tard. Pour l'instant, ici je vais simplement 29 00:02:22,230 --> 00:02:28,090 assigner un style, mon style d'écran que j'ajouterai à cet objet que nous avons passé à 30 00:02:28,090 --> 00:02:28,560 la 31 00:02:28,690 --> 00:02:37,720 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 32 00:02:37,750 --> 00:02:40,410 ce texte soit centré pour le moment. 33 00:02:40,420 --> 00:02:44,440 Nous avons maintenant le jeu sur l'écran et nous voulons le rendre à la place 34 00:02:44,440 --> 00:02:53,050 de l'écran de jeu si le jeu est terminé. Revenons donc à l'application. fichier js et importez le jeu sur écran à 35 00:02:53,050 --> 00:02:56,100 partir du dossier screens et là du jeu sur écran 36 00:02:56,240 --> 00:03:04,240 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 37 00:03:04,390 --> 00:03:07,000 supplémentaire de toute façon et 38 00:03:07,000 --> 00:03:12,570 c'est le nombre de tours qu'il a fallu à l'ordinateur pour terminer le jeu. 39 00:03:12,700 --> 00:03:18,720 Donc, une chose que je veux stocker ici dans le composant d'application est un autre état que je gère et c'est 40 00:03:18,730 --> 00:03:24,580 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é 41 00:03:24,580 --> 00:03:26,120 le jeu et je nommerai 42 00:03:26,260 --> 00:03:31,540 cette ronde de devinettes et définir des tours de devinettes et vous pouvez nommer ce que vous voulez. 43 00:03:31,540 --> 00:03:34,130 Maintenant, le but est de régler cela lorsque le jeu est terminé. 44 00:03:34,140 --> 00:03:38,230 Donc, pour cela, je vais également ajouter une autre fonction ici au 45 00:03:38,230 --> 00:03:45,790 composant de l'application, game over handler et là, je veux obtenir mon nombre de tours comme argument, donc je m'attends à obtenir 46 00:03:45,790 --> 00:03:50,010 ceci ici afin que je puisse appeler set guess rounds à mon 47 00:03:50,020 --> 00:03:56,440 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. 48 00:03:56,560 --> 00:04:01,390 Donc ici sur l'écran de jeu, je veux passer un accessoire que je nommerai sur GameOver, qui ressemble à 49 00:04:01,420 --> 00:04:06,430 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 50 00:04:06,430 --> 00:04:10,960 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 51 00:04:10,960 --> 00:04:13,600 à ce jeu sur la fonction de gestionnaire bien sûr. 52 00:04:13,600 --> 00:04:19,450 Donc, à l'intérieur de l'écran de jeu, nous pouvons maintenant utiliser l'accessoire onGameOver pour exécuter cette fonction et passer le 53 00:04:19,450 --> 00:04:22,720 nombre de tours qu'il a fallu à l'ordinateur pour deviner notre 54 00:04:22,720 --> 00:04:29,460 nombre, puis nous définissons ce nombre de tours ici, le stockons dans notre état de tours de devinettes et maintenant dans le composant 55 00:04:29,470 --> 00:04:37,480 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 à 56 00:04:37,480 --> 00:04:40,560 zéro, alors le gestionnaire de jeu est exécuté et le 57 00:04:40,720 --> 00:04:41,970 jeu est terminé. 58 00:04:41,980 --> 00:04:43,840 Nous voulons donc montrer le jeu à 59 00:04:43,870 --> 00:04:46,490 l'écran si les tours de devinettes sont supérieurs à zéro. 60 00:04:46,540 --> 00:04:52,180 Soit dit en passant, si nous commençons un nouveau jeu, je veux également remettre à zéro mes tours de devinettes, car si un 61 00:04:52,180 --> 00:04:52,570 nouveau 62 00:04:52,570 --> 00:04:56,350 jeu démarre, nous voulons réinitialiser le nombre de tours que l'ordinateur a pris à 0. 63 00:04:56,470 --> 00:04:58,600 Donc, s'il est supérieur à zéro, le 64 00:04:58,630 --> 00:05:02,110 jeu est terminé, alors dans ce cas, je veux montrer le jeu sur l'écran. 65 00:05:02,110 --> 00:05:07,540 Donc, ici, si je vérifie si nous avons un numéro d'utilisateur, auquel cas je montre l'écran de jeu, 66 00:05:07,960 --> 00:05:13,110 ce n'est correct que si les tours de devinettes sont plus petits ou égaux à zéro, plus 67 00:05:13,120 --> 00:05:16,780 petit n'est pas possible mais quand même, nous pouvons vérifier cela. 68 00:05:16,900 --> 00:05:20,770 Donc, si c'est le cas, alors nous savons que le jeu 69 00:05:20,770 --> 00:05:28,650 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 70 00:05:28,650 --> 00:05:31,960 que le contenu sera donc égal au jeu sur 71 00:05:31,980 --> 00:05:37,160 l'écran, en ce moment c'est juste un composant comme celui-ci sans aucun accessoire que nous passons. 72 00:05:37,180 --> 00:05:43,270 Alors maintenant, nous avons une condition où nous rendons le jeu sur l'écran, tout ce que nous devons faire maintenant, nous 73 00:05:43,270 --> 00:05:49,330 devons utiliser le onGameOver Prop ici dans notre écran de jeu pour finalement appeler cette fonction et transmettre le nombre de 74 00:05:49,330 --> 00:05:51,010 tours au composant d'application . 75 00:05:51,820 --> 00:05:59,510 Donc, de retour dans l'écran de jeu, si useEffect ici détermine que le bon choix a été fait, la bonne supposition a 76 00:05:59,530 --> 00:06:07,120 été faite et donc le jeu est terminé, alors ici, je veux appeler les accessoires onGameOver en tant que fonction et transmettre 77 00:06:07,240 --> 00:06:14,380 le nombre de tours qu'il a a pris l'ordinateur pour deviner notre résultat ou notre choix et c'est donc un 78 00:06:14,410 --> 00:06:22,750 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, 79 00:06:22,810 --> 00:06:32,280 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 80 00:06:32,290 --> 00:06:37,390 nombre que nous incrémenterons avec chaque supposition parce que dans le prochain gestionnaire de suppositions, 81 00:06:37,390 --> 00:06:43,510 si nous générons une prochaine supposition, en plus de définir cette supposition ici dans notre état, je 82 00:06:43,540 --> 00:06:51,630 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 83 00:06:51,760 --> 00:06:53,330 actuels un de plus. 84 00:06:53,380 --> 00:06:59,560 J'ajoute donc un à mon nombre actuel de tours que je stocke dans mon état, de sorte que le nouvel état soit 85 00:06:59,560 --> 00:07:05,930 d'anciens tours plus un parce qu'un nouveau tour a commencé. Donc, avec cela, nous gérons le nombre de tours et nous 86 00:07:05,930 --> 00:07:12,530 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 87 00:07:12,740 --> 00:07:17,480 jeu est ici en cours d'utilisation , nous le faisons chaque fois que ce composant effectue 88 00:07:17,490 --> 00:07:18,690 un nouveau rendu. 89 00:07:19,010 --> 00:07:26,240 Maintenant, nous pouvons le faire, mais nous pouvons également être plus honnêtes ou plus directs concernant les dépendances de cet effet et 90 00:07:26,270 --> 00:07:31,640 c'est quelque chose que vous pouvez être ou vous pouvez faire en ajoutant un deuxième argument 91 00:07:31,880 --> 00:07:37,550 à useEffect, le premier argument est la fonction qu'il doit exécuter après le rendu le second argument 92 00:07:37,560 --> 00:07:41,630 du composant que vous avez transmis à useEffect est un tableau 93 00:07:41,630 --> 00:07:47,690 de dépendances de cette fonction et ici vous devez spécifier toute valeur provenant de l'extérieur de cette fonction d'effet. 94 00:07:47,690 --> 00:07:53,660 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 95 00:07:54,000 --> 00:07:57,260 qu'une telle valeur change, cet effet se réexécutera, wo chaque fois qu'une tâche changera 96 00:07:57,290 --> 00:08:03,380 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 97 00:08:03,380 --> 00:08:06,840 que vous avez spécifiées ici sont toujours les mêmes que pour le 98 00:08:06,860 --> 00:08:11,300 cycle de rendu précédent, alors l'effet ne sera pas réexécuté, donc l'effet ne sera à nouveau 99 00:08:11,390 --> 00:08:17,120 exécuté que si l'une de nos dépendances a changé. Maintenant, comme je l'ai dit, le choix de 100 00:08:17,120 --> 00:08:24,230 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 101 00:08:24,320 --> 00:08:32,720 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 102 00:08:32,720 --> 00:08:33,400 c'est 103 00:08:33,440 --> 00:08:39,500 comme la déstructuration des tableaux, juste pour les objets, nous tirons ces propriétés, donc ces noms de propriété 104 00:08:39,500 --> 00:08:45,860 de cet objet d'accessoires et les stockent dans des constantes avec des noms égaux de sorte qu'ici nous pouvons 105 00:08:45,860 --> 00:08:53,930 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 106 00:08:53,930 --> 00:09:00,350 retirées des accessoires et je le fais parce que maintenant nous pouvons ajouter le choix de l'utilisateur et onGameOver 107 00:09:00,350 --> 00:09:04,340 en tant que dépendances dans cette liste, sinon nous aurions à ajouter 108 00:09:04,340 --> 00:09:10,370 des accessoires ici et cela en fait change chaque fois que le composant parent change et donc ce 109 00:09:10,420 --> 00:09:11,990 n'est pas une bonne vérification. 110 00:09:12,050 --> 00:09:16,430 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 111 00:09:16,430 --> 00:09:23,300 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 112 00:09:23,300 --> 00:09:28,280 place qui devrait, espérons-le, conduire à la présentation du jeu sur écran 113 00:09:28,280 --> 00:09:31,530 si l'ordinateur a deviné nos chiffres, alors 114 00:09:31,670 --> 00:09:42,580 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 115 00:09:42,580 --> 00:09:43,990 grand, permettez-moi de vous 116 00:09:43,990 --> 00:09:46,710 montrer à quoi ressemble l'avertissement quand je suis sur Android, 117 00:09:46,750 --> 00:09:50,280 c'est cette alerte Android par défaut. Il en était ainsi 32, donc 118 00:09:50,290 --> 00:09:53,170 bien sûr, il devrait être plus grand, encore plus grand, 119 00:09:53,200 --> 00:09:58,780 maintenant il devrait être plus bas, plus bas, plus grand, plus bas, plus bas, plus bas, plus grand, plus grand, 120 00:09:58,780 --> 00:09:59,780 le le jeu est 121 00:09:59,830 --> 00:10:00,490 fini. 122 00:10:00,580 --> 00:10:05,590 Cela semble bon, la supposition était probablement de 32, serait logique en ce qui concerne la séquence de nombres 123 00:10:05,590 --> 00:10:08,800 que nous avions ici et, par conséquent, cette sortie est logique ici.