Nous avons donc passé beaucoup de temps sur ce premier écran, mais évidemment pour une bonne raison,
ce cours concerne l'apprentissage de React Native après tout et vous avez beaucoup appris sur la mise en page, le style, la connexion
de composants, l'utilisation de plusieurs composants et la configuration de composants intégrés déjà et c'est un élément central de React
Native et ce qui vous permet de créer de vraies applications à la fin. Néanmoins, il est maintenant temps de continuer à travailler sur cette
application et avant de nous plonger plus profondément dans
d'autres choses que nous pourrions styliser, ce que je ferai plus tard, je veux
m'assurer que ce bouton de démarrage du jeu fonctionne parce qu'en ce moment nous sommes
toujours coincés sur ce démarrer l'écran du jeu, mais maintenant, je vais ajouter un deuxième composant dans le dossier screens, l'écran
du jeu lui-même, donc l'écran, le contenu que je veux afficher à l'écran lorsque le jeu est en cours et
c'est l'écran qui est responsable de montrer la conjecture de l'ordinateur et permettre à l'utilisateur de dire à
l'ordinateur si c'est bien ou mal, si la valeur doit être inférieure
ou supérieure, c'est donc l'objectif ici.
Maintenant, comme je l'ai déjà mentionné, c'est un composant régulier néanmoins,
nous devons donc importer React à coup sûr et nous allons également importer des éléments de React Native, le plus important bien
sûr, la vue et le texte, vous ne pouvez jamais vous tromper avec ceux-ci, aussi la feuille de
style bien sûr, vous en avez toujours besoin.
Ensuite, ici, nous pouvons ajouter notre composant fonctionnel d'écran de jeu, créer l'objet
styles ici en utilisant la feuille de style. créer comme ça et à la fin, exporter notre écran de jeu ici par défaut et se
débarrasser de cela plus ici en haut.
Alors maintenant, nous avons ce composant d'écran de jeu défini ici
et maintenant, arrêtons-nous brièvement et réfléchissons à ce qui doit se produire ici.
Maintenant, à la fin, ce qui doit arriver, c'est que l'ordinateur doit faire une supposition et
qu'il doit faire
une supposition initialement lorsque cet écran se charge pour la première fois, mais aussi chaque fois que l'utilisateur appuie sur le bouton ceci est
trop
bas ou trop haut, donc
chaque fois que l'utilisateur donne un indice pour savoir si cette supposition est, dans quelle direction du nombre réel cette
supposition est pour ainsi dire, chaque fois que cela se produit, nous voulons générer une nouvelle supposition.
Maintenant, la supposition elle-même devrait être un nombre aléatoire et donc, je vais commencer par créer une nouvelle fonction en dehors de mon
composant fonctionnel maintenant
car elle n'utilisera aucune donnée de là-bas, donc elle ne devrait pas être recréée à chaque nouveau rendu des
composants simplement pour économiser des performances, si
vous ne comptez pas sur les accessoires ou l'état, vous pouvez également simplement avoir une fonction qui réside
en dehors de votre composant et je nommerai ceci générer
aléatoirement entre parce que
c'est ce que cette fonction fera.
C'est une fonction, elle va générer un nombre aléatoire entre un minimum et un maximum
et qui nous permet
également d'exclure certains nombres, par exemple le premier nombre que nous générons devrait exclure la solution pour que l'appareil, l'application
ne puisse jamais deviner le choix de l'utilisateur du premier coup.
Maintenant, ici, le minimum sera normalisé en mathématiques. ceil minimum, donc pour avoir fondamentalement
un nombre entier ici si un non-entier est entré et l'arrondir et max sera plancher pour faire la
même chose mais arrondi vers le bas. Ensuite, je vais avoir mon nombre aléatoire que je génère avec Math. aléatoire et Math.
random nous donne un nombre aléatoire entre 0 et 1, donc pour avoir un nombre entre min et max, nous devons multiplier cela par max -
min et puis aussi à la fin, ajoutez min ici ici mais assurez-vous également d'appeler Math. plancher sur le résultat de toute cette opération ici et cela vous donnera
un nombre aléatoire entre ce minimum et ce maximum.
Maintenant, avec cela
généré, je veux vérifier si le nombre aléatoire est égal au nombre que nous voulons exclure, ce qui serait bien
sûr une coïncidence très rare mais cela peut arriver, auquel cas je retournerai le résultat d'une autre génération aléatoire entre appeler où je transmets simplement
min, max et exclure ce que nous avons obtenu, donc je vais simplement répéter générer aléatoirement entre
et retourner la valeur de cette exécution répétée si nous y obtenons à nouveau la valeur exclue, nous le répéterons une
fois de plus, donc finalement nous 'y arriverai et si nous n'avons pas le
nombre exclu, ce qui devrait être le cas dans la plupart des cas, alors je vais tout
de suite retourner ce nombre aléatoire.
C'est donc maintenant une fonction qui nous génère un nombre aléatoire.
Maintenant, ici, dans l'écran de jeu, je veux gérer un état, je vais donc importer le crochet useState de React et initialiser un état ici avec le
nombre aléatoire parce que l'état que je veux gérer ici est la conjecture de
l'ordinateur, le courant suppose et qui a également
besoin d'une fonction de définition actuelle pour que nous puissions changer cela chaque fois que l'utilisateur donne
un nouvel indice.
Donc, ici, nous pouvons appeler générer aléatoirement entre pour générer un état initial qui sera enregistré et cela ne sera alors
considéré que comme un état initial, donc
lorsque ce composant reconstruit et donc utiliser l'état est appelé à nouveau, nous générerons un autre nombre
aléatoire à nouveau, mais cela ne remplacera pas cet état car une fois que l'état est défini initialement, il
ne sera pas remplacé à nouveau en ajoutant une valeur dérivée ici.
Cela ne sera pris en compte par React que si nous n'avons pas encore d'état initial, par la suite cet état
initial ou mis à jour sera géré séparément du composant et ne sera plus remplacé par cet appel ici.
Au départ, cependant, nous devons faire cet appel, nous voulons obtenir un nombre aléatoire entre 1 et
100, 100 est exclu avec la logique
que nous avons écrite là-bas, donc ce sera un nombre entre 1 et 99, 99
inclus et je veux exclure le choix de l'utilisateur.
Je m'attends à avoir ceci sur mes accessoires ici, donc le
choix de l'utilisateur pourrait être un nom d'accessoire que nous utilisons ici et c'est la valeur que je veux exécuter parce que c'est la solution
à la
fin et nous ne serons pas en mesure de deviner la solution tout de suite,
ce serait un peu injuste.