1 00:00:02,380 --> 00:00:06,940 Nous pouvons donc atteindre cet écran de jeu maintenant et l'ordinateur devine 2 00:00:06,970 --> 00:00:12,340 un nombre ici, un nombre aléatoire qui exclut notre nombre réel pour la première supposition initiale. 3 00:00:12,370 --> 00:00:18,010 Maintenant, nous devons nous assurer que des suppositions ultérieures peuvent être faites lorsque nous appuyons sur le bouton inférieur ou supérieur 4 00:00:18,010 --> 00:00:21,350 ici dans l'écran de jeu. Pour cela, ajoutons une 5 00:00:21,400 --> 00:00:27,820 fonction à l'intérieur de notre composant fonctionnel car cette fonction aura besoin d'accéder à l'état environnant et au 6 00:00:27,820 --> 00:00:36,790 composant environnant et lui donner le nom que vous voulez, comme le prochain gestionnaire de devinettes, quel que soit le nom que vous préférez et 7 00:00:36,790 --> 00:00:38,700 c'est une fonction qui vous 8 00:00:38,710 --> 00:00:43,810 devriez en fait obtenir un argument, la direction dans laquelle la prochaine supposition devrait 9 00:00:43,810 --> 00:00:47,390 être, donc inférieure ou supérieure. Maintenant, la première chose 10 00:00:47,390 --> 00:00:54,060 que je veux faire ici, c'est que je veux m'assurer que nous validons la direction. 11 00:00:54,110 --> 00:00:59,600 Maintenant, cette fonction ici doit être exécutée lorsque les boutons en bas sont enfoncés mais bien sûr 12 00:00:59,600 --> 00:01:04,970 la valeur de la direction, donc la valeur que nous passons en argument doit différer en fonction 13 00:01:05,240 --> 00:01:06,190 du bouton. 14 00:01:06,200 --> 00:01:13,070 Nous avons donc ici le prochain gestionnaire de conjectures connecté à onPress, sans parenthèses pour simplement fournir 15 00:01:13,100 --> 00:01:19,140 ce pointeur à notre fonction à onPress afin que cela s'exécute finalement lorsque l'utilisateur appuie 16 00:01:19,140 --> 00:01:26,060 sur ceci, mais je suis allé préconfigurer l'argument qui sera transmis au gestionnaire de conjectures suivant lorsque cela 17 00:01:26,060 --> 00:01:27,350 est exécuté. 18 00:01:27,350 --> 00:01:33,530 Nous pouvons le faire avec bind, bind this parce que le premier argument à bind est toujours ce à quoi cela doit faire 19 00:01:33,530 --> 00:01:38,450 référence dans la fonction qui est appelée, peu importe ici, nous pouvons donc le lier à ceci. 20 00:01:38,600 --> 00:01:44,780 La deuxième valeur que nous transmettons ici pour lier sera le premier argument reçu par notre fonction et 21 00:01:44,810 --> 00:01:51,580 donc, ce sera la direction reçue ici et c'est bien sûr à vous quelle logique vous utilisez ici, pour moi, 22 00:01:51,580 --> 00:01:52,560 il est 23 00:01:52,600 --> 00:02:00,820 logique d'utiliser simplement un chaîne où ici nous passons plus bas en tant que chaîne et pour l'autre bouton, nous passons plus grand pour 24 00:02:00,970 --> 00:02:02,710 avoir ces deux identifiants qui 25 00:02:02,740 --> 00:02:08,830 sont essentiellement passés au gestionnaire de devinettes suivant. Donc, la direction sera inférieure ou 26 00:02:08,830 --> 00:02:10,780 supérieure et maintenant 27 00:02:10,900 --> 00:02:14,110 nous voulons valider si c'est correct. 28 00:02:14,110 --> 00:02:20,670 Ainsi, par exemple, si vous avez sélectionné un nombre de disons 55 et que l'ordinateur a deviné 60, alors si 29 00:02:20,800 --> 00:02:25,390 vous donnez à un ordinateur l'indice des nombres devrait être plus grand, c'est évidemment 30 00:02:25,390 --> 00:02:30,190 faux parce que le nombre devrait être plus petit, votre nombre était 55, devinez 31 00:02:30,190 --> 00:02:31,690 était 60, c'est incorrect 32 00:02:31,690 --> 00:02:37,290 si vous dites à l'ordinateur que le nombre qu'il devrait deviner ensuite devrait être supérieur à 60, 33 00:02:37,290 --> 00:02:37,790 non? 34 00:02:37,810 --> 00:02:39,340 Nous voulons donc valider 35 00:02:39,540 --> 00:02:43,370 cela et donc ici nous pouvons vérifier si la direction est 36 00:02:43,390 --> 00:02:54,870 égale à inférieure, donc si vous avez appuyé sur son bouton inférieur et que la supposition actuelle est cependant plus petite que le choix de l'utilisateur des accessoires, l'ordinateur a donc deviné un 37 00:02:54,880 --> 00:03:01,270 nombre inférieur à notre choix, alors plus bas est le mauvais indice juste parce que le nombre doit 38 00:03:01,270 --> 00:03:01,870 être 39 00:03:01,900 --> 00:03:03,900 plus bas, il doit être 40 00:03:03,970 --> 00:03:11,100 plus grand parce que la supposition était déjà trop faible. C'est donc un scénario possible où nous obtenons un mauvais 41 00:03:11,100 --> 00:03:16,110 indice, l'alternative et je vais mettre cela entre parenthèses pour qu'il soit vraiment clair 42 00:03:16,110 --> 00:03:18,300 que c'est une condition ici. 43 00:03:18,330 --> 00:03:20,440 Donc, l'alternative à cela, 44 00:03:20,490 --> 00:03:26,010 la deuxième condition que je veux vérifier est que la direction ici est en fait 45 00:03:26,250 --> 00:03:30,920 plus grande et en même temps la supposition actuelle est déjà supérieure à 46 00:03:30,930 --> 00:03:33,460 notre choix et c'est également un indice 47 00:03:33,480 --> 00:03:35,600 incorrect, juste dans la direction opposée. 48 00:03:35,940 --> 00:03:41,220 Dans les deux cas, lorsque nous donnons un indice incorrect, je veux lancer une alerte et vous avez appris que vous pouvez le faire avec l'API 49 00:03:41,220 --> 00:03:48,300 alert, la classe d'alerte que vous pouvez importer à partir de React Native à la fin. Ensuite, ici, dans notre chèque, je vais utiliser alert alert 50 00:03:48,300 --> 00:03:55,460 pour lancer une alerte avec un titre disons ne mentez pas, bien sûr vous pouvez choisir n'importe quel nom que vous 51 00:03:55,530 --> 00:03:57,820 voulez, j'échappe à cette citation unique 52 00:03:57,840 --> 00:04:03,240 que je suis allé imprimer en tant que caractère ici avec une barre oblique inverse car 53 00:04:03,240 --> 00:04:07,710 sinon cela fermerait la chaîne car j'utilise des guillemets simples pour entourer mes chaînes. 54 00:04:07,710 --> 00:04:09,010 C'est donc mon titre et 55 00:04:09,090 --> 00:04:13,230 ensuite le texte pourrait être vous savez que c'est faux mais bien sûr vous pouvez avoir n'importe quel texte 56 00:04:13,230 --> 00:04:19,480 que vous voulez ici, vous pouvez aussi être moins moraliste si vous le souhaitez. Maintenant, je veux présenter un bouton ici et le 57 00:04:19,480 --> 00:04:25,260 bouton dit déjà expliqué que les objets que vous passez à ce troisième tableau d'arguments que prend 58 00:04:25,320 --> 00:04:32,880 l'alerte et là le texte pourrait être désolé et le style pourrait être annulé et vous n'avez pas besoin de fournir un 59 00:04:32,880 --> 00:04:39,120 gestionnaire onPress, si vous n'en fournissez pas, la seule chose qui arrivera est que cliquer sur le bouton 60 00:04:39,120 --> 00:04:41,400 fermera l'alerte, ce qui est bien. 61 00:04:42,000 --> 00:04:47,550 Donc ici, nous donnons à l'utilisateur un tapotement sur ses doigts pour ainsi dire et nous assurons qu'aucun indice 62 00:04:47,550 --> 00:04:48,530 incorrect n'est 63 00:04:48,600 --> 00:04:50,040 donné et je veux revenir 64 00:04:50,040 --> 00:04:54,590 ici, donc je veux arrêter l'exécution de la fonction si nous avons une valeur incorrecte. 65 00:04:54,780 --> 00:04:56,580 Si nous dépassons ce bloc 66 00:04:56,580 --> 00:05:01,330 if, donc si nous avons donné un indice correct, nous voulons générer un nouveau nombre aléatoire. 67 00:05:01,920 --> 00:05:06,940 Donc ici, je veux vérifier si la direction est plus basse et 68 00:05:07,200 --> 00:05:08,850 maintenant nous savons 69 00:05:08,850 --> 00:05:15,810 que c'était correct, donc l'ordinateur doit deviner un nombre inférieur au nombre précédent, alors nous savons qu'un 70 00:05:15,810 --> 00:05:22,170 nouveau nombre aléatoire doit être généré vers une estimation actuelle est la limite supérieure maximale. 71 00:05:22,200 --> 00:05:29,940 Donc, par conséquent, nous pouvons appeler générer aléatoire entre à nouveau et le nombre minimum, eh bien c'est probablement un, mais que se passe-t-il 72 00:05:30,060 --> 00:05:32,930 si l'utilisateur a déjà deviné un autre 73 00:05:32,940 --> 00:05:39,440 numéro où nous avons dit à l'ordinateur qu'il était trop petit et que nous aurions alors un problème ici parce 74 00:05:39,540 --> 00:05:44,410 que le plus bas la frontière n'est pas toujours une, que se passe-t-il si l'utilisateur 75 00:05:44,430 --> 00:05:48,430 devine 10 et que nous disons non, elle doit être plus grande? 76 00:05:48,480 --> 00:05:53,670 Eh bien, l'utilisateur devine 50 et nous disons que cela devrait être inférieur à cela, l'ordinateur devrait bien sûr et 77 00:05:53,670 --> 00:05:54,410 deviner à 78 00:05:54,420 --> 00:06:00,240 nouveau, mais il ne devrait pas deviner en dessous de 10 car nous avons déjà mentionné que c'était trop petit plus tôt. 79 00:06:00,330 --> 00:06:08,700 Par conséquent, notre maximum et notre minimum actuels devraient s'ajuster au fil du temps, car nous donnons des indices pour savoir si le nombre que l'ordinateur a 80 00:06:08,700 --> 00:06:11,080 deviné est trop petit ou trop grand. 81 00:06:12,130 --> 00:06:16,690 Donc, nous pouvons utiliser un autre hook fourni par React et c'est le hook useRef. 82 00:06:16,690 --> 00:06:23,290 Maintenant, vous savez peut-être que le crochet est un crochet qui vous permet de créer un objet que vous pouvez lier aux 83 00:06:23,350 --> 00:06:28,960 entrées, donc à vos éléments d'entrée en jsx pour y accéder dans votre code et c'est une façon 84 00:06:28,960 --> 00:06:33,870 de l'utiliser, mais useRef vous permet également pour faire autre chose qui est plutôt cool. 85 00:06:34,120 --> 00:06:39,720 Il vous permet de définir une valeur qui survit aux restitutions des composants, de sorte que celles qui survivent 86 00:06:39,760 --> 00:06:42,810 que ce composant soit reconstruit et c'est exactement ce 87 00:06:43,120 --> 00:06:48,940 dont nous avons besoin ici parce que nous voulons nous connecter à un minimum et un maximum que nous pouvons 88 00:06:49,180 --> 00:06:53,320 changer mais qui n'est pas régénéré juste car le composant est à nouveau rendu. 89 00:06:53,320 --> 00:07:00,060 Donc, ici en haut de ce composant, après avoir initialisé l'état, nous pouvons créer une 90 00:07:00,360 --> 00:07:10,430 nouvelle constante, currentLow peut-être où useRef est une puis une autre constante, currentHigh où useRef est 100, ce sont nos limites initiales que 91 00:07:10,440 --> 00:07:16,590 nous utilisons pour le hasard nombre et maintenant nous pouvons mettre à jour ces 92 00:07:17,160 --> 00:07:18,240 références ici. 93 00:07:18,390 --> 00:07:20,790 Nous savons donc que la direction doit être plus basse, ce que 94 00:07:20,790 --> 00:07:27,450 nous pouvons faire dans ce cas, au lieu de générer instantanément un nouveau nombre, nous pouvons définir currentHigh. courant, parce que les références générées par 95 00:07:27,450 --> 00:07:33,960 React sont des objets qui ont une propriété courante dans laquelle la valeur réelle 96 00:07:33,960 --> 00:07:36,120 est stockée, nous définissons 97 00:07:36,150 --> 00:07:39,320 donc courant égal à deviner courant. 98 00:07:39,330 --> 00:07:45,570 Donc, ce que nous disons, c'est que si je vous le dis, l'ordinateur que le nombre que vous avez deviné est trop 99 00:07:45,570 --> 00:07:53,610 grand et vous devriez en deviner un plus bas, alors je sais que ce nombre que j'ai deviné est mon courantHaut, le nombre qui est correct peut ' t 100 00:07:53,610 --> 00:07:55,320 être plus élevé que celui-ci, 101 00:07:55,320 --> 00:07:58,780 donc j'enregistre le nombre que je viens de deviner comme mon sommet actuel. 102 00:07:58,800 --> 00:08:05,160 Et encore une fois, ces constantes de référence ne sont pas régénérées ici lorsque ce composant est à 103 00:08:05,160 --> 00:08:11,700 nouveau créé, mais si elles ont été initialisées une fois, un peu comme l'état en fait, elles sont stockées 104 00:08:11,790 --> 00:08:17,490 séparément de ce composant et React reconnaît qu'elles ont déjà été initialisées et il ne les 105 00:08:17,490 --> 00:08:22,440 régénérera pas, mais à la place, initialisera currentHigh avec la valeur précédemment stockée. 106 00:08:22,440 --> 00:08:28,240 Donc, c'est un peu comme si vous gériez cela dans un état, la différence par rapport à l'état si vous modifiez la valeur stockée dedans, 107 00:08:28,240 --> 00:08:32,290 le composant ne sera pas rendu de nouveau parce que nous ne voulons pas cela ici. 108 00:08:32,370 --> 00:08:37,890 Je ne veux pas le restituer simplement parce que j'enregistre un nouveau high, cela n'a aucun impact sur ma vue, sur 109 00:08:37,890 --> 00:08:39,780 mon code jsx, ça a juste 110 00:08:39,780 --> 00:08:44,020 un impact sur ma logique mais pour ça, je ne le fais pas besoin de 111 00:08:44,070 --> 00:08:47,580 restituer le composant, c'est pourquoi j'utilise une référence ici au lieu d'un état. 112 00:08:47,640 --> 00:08:50,730 Donc, cela se produit si elle est inférieure, sinon, donc 113 00:08:50,760 --> 00:08:55,980 si nous disons à l'ordinateur que la supposition était trop petite et que le nombre réel 114 00:08:55,980 --> 00:08:57,060 devrait être plus élevé, 115 00:08:57,060 --> 00:09:04,970 devrait être plus grand, eh bien dans ce cas, nous définissons le courant faible à la supposition actuelle, car alors nous savons nous avons une 116 00:09:04,970 --> 00:09:06,020 limite inférieure. 117 00:09:06,230 --> 00:09:12,230 Et maintenant, le but est ou l'astuce est de générer un nouveau nombre aléatoire qui tient compte de ces limites, 118 00:09:12,230 --> 00:09:13,280 donc là où 119 00:09:13,280 --> 00:09:22,190 nous utilisons le plus bas actuel avec notre référence, puis. courant au minimum et courant Haut. courant comme maximum et je veux 120 00:09:22,190 --> 00:09:30,850 exclure la supposition actuelle afin que nous ne puissions plus deviner le même nombre ici, de sorte que pour le 121 00:09:30,850 --> 00:09:38,440 prochain rôle, nous obtiendrons certainement un nombre différent. C'est donc quelque chose que je stocke dans un nombre constant et suivant, 122 00:09:38,440 --> 00:09:39,900 cela est généré ici lorsque 123 00:09:39,910 --> 00:09:41,200 le prochain gestionnaire 124 00:09:41,350 --> 00:09:46,020 de suppositions est exécuté, ce qui se produit lorsque nous tapons sur l'un de ces boutons. 125 00:09:46,240 --> 00:09:49,140 Et maintenant, le numéro suivant est le prochain numéro que nous 126 00:09:49,150 --> 00:09:54,370 voulons utiliser, alors maintenant ce que nous pouvons simplement faire comme nous pouvons appeler définir la supposition actuelle et ajouter 127 00:09:54,370 --> 00:10:01,660 le numéro suivant, maintenant le composant sera restitué et il affichera la prochaine supposition. Essayons donc, pour l'instant nous n'avons pas le jeu 128 00:10:01,660 --> 00:10:02,960 terminé, mais 129 00:10:02,980 --> 00:10:06,820 au moins nous pouvons essayer de deviner les nombres ici. 130 00:10:06,850 --> 00:10:09,250 J'entre donc 53 comme mon numéro, 131 00:10:09,250 --> 00:10:12,040 maintenant nous commençons et l'ordinateur devine 85. 132 00:10:12,100 --> 00:10:18,220 Si je dis maintenant plus, nous obtenons cet avertissement parce que nous avons menti, nous en avions 53 comme nombre, donc la supposition 133 00:10:18,220 --> 00:10:18,580 est 134 00:10:18,580 --> 00:10:21,590 trop élevée, elle devrait être inférieure. Maintenant c'est 28, c'est 135 00:10:21,610 --> 00:10:23,260 trop bas, ça devrait être plus. 136 00:10:23,260 --> 00:10:28,830 Donc, si je tape plus bas, j'obtiens l'avertissement, si je tape plus haut, nous montons maintenant 78 137 00:10:28,840 --> 00:10:34,030 et maintenant à ce moment, 23, la supposition précédente sera notre limite inférieure et maintenant quand 138 00:10:34,030 --> 00:10:38,360 je tapoterai plus bas, 78 la supposition actuelle sera notre limite supérieure, donc 139 00:10:38,380 --> 00:10:44,300 la prochaine estimation ne sera certainement pas au-dessus de 78 et pas en dessous de 23 mais elle 140 00:10:44,430 --> 00:10:46,690 est toujours trop basse, c'est trop grand 141 00:10:46,690 --> 00:10:48,460 je veux dire, c'est trop 142 00:10:48,460 --> 00:10:49,580 bas alors utilisons 143 00:10:49,600 --> 00:10:51,520 une plus grande, une plus basse 144 00:10:51,520 --> 00:10:53,460 et ce serait la bonne . 145 00:10:53,500 --> 00:10:56,560 Pour l'instant, nous n'avons rien qui vérifie si l'ordinateur 146 00:10:56,580 --> 00:10:57,820 a deviné correctement. 147 00:10:58,120 --> 00:11:00,130 C'est donc la prochaine chose que nous devrons mettre en œuvre ici.