Dans cette vidéo, il ya quelques petits changements que je veux faire et ensuite je vais parler de la façon dont nous pourrions refactoriser cela un peu.
Donc, le premier changement est que lorsque nous gagnons ce jeu.
Alors gagnons ici.
Là, nous allons et je reçois ce message correct et je clique sur jouer à nouveau.
Il dit toujours correct.
Et nous voulons que la réinitialisation qui est un changement très rapide.
Tout ce que nous devons faire est de trouver le code qui s'exécute lorsque nous cliquons sur jouer à nouveau, puis nous devons changer la portée que nous avons ici et le rendre juste vide.
Alors allons-y trouver qui font de ce plein écran.
Donc, quand nous cliquons sur ce bouton de réinitialisation qui est juste ici.
Tout ce que nous devons faire est de changer notre affichage que nous avons appelé affichage de message.
Donc, nous allons le faire ici-bas n'importe où.
Le texte affiché dans le message augmente le contenu du texte égal à la chaîne vide.
Et voyons comment ça se passe.
Rafraîchir.
OK, nous allons cliquer jusqu'à ce que nous gagnons.
OK, il est correct ici.
Et si je clique sur jouer à nouveau qui disparaît.
L'autre légère modification que je veux faire est que ce bouton devrait seulement dire jouer une fois que l'utilisateur gagne.
Donc, je vais rafraîchir la page et il dit de nouvelles couleurs qui est la façon dont nous voulons qu'il fonctionne.
Alors si je gagne, il me demande si je veux jouer encore.
Ensuite, si je clique à nouveau sur le jeu, nous voulons changer le texte du bouton pour revenir à New colors.
Donc, vraiment légère différence, mais je veux seulement montrer le jeu à nouveau si l'utilisateur vient de gagner.
Alors entrez dans notre code et nous devons trouver l'endroit où l'utilisateur gagne le jeu qui est juste ici quand l'utilisateur clique sur la couleur choisie.
Donc, lorsque l'utilisateur clique sur la bonne couleur, nous modifions le texte du bouton de réinitialisation pour dire le contenu du texte, mais alors ce que nous voulons faire est quand l'utilisateur clique sur le bouton de réinitialisation, nous allons changer cela.
Ce contenu texte point pour revenir à de nouvelles couleurs et nous pourrions également écrire un bouton de réinitialisation.
Mais il est plus facile de le faire parce que nous sommes à l'intérieur de l'écouteur d'événements pour le bouton de réinitialisation.
Et ce devrait être bon si nous rafraîchissons rapidement jusqu'à ce que nous obtenons la bonne.
Nous voulons jouer encore.
Sûr.
Maintenant, il revient à New colors et chaque fois, il vient de dire de nouvelles couleurs à plusieurs reprises et si je gagne, c'est la seule fois qu'il dit jouer à nouveau.
Donc, une chose vraiment mineure, mais je trouve vraiment distrayant, c'est que lorsque je clique sur un de ces boutons, il a ce contour ennuyeux autour de lui.
Et c'est en fait notre navigateur faire cela.
Et nous pouvons l'éteindre.
Je ne sais pas si vous pouvez voir que sur l'écran moulé, mais il ya un contour bleu.
C'est joli de nocif.
Donc, pour se débarrasser de cela, nous allons à notre feuille de style et si nous sélectionnons nos boutons juste ici, nous pouvons simplement écrire aucun contour et revenir et rafraîchir.
Maintenant, si nous cliquons, nous n'obtenons pas ce contour bleu autour de lui.
C'est donc tout ce que je voulais faire pour la logique du jeu.
Maintenant, nous voulons passer un peu de temps à refactoriser votre code.
Revenons donc.
La première chose qui saute à moi est ce code ici où nous avons un bouton dur un bouton facile et l'auditeur pour chacun.
Et ils sont très similaires dans leur façon de travailler.
Sauf que l'un d'eux travaillera avec trois carrés.
L'autre travaille avec six mais sinon ils font essentiellement la même chose.
Nous pouvons donc réduire cette duplication.
Et plutôt que de donner à chacun un idee ce que nous allons faire est de se débarrasser de ces ID et leur donner une classe et ils vont partager la même classe.
La classe va donc être appelée mode.
Donc nous allons leur donner le mode de classe.
Rappelez-vous qu'un bouton ou n'importe quel élément peut avoir deux classes.
Il suffit de les séparer par des espaces.
Donc ceci a le mode de classe et la classe a sélectionné.
D'ACCORD.
Donc, maintenant, nous allons supprimer ces deux boutons ici et faire une liste de boutons appelés boutons de mode et qui va être un document qui interroge le sélecteur.
Paul datt mode.
Cela nous donne deux boutons.
Ensuite, nous allons faire défiler les boutons de mode.
Donc nous avons besoin pour var est égal à zéro.
Moins que le bouton de mode surprenant.
Et ce que cela nous permettra également de faire si, à l'avenir, nous voulons ajouter un mode de difficulté moyenne ou normale ou un mode de difficulté super dur.
Nous n'avons pas besoin d'ajouter des auditeurs supplémentaires parce que nous les sélectionnons tous, puis en utilisant une boucle contre. Nous devons écrire manuellement un pour chaque bouton que nous ajoutons.
D'ACCORD.
Alors terminez la boucle ici.
Plus plus.
Et ce que nous allons faire est d'ajouter un bouton de mode I point ajouter événement écouteur cliquez et ils vont juste le laisser à cela pour l'instant.
Avant d'aller plus loin, je vais vraiment commenter le code juste pour que nous puissions dire ce qui fonctionne à partir de notre nouveau code et ce que nous voulons arriver lorsque nous cliquons sur un de ces boutons.
La première chose que nous voulons faire, c'est que la classe sélectionnée soit appliquée.
Donc en ce moment, c'est seulement quand on plane.
Nous obtenons cette couleur, je veux qu'elle soit lorsque nous cliquons.
Donc, nous avons besoin de faire ce point liste de la classe dot ajouter sélectionné comme celui qui est ce que nous avons ici, sauf que nous le faisons au bouton facile et bouton dur.
Nous pouvons simplement le faire à ce qui se rapporte à ce qui a été cliqué dessus.
Le seul problème est que nous devons également le désactiver.
Et pour ce faire, nous allons juste à ce code dur un peu et les boutons de mode d'écriture zéro point liste de la liste de points supprimer supprimer sélectionné et ensuite nous allons supprimer de l'autre aussi.
Donc parce qu'il n'y a que deux boutons.
Ce n'est pas un problème.
Ce que nous faisons, c'est de le retirer des deux boutons juste pour être sûr, puis de l'ajouter à celui sur lequel nous venons de cliquer.
Donc maintenant, si nous testons cela et rafraîchissons.
Vous pouvez voir qu'il est seulement ajouté à celui que nous venons de cliquer sur et il est retiré de l'autre.
Donc, ce que nous devons faire ensuite est d'ajouter la majeure partie de la logique ici pour ces boutons.
Donc, nous devons trouver combien de carrés pour montrer choisir de nouvelles couleurs et puis nous avons besoin de choisir un nouveau choix à la couleur qui est la couleur que nous essayons d'essayer de cliquer sur.
Et enfin, nous voulons mettre à jour la page pour refléter les changements.
Donc, pour faire tout cela je vais réellement faire une nouvelle fonction et cette fonction, je vais juste appeler la réinitialisation et c'est quelque chose que nous allons utiliser dans quelques endroits parce que nous répétons ces étapes a Beaucoup de cueillette de nouvelles couleurs de cueillette d'une nouvelle couleur choisie de la gamme de couleurs, puis la mise à jour de la page pour afficher les nouvelles couleurs et la mise à jour de cet affichage ici.
Nous faisons cela tout le temps, donc je vais mettre tout cela en fonction.
Donc, ce que nous devons faire à l'intérieur de cette fonction est que je suis en fait juste de le copier ici.
Nous avons déjà fait cela ici.
J'allais copier tout cela dans notre réinitialisation juste comme ça.
Et jetez un oeil à ce qui se passe.
Ainsi, au lieu de réinitialiser ou de générer les couleurs aléatoires en fonction de la variable numb squares et puis nous sommes en train de choisir une nouvelle couleur, nous changeons la couleur affiche le contenu.
Nous avons ce contenu de texte égal à de nouvelles couleurs.
Et cela ne fonctionnera pas car il s'agissait de faire référence au bouton de réinitialisation.
Et qui était à l'intérieur de l'événement dans le centre de bouton de réinitialisation.
Nous sommes maintenant au lieu d'une fonction distincte appelée réinitialisation.
Donc nous avons besoin de code dur que le bouton de réinitialisation.
Et puis nous changeons l'affichage du message pour être vide.
Et puis, nous parcourons tous les carrés et nous mettons à jour leur couleur.
Et puis nous changeons l'arrière-plan du 8: 1 vers le bleu.
Et si nous appelons cela au lieu d'ici, nous allons juste exécuter la réinitialisation.
Il y a un petit problème, à savoir que nous ne mettons jamais à jour les carrés engourdis.
Donc, quand je clique sur le bouton facile, vous voulez changer la variable carrés pour être trois.
Quand je clique sur le bouton dur vous voulez le changer pour être 6.
Donc, pour faire cette minute aller ici et ajouter une déclaration if et tout ce que nous pouvons faire est d'écrire si ce contenu de texte.
Donc, le bouton qui a été cliqué sur si le contenu du texte est égal à facile.
Ce que nous allons faire est de dire que le nombre de carrés est égal à trois carrés de L nombre est égal à six.
Et puis nous appelons la fonction de réinitialisation qui utilisera les carrés numb comme vous pouvez le voir ici dans notre fonction de réinitialisation.
Nous utilisons des carrés pour appeler notre fonction générer des couleurs aléatoires.
Nous devons donc mettre à jour certains carrés que nous faisons ici.
Il ya effectivement un moyen plus court d'écrire ce que certaines personnes sont de grands fans de.
C'est ce qu'on appelle l'opérateur ternaire.
Donc, je vais l'écrire d'abord et ensuite je vais parler de comment ça marche.
Ainsi, ce contenu de texte est égal à égal.
Point d'interrogation facile.
Numb squares équivaut à trois côtés numb squares égale six.
Donc, cette ligne ici fait exactement la même chose que ces quatre lignes ici.
Ces cinq lignes.
C'est ce qu'on appelle l'opérateur ternaire.
Il y a trois parties.
La première chose est la condition.
Ainsi, vous pouvez lire ceci comme si ce contenu de texte est égal à facile, alors aucun carré n'est égal à 3 sinon aucun carré n'est égal à 6.
C'est donc juste une façon d'écrire ceci.
Et je vais le garder comme ça.
Habituellement, si nous avons juste une ligne rapide si les déclarations où nous définissons une valeur à deux options différentes possibles, c'est un bon cas d'utilisation pour l'opérateur ternaire.
Nous avons quand même un problème, mais nous ne nous cachons jamais.
Ou montrant le nombre correct de carrés.
Alors, que se passera-t-il si je me rafraîchis.
Nous démarrons en mode dur.
Cela fonctionne très bien.
Tout fonctionne de la même façon.
Si je clique sur facile bien que nous ayons encore six carrés ici et vous verrez les trois inférieurs juste ne changent pas les couleurs parce que nous avons seulement produit trois couleurs.
Donc, ce que nous devons faire au lieu de notre fonction de réinitialisation, nous devons tenir compte de cela.
Donc ici au lieu de cette boucle où nous changeons la couleur des carrés pour correspondre à la couleur du tableau des couleurs.
S'il n'y a que trois éléments dans le tableau des couleurs ce que nous avons réellement besoin de faire est de masquer les trois autres carrés.
Donc, je vais écrire cela avec une déclaration if et je vais juste vérifier s'il ya une couleur à peindre.
Je fais aussi autre chose.
Donc, s'il ya une couleur, nous allons peindre ou changer la couleur de fond des carrés.
Je pour être cette couleur autrement nous devons changer les carrés que je montre pour être aucun.
Et cela doit être stylisé pour afficher juste comme cela.
Et alors cela nous le cachera.
Alors, que se passe-t-il si je clique sur le bouton facile J'ai un tableau de couleurs avec trois éléments étaient en boucle à travers six carrés et revérification.
S'il ya une couleur qui correspond à ce carré et pour les trois premiers il y aura.
Nous définissons donc la couleur d'arrière-plan comme étant la couleur du tableau.
Mais les trois dernières couleurs, je vais être non.
Ou en fait sera indéfini.
Il n'y aura pas de couleur.
C'est faux.
Et ce qui arrive est alors nous avons placé l'affichage pour être aucun.
Donc, je vais vous montrer comment cela fonctionne rafraîchir.
Si je clique sur facile les trois inférieurs disparaissent.
Continuez à cliquer sur facile, nous obtenons trois nouvelles couleurs.
Jouons au jeu.
Voilà.
Nous avons un problème qui est si je clique sur un dur, nous changeons tous les six carrés pour avoir une nouvelle couleur Bactrim, mais nous ne sommes pas cacher le bas trois fera pour obtenir autour qui est juste avant de donner un nouveau contexte Couleur aux carrés.
Je vais aller de l'avant et les montrer.
Donc, il va être des carrés, je pensais affichage de style égale bloc.
Voilà comment nous les ramènons.
Et nous allons faire cela aux six.
Ce n'est pas grave.
Donc, si nous leur donnons une couleur de fond, nous allons toujours nous assurer qu'ils sont visibles en premier.
Alors maintenant, si nous rafraîchissons et ils vont à facile, nous avons trois jouer un jeu.
Je clique sur dur.
Maintenant, nous avons six appelants.
Jouons à un jeu.
Là nous allons cliquer sur facile et nous retournons à trois.
D'accord.
Donc vous pouvez voir que nous avons nettoyé beaucoup de code ici.
C'était beaucoup plus long.
C'est comme trois fois au moins au moins.
Et deux écouteurs cliqués différents et maintenant notre code est relativement polyvalent.
Si nous voulions ajouter un bouton de difficulté moyenne tout ce que nous devons faire est de changer cette ligne ici où nous aurions un nombre de cases supplémentaires.
Peut-être que nous voulons 5 carrés ou nous voulons un niveau super difficile où nous avons 10 carrés, nous avons juste besoin de changer les carrés de nombre et d'appeler notre fonction de réinitialisation pour obtenir le prochain endroit que nous pouvons utiliser notre fonction de réinitialisation est en fait lorsque nous cliquons sur le bouton de réinitialisation .
Donc, tout ce que nous devons faire là-bas est de remplacer tout au lieu du bouton de réinitialisation clic Lisner avec juste réinitialiser comme ça.
Donc, cela fait monter beaucoup de code.
Nous nous sommes débarrassés de 10 lignes.
Revenons donc sans parenthèses.
Allons au navigateur et assurez-vous qu'il fonctionne toujours.
Alors jouons un jeu.
Cliquez sur jouer à nouveau et il se réinitialise très bien.
Cliquez sur facile jouer un autre jeu et réinitialise aussi bien.
D'accord.
Donc, nous poussons vers le haut notre code un peu.