Nous pouvons donc atteindre cet écran de jeu maintenant et l'ordinateur devine
un nombre ici, un nombre aléatoire qui exclut notre nombre réel pour la première supposition initiale.
Maintenant, nous devons nous assurer que des suppositions ultérieures peuvent être faites lorsque nous appuyons sur le bouton inférieur ou supérieur
ici dans l'écran de jeu. Pour cela, ajoutons une
fonction à l'intérieur de notre composant fonctionnel car cette fonction aura besoin d'accéder à l'état environnant et au
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
c'est une fonction qui vous
devriez en fait obtenir un argument, la direction dans laquelle la prochaine supposition devrait
être, donc inférieure ou supérieure. Maintenant, la première chose
que je veux faire ici, c'est que je veux m'assurer que nous validons la direction.
Maintenant, cette fonction ici doit être exécutée lorsque les boutons en bas sont enfoncés mais bien sûr
la valeur de la direction, donc la valeur que nous passons en argument doit différer en fonction
du bouton.
Nous avons donc ici le prochain gestionnaire de conjectures connecté à onPress, sans parenthèses pour simplement fournir
ce pointeur à notre fonction à onPress afin que cela s'exécute finalement lorsque l'utilisateur appuie
sur ceci, mais je suis allé préconfigurer l'argument qui sera transmis au gestionnaire de conjectures suivant lorsque cela
est exécuté.
Nous pouvons le faire avec bind, bind this parce que le premier argument à bind est toujours ce à quoi cela doit faire
référence dans la fonction qui est appelée, peu importe ici, nous pouvons donc le lier à ceci.
La deuxième valeur que nous transmettons ici pour lier sera le premier argument reçu par notre fonction et
donc, ce sera la direction reçue ici et c'est bien sûr à vous quelle logique vous utilisez ici, pour moi,
il est
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
avoir ces deux identifiants qui
sont essentiellement passés au gestionnaire de devinettes suivant. Donc, la direction sera inférieure ou
supérieure et maintenant
nous voulons valider si c'est correct.
Ainsi, par exemple, si vous avez sélectionné un nombre de disons 55 et que l'ordinateur a deviné 60, alors si
vous donnez à un ordinateur l'indice des nombres devrait être plus grand, c'est évidemment
faux parce que le nombre devrait être plus petit, votre nombre était 55, devinez
était 60, c'est incorrect
si vous dites à l'ordinateur que le nombre qu'il devrait deviner ensuite devrait être supérieur à 60,
non?
Nous voulons donc valider
cela et donc ici nous pouvons vérifier si la direction est
é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
nombre inférieur à notre choix, alors plus bas est le mauvais indice juste parce que le nombre doit
être
plus bas, il doit être
plus grand parce que la supposition était déjà trop faible. C'est donc un scénario possible où nous obtenons un mauvais
indice, l'alternative et je vais mettre cela entre parenthèses pour qu'il soit vraiment clair
que c'est une condition ici.
Donc, l'alternative à cela,
la deuxième condition que je veux vérifier est que la direction ici est en fait
plus grande et en même temps la supposition actuelle est déjà supérieure à
notre choix et c'est également un indice
incorrect, juste dans la direction opposée.
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
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
pour lancer une alerte avec un titre disons ne mentez pas, bien sûr vous pouvez choisir n'importe quel nom que vous
voulez, j'échappe à cette citation unique
que je suis allé imprimer en tant que caractère ici avec une barre oblique inverse car
sinon cela fermerait la chaîne car j'utilise des guillemets simples pour entourer mes chaînes.
C'est donc mon titre et
ensuite le texte pourrait être vous savez que c'est faux mais bien sûr vous pouvez avoir n'importe quel texte
que vous voulez ici, vous pouvez aussi être moins moraliste si vous le souhaitez. Maintenant, je veux présenter un bouton ici et le
bouton dit déjà expliqué que les objets que vous passez à ce troisième tableau d'arguments que prend
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
gestionnaire onPress, si vous n'en fournissez pas, la seule chose qui arrivera est que cliquer sur le bouton
fermera l'alerte, ce qui est bien.
Donc ici, nous donnons à l'utilisateur un tapotement sur ses doigts pour ainsi dire et nous assurons qu'aucun indice
incorrect n'est
donné et je veux revenir
ici, donc je veux arrêter l'exécution de la fonction si nous avons une valeur incorrecte.
Si nous dépassons ce bloc
if, donc si nous avons donné un indice correct, nous voulons générer un nouveau nombre aléatoire.
Donc ici, je veux vérifier si la direction est plus basse et
maintenant nous savons
que c'était correct, donc l'ordinateur doit deviner un nombre inférieur au nombre précédent, alors nous savons qu'un
nouveau nombre aléatoire doit être généré vers une estimation actuelle est la limite supérieure maximale.
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
si l'utilisateur a déjà deviné un autre
numéro où nous avons dit à l'ordinateur qu'il était trop petit et que nous aurions alors un problème ici parce
que le plus bas la frontière n'est pas toujours une, que se passe-t-il si l'utilisateur
devine 10 et que nous disons non, elle doit être plus grande?
Eh bien, l'utilisateur devine 50 et nous disons que cela devrait être inférieur à cela, l'ordinateur devrait bien sûr et
deviner à
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.
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
deviné est trop petit ou trop grand.
Donc, nous pouvons utiliser un autre hook fourni par React et c'est le hook useRef.
Maintenant, vous savez peut-être que le crochet est un crochet qui vous permet de créer un objet que vous pouvez lier aux
entrées, donc à vos éléments d'entrée en jsx pour y accéder dans votre code et c'est une façon
de l'utiliser, mais useRef vous permet également pour faire autre chose qui est plutôt cool.
Il vous permet de définir une valeur qui survit aux restitutions des composants, de sorte que celles qui survivent
que ce composant soit reconstruit et c'est exactement ce
dont nous avons besoin ici parce que nous voulons nous connecter à un minimum et un maximum que nous pouvons
changer mais qui n'est pas régénéré juste car le composant est à nouveau rendu.
Donc, ici en haut de ce composant, après avoir initialisé l'état, nous pouvons créer une
nouvelle constante, currentLow peut-être où useRef est une puis une autre constante, currentHigh où useRef est 100, ce sont nos limites initiales que
nous utilisons pour le hasard nombre et maintenant nous pouvons mettre à jour ces
références ici.
Nous savons donc que la direction doit être plus basse, ce que
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
React sont des objets qui ont une propriété courante dans laquelle la valeur réelle
est stockée, nous définissons
donc courant égal à deviner courant.
Donc, ce que nous disons, c'est que si je vous le dis, l'ordinateur que le nombre que vous avez deviné est trop
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
être plus élevé que celui-ci,
donc j'enregistre le nombre que je viens de deviner comme mon sommet actuel.
Et encore une fois, ces constantes de référence ne sont pas régénérées ici lorsque ce composant est à
nouveau créé, mais si elles ont été initialisées une fois, un peu comme l'état en fait, elles sont stockées
séparément de ce composant et React reconnaît qu'elles ont déjà été initialisées et il ne les
régénérera pas, mais à la place, initialisera currentHigh avec la valeur précédemment stockée.
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,
le composant ne sera pas rendu de nouveau parce que nous ne voulons pas cela ici.
Je ne veux pas le restituer simplement parce que j'enregistre un nouveau high, cela n'a aucun impact sur ma vue, sur
mon code jsx, ça a juste
un impact sur ma logique mais pour ça, je ne le fais pas besoin de
restituer le composant, c'est pourquoi j'utilise une référence ici au lieu d'un état.
Donc, cela se produit si elle est inférieure, sinon, donc
si nous disons à l'ordinateur que la supposition était trop petite et que le nombre réel
devrait être plus élevé,
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
limite inférieure.
Et maintenant, le but est ou l'astuce est de générer un nouveau nombre aléatoire qui tient compte de ces limites,
donc là où
nous utilisons le plus bas actuel avec notre référence, puis. courant au minimum et courant Haut. courant comme maximum et je veux
exclure la supposition actuelle afin que nous ne puissions plus deviner le même nombre ici, de sorte que pour le
prochain rôle, nous obtiendrons certainement un nombre différent. C'est donc quelque chose que je stocke dans un nombre constant et suivant,
cela est généré ici lorsque
le prochain gestionnaire
de suppositions est exécuté, ce qui se produit lorsque nous tapons sur l'un de ces boutons.
Et maintenant, le numéro suivant est le prochain numéro que nous
voulons utiliser, alors maintenant ce que nous pouvons simplement faire comme nous pouvons appeler définir la supposition actuelle et ajouter
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
terminé, mais
au moins nous pouvons essayer de deviner les nombres ici.
J'entre donc 53 comme mon numéro,
maintenant nous commençons et l'ordinateur devine 85.
Si je dis maintenant plus, nous obtenons cet avertissement parce que nous avons menti, nous en avions 53 comme nombre, donc la supposition
est
trop élevée, elle devrait être inférieure. Maintenant c'est 28, c'est
trop bas, ça devrait être plus.
Donc, si je tape plus bas, j'obtiens l'avertissement, si je tape plus haut, nous montons maintenant 78
et maintenant à ce moment, 23, la supposition précédente sera notre limite inférieure et maintenant quand
je tapoterai plus bas, 78 la supposition actuelle sera notre limite supérieure, donc
la prochaine estimation ne sera certainement pas au-dessus de 78 et pas en dessous de 23 mais elle
est toujours trop basse, c'est trop grand
je veux dire, c'est trop
bas alors utilisons
une plus grande, une plus basse
et ce serait la bonne .
Pour l'instant, nous n'avons rien qui vérifie si l'ordinateur
a deviné correctement.
C'est donc la prochaine chose que nous devrons mettre en œuvre ici.