Nous avons maintenant mis en place notre simple petit jeu de femmes âgées.
Si un utilisateur clique sur le bouton plus de cinq fois, nous considérons qu’il en a un.
Sinon, ils ont perdu.
Donc, le jeu fonctionne vraiment tel qu'il est actuellement.
Mais, à la fin de la dernière section, j’ai commencé à dire que notre façon d’écrire
ce jeu n’était peut-être pas la meilleure au monde.
J'ai jeté le cas dans lequel nous pourrions vouloir laisser un autre développeur diriger ce jeu.
Bien, comme si nous pouvions vouloir publier cette chose comme une fonction ou comme un paquet autonome.
Ainsi, un autre développeur pourrait exécuter le jeu. Nous devrons ensuite lui permettre de spécifier les actions
à entreprendre chaque fois que l'utilisateur termine ou échoue le jeu.
Donc, penser à cela en quelque sorte du point de vue du diagramme, c'est ce que je suggère en quelque sorte.
Je dis que je veux avoir exactement la même expérience de jeu, mais je veux résumer toute cette logique
de jeu dans une seule fonction qui est représentée par ce type de fond bleu ou cyan.
Je souhaite ensuite permettre à un autre développeur de démarrer le jeu et de spécifier exactement ce
qui doit se passer si l'utilisateur réussit le jeu ou échoue.
En d'autres termes, je souhaite reformuler notre base de code actuelle de tout ce qui représente ce jeu en
une seule fonction pouvant être appelée, où un autre développeur peut spécifier ce qu'il faut faire après
le jeu.
Alors faisons ce refactor.
Et au fur et à mesure, nous allons aborder le sujet des promesses et voir comment elles fonctionnent.
Donc, je retourne en quelque sorte à mon code et juste pour commencer, nous allons faire
un peu de refactorisation pour mettre tout notre jeu dans une fonction autonome.
Donc, tout en haut sous la balise script, je vais déclarer une fonction appelée start's game.
Je vais placer une accolade d'ouverture.
Je vais prendre toute ma logique de jeu.
Je vais mettre en retrait en même temps et fermer cette accolade.
En bas, tout mon jeu est maintenant terminé.
Fonction de jeu.
Alors maintenant, j'ai en quelque sorte réussi à mettre toute ma logique de jeu dans une fonction autonome, mais cette fonction
autonome résume tout ce qu'il faut faire dans les cas de réussite et d'échec pour s'assurer que
tout fonctionne correctement.
Je vais ajouter un appel pour démarrer le jeu sous la déclaration de fonction.
Donc, ici, je vais appeler le début du jeu comme tel.
Et maintenant, dans Chrome, nous allons actualiser le document et nous assurer que tout fonctionne toujours.
Donc, nous sommes tous à rafraîchir, nous allons attendre les deux secondes et tout fonctionne
comme prévu pour le jeu.
Donc, notre code tel qu'il existe actuellement, vous le savez encore, fonctionne toujours, mais nous ne fournissons pas une interface
agréable à un autre développeur qui souhaite appeler start game.
C'est tout l'objectif ici.
Je veux en quelque sorte spécifier quoi faire lorsque l'utilisateur gagne.
Chaque fois que j'appelle le début du match, nous allons donc introduire l'idée de promesses maintenant.
J'ai expliqué aux développeurs de nombreuses fois et à chaque fois que j'ai expliqué exactement le comportement
des processus.
J'ai découvert exactement une chose en vous disant que leur travail ne communiquait pas l'information sur les
promesses.
En d’autres termes, je peux rester ici et faire des conférences toute la journée sur les promesses, mais elles ne traduisent pas tout à fait.
Vous devez vraiment voir ces choses en action.
Alors voici ce que nous allons faire.
Plutôt que de m'asseoir ici et de parler de promesses sans arrêt, nous allons simplement refactoriser notre code pour
utiliser une promesse et ensuite, une fois que nous l'aurons mis en place, nous ferons
quelques observations sur la travaux.
D'ACCORD.
Nous allons donc faire le réacteur en premier.
Cela va être un peu mystérieux, mais ensuite, nous allons parler de son fonctionnement.
Donc, pour refactoriser notre code afin d’utiliser les promesses, je commencerai par supprimer l’intégralité de la déclaration de temporisation interne et la seule raison
pour laquelle je le supprime, c’est parce que je veux écrire cette chose
à partir de zéro pour s’assurer qu’elle est vraiment claire. vous exactement ce qui se passe.
Donc, dans les endroits qui prévoient une pause, je vais écrire une nouvelle promesse et noter que j'utilise un P
majuscule ici.
Je vais ensuite passer cette fonction de promesse ou cette chose de promesse, quelle qu’elle soit, ici, une fonction de
grosse flèche.
D'ACCORD.
Donc, je viens de passer une graisse ou une fonction comme ça.
Chaque fois que je déclare une nouvelle promesse, cette fonction interne que je lui transmets est appelée avec deux
arguments, à résoudre et à rejeter.
Maintenant, à l'intérieur, si vous placez exactement la même logique ou presque exactement la même logique que nous avions
auparavant avec le temps écoulé, je dirais jeu
Temps libre.
Je vais passer un second argument.
Je dirai 2000 millisecondes.
Ensuite, pendant le temps imparti, nous pouvons dire si le compteur est supérieur à 5 et voici où les choses
deviennent intéressantes au lieu de dire quoi que ce soit au sujet de l'alerte ou autre, je vais examiner cet
argument.
Cet argument de résolution, je vais l'appeler à nouveau.
Je sais que je lance une tonne de code qui a l'air si mystérieux, mais supporte-moi.
Nous allons terminer la mise en œuvre ici, puis nous parlerons exactement de ce qui se passe actuellement sur les
instructions L, comme dans le cas où un utilisateur échoue.
Je voulais ajouter un appel pour rejeter maintenant un dernier petit peu.
Un dernier petit coin en bas, où j'appelle de nouveau le jeu ou déplace le point-virgule
à la fin. Je vais plutôt le remplacer par un nouveau point de ligne.
Ensuite, je vais passer ensuite une fonction à l’intérieur de laquelle je vous alerterai une dernière fois.
Une chose de moins avec moi.
Le fond même.
Après cela, je vais ajouter une capture et vous alerter que vous avez perdu.
OK, donc beaucoup de changements ont été apportés et il y a de fortes chances que cela paraisse un peu bizarre.
Totalement bien.
Totalement ce que j'attends.
Commençons par exécuter ceci à l'intérieur de notre navigateur et vérifier que tout fonctionne bien et nous parlerons exactement de ce
qui se passe ici.
Nous allons donc nous assurer que je sauvegarde d'abord le document pour que tout soit sauvegardé.
Retour à Chrome, actualisation du document ou clic sur le bouton.
Bien je suppose que je n’ai pas assez cuisiné parce que je t'ai vu pour la dernière fois
Faisons un cas gagnant ici.
Cliquez, cliquez, cliquez et vous gagnez.
N'oubliez pas que pour redémarrer le jeu, vous devez actualiser l'actualisation du navigateur.
Cliquez, cliquez, et je gagne.
D'ACCORD.
Il est clair que quelque chose fonctionne bien ici.
Clairement, quelque chose fonctionne encore mais qu'est-ce que c'est que cette promesse?
Qu'est-ce que c'est résolu et rejeter ce qui est ce fourgon et ne pas attraper au fond.
Prenons une petite pause.
Nous allons revenir parler de la manière dont les promesses fonctionnent, puis nous aurons terminé le recyclage
des promesses.
Juste une autre section sera tout emballé avec notre rafraîchissement.
D'ACCORD.
On se voit dans une seconde.