1
00:00:00,170 --> 00:00:06,330
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.

2
00:00:06,330 --> 00:00:09,570
Donc, le premier changement est que lorsque nous gagnons ce jeu.

3
00:00:09,840 --> 00:00:11,860
Alors gagnons ici.

4
00:00:11,880 --> 00:00:16,320
Là, nous allons et je reçois ce message correct et je clique sur jouer à nouveau.

5
00:00:16,710 --> 00:00:18,080
Il dit toujours correct.

6
00:00:18,300 --> 00:00:22,030
Et nous voulons que la réinitialisation qui est un changement très rapide.

7
00:00:22,320 --> 00:00:30,730
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.

8
00:00:30,750 --> 00:00:33,760
Alors allons-y trouver qui font de ce plein écran.

9
00:00:34,410 --> 00:00:38,570
Donc, quand nous cliquons sur ce bouton de réinitialisation qui est juste ici.

10
00:00:39,360 --> 00:00:44,190
Tout ce que nous devons faire est de changer notre affichage que nous avons appelé affichage de message.

11
00:00:44,190 --> 00:00:48,090
Donc, nous allons le faire ici-bas n'importe où.

12
00:00:48,090 --> 00:00:57,960
Le texte affiché dans le message augmente le contenu du texte égal à la chaîne vide.

13
00:00:58,360 --> 00:01:00,330
Et voyons comment ça se passe.

14
00:01:00,540 --> 00:01:01,730
Rafraîchir.

15
00:01:01,810 --> 00:01:03,740
OK, nous allons cliquer jusqu'à ce que nous gagnons.

16
00:01:04,050 --> 00:01:05,680
OK, il est correct ici.

17
00:01:05,790 --> 00:01:09,440
Et si je clique sur jouer à nouveau qui disparaît.

18
00:01:09,660 --> 00:01:16,290
L'autre légère modification que je veux faire est que ce bouton devrait seulement dire jouer une fois que l'utilisateur gagne.

19
00:01:16,320 --> 00:01:20,760
Donc, je vais rafraîchir la page et il dit de nouvelles couleurs qui est la façon dont nous voulons qu'il fonctionne.

20
00:01:20,760 --> 00:01:23,910
Alors si je gagne, il me demande si je veux jouer encore.

21
00:01:24,120 --> 00:01:30,080
Ensuite, si je clique à nouveau sur le jeu, nous voulons changer le texte du bouton pour revenir à New colors.

22
00:01:30,090 --> 00:01:35,280
Donc, vraiment légère différence, mais je veux seulement montrer le jeu à nouveau si l'utilisateur vient de gagner.

23
00:01:35,850 --> 00:01:44,240
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.

24
00:01:44,370 --> 00:01:56,650
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.

25
00:01:56,790 --> 00:02:05,040
Ce contenu texte point pour revenir à de nouvelles couleurs et nous pourrions également écrire un bouton de réinitialisation.

26
00:02:05,040 --> 00:02:09,540
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.

27
00:02:10,050 --> 00:02:15,270
Et ce devrait être bon si nous rafraîchissons rapidement jusqu'à ce que nous obtenons la bonne.

28
00:02:15,360 --> 00:02:16,440
Nous voulons jouer encore.

29
00:02:16,680 --> 00:02:17,480
Sûr.

30
00:02:17,490 --> 00:02:26,900
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.

31
00:02:26,910 --> 00:02:34,350
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.

32
00:02:34,680 --> 00:02:36,990
Et c'est en fait notre navigateur faire cela.

33
00:02:36,990 --> 00:02:38,560
Et nous pouvons l'éteindre.

34
00:02:38,610 --> 00:02:41,940
Je ne sais pas si vous pouvez voir que sur l'écran moulé, mais il ya un contour bleu.

35
00:02:42,070 --> 00:02:43,190
C'est joli de nocif.

36
00:02:43,200 --> 00:02:54,290
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.

37
00:02:54,310 --> 00:02:57,810
Maintenant, si nous cliquons, nous n'obtenons pas ce contour bleu autour de lui.

38
00:02:57,960 --> 00:03:00,260
C'est donc tout ce que je voulais faire pour la logique du jeu.

39
00:03:00,450 --> 00:03:03,500
Maintenant, nous voulons passer un peu de temps à refactoriser votre code.

40
00:03:03,630 --> 00:03:04,880
Revenons donc.

41
00:03:04,980 --> 00:03:12,120
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.

42
00:03:12,240 --> 00:03:14,370
Et ils sont très similaires dans leur façon de travailler.

43
00:03:14,370 --> 00:03:17,100
Sauf que l'un d'eux travaillera avec trois carrés.

44
00:03:17,100 --> 00:03:20,860
L'autre travaille avec six mais sinon ils font essentiellement la même chose.

45
00:03:21,090 --> 00:03:23,720
Nous pouvons donc réduire cette duplication.

46
00:03:23,880 --> 00:03:33,180
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.

47
00:03:33,390 --> 00:03:37,660
La classe va donc être appelée mode.

48
00:03:37,770 --> 00:03:39,570
Donc nous allons leur donner le mode de classe.

49
00:03:39,600 --> 00:03:42,850
Rappelez-vous qu'un bouton ou n'importe quel élément peut avoir deux classes.

50
00:03:42,870 --> 00:03:45,010
Il suffit de les séparer par des espaces.

51
00:03:45,030 --> 00:03:48,030
Donc ceci a le mode de classe et la classe a sélectionné.

52
00:03:48,420 --> 00:03:49,020
D'ACCORD.

53
00:03:49,160 --> 00:03:59,220
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.

54
00:03:59,350 --> 00:04:03,090
Paul datt mode.

55
00:04:03,160 --> 00:04:05,410
Cela nous donne deux boutons.

56
00:04:05,700 --> 00:04:08,360
Ensuite, nous allons faire défiler les boutons de mode.

57
00:04:08,370 --> 00:04:13,020
Donc nous avons besoin pour var est égal à zéro.

58
00:04:13,290 --> 00:04:16,740
Moins que le bouton de mode surprenant.

59
00:04:16,910 --> 00:04:25,380
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.

60
00:04:25,470 --> 00:04:34,800
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.

61
00:04:35,100 --> 00:04:35,330
D'ACCORD.

62
00:04:35,340 --> 00:04:36,480
Alors terminez la boucle ici.

63
00:04:36,570 --> 00:04:37,740
Plus plus.

64
00:04:38,100 --> 00:04:50,590
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.

65
00:04:50,590 --> 00:05:01,100
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.

66
00:05:01,210 --> 00:05:05,580
La première chose que nous voulons faire, c'est que la classe sélectionnée soit appliquée.

67
00:05:05,680 --> 00:05:07,260
Donc en ce moment, c'est seulement quand on plane.

68
00:05:07,300 --> 00:05:10,220
Nous obtenons cette couleur, je veux qu'elle soit lorsque nous cliquons.

69
00:05:10,780 --> 00:05:23,510
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.

70
00:05:23,710 --> 00:05:27,070
Nous pouvons simplement le faire à ce qui se rapporte à ce qui a été cliqué dessus.

71
00:05:27,220 --> 00:05:31,180
Le seul problème est que nous devons également le désactiver.

72
00:05:31,540 --> 00:05:47,320
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.

73
00:05:47,800 --> 00:05:49,360
Donc parce qu'il n'y a que deux boutons.

74
00:05:49,390 --> 00:05:50,550
Ce n'est pas un problème.

75
00:05:50,560 --> 00:05:57,690
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.

76
00:05:57,700 --> 00:06:00,690
Donc maintenant, si nous testons cela et rafraîchissons.

77
00:06:01,030 --> 00:06:06,630
Vous pouvez voir qu'il est seulement ajouté à celui que nous venons de cliquer sur et il est retiré de l'autre.

78
00:06:06,640 --> 00:06:10,900
Donc, ce que nous devons faire ensuite est d'ajouter la majeure partie de la logique ici pour ces boutons.

79
00:06:11,080 --> 00:06:30,420
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.

80
00:06:30,670 --> 00:06:37,850
Et enfin, nous voulons mettre à jour la page pour refléter les changements.

81
00:06:38,110 --> 00:06:59,650
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.

82
00:06:59,650 --> 00:07:03,400
Nous faisons cela tout le temps, donc je vais mettre tout cela en fonction.

83
00:07:03,400 --> 00:07:08,500
Donc, ce que nous devons faire à l'intérieur de cette fonction est que je suis en fait juste de le copier ici.

84
00:07:08,530 --> 00:07:09,860
Nous avons déjà fait cela ici.

85
00:07:09,990 --> 00:07:15,200
J'allais copier tout cela dans notre réinitialisation juste comme ça.

86
00:07:15,430 --> 00:07:17,150
Et jetez un oeil à ce qui se passe.

87
00:07:17,350 --> 00:07:29,310
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.

88
00:07:29,530 --> 00:07:32,020
Nous avons ce contenu de texte égal à de nouvelles couleurs.

89
00:07:32,050 --> 00:07:37,060
Et cela ne fonctionnera pas car il s'agissait de faire référence au bouton de réinitialisation.

90
00:07:37,390 --> 00:07:40,420
Et qui était à l'intérieur de l'événement dans le centre de bouton de réinitialisation.

91
00:07:40,540 --> 00:07:43,240
Nous sommes maintenant au lieu d'une fonction distincte appelée réinitialisation.

92
00:07:43,270 --> 00:07:45,720
Donc nous avons besoin de code dur que le bouton de réinitialisation.

93
00:07:45,880 --> 00:07:49,140
Et puis nous changeons l'affichage du message pour être vide.

94
00:07:49,570 --> 00:07:54,660
Et puis, nous parcourons tous les carrés et nous mettons à jour leur couleur.

95
00:07:54,970 --> 00:07:57,920
Et puis nous changeons l'arrière-plan du 8: 1 vers le bleu.

96
00:07:58,180 --> 00:08:02,170
Et si nous appelons cela au lieu d'ici, nous allons juste exécuter la réinitialisation.

97
00:08:02,170 --> 00:08:06,760
Il y a un petit problème, à savoir que nous ne mettons jamais à jour les carrés engourdis.

98
00:08:06,880 --> 00:08:11,870
Donc, quand je clique sur le bouton facile, vous voulez changer la variable carrés pour être trois.

99
00:08:11,920 --> 00:08:15,180
Quand je clique sur le bouton dur vous voulez le changer pour être 6.

100
00:08:15,220 --> 00:08:22,960
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.

101
00:08:22,960 --> 00:08:27,880
Donc, le bouton qui a été cliqué sur si le contenu du texte est égal à facile.

102
00:08:28,250 --> 00:08:36,510
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.

103
00:08:36,640 --> 00:08:43,030
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.

104
00:08:43,150 --> 00:08:47,410
Nous utilisons des carrés pour appeler notre fonction générer des couleurs aléatoires.

105
00:08:47,600 --> 00:08:51,970
Nous devons donc mettre à jour certains carrés que nous faisons ici.

106
00:08:52,000 --> 00:08:57,010
Il ya effectivement un moyen plus court d'écrire ce que certaines personnes sont de grands fans de.

107
00:08:57,010 --> 00:08:58,580
C'est ce qu'on appelle l'opérateur ternaire.

108
00:08:58,570 --> 00:09:01,720
Donc, je vais l'écrire d'abord et ensuite je vais parler de comment ça marche.

109
00:09:01,720 --> 00:09:06,350
Ainsi, ce contenu de texte est égal à égal.

110
00:09:06,670 --> 00:09:10,870
Point d'interrogation facile.

111
00:09:11,000 --> 00:09:19,110
Numb squares équivaut à trois côtés numb squares égale six.

112
00:09:19,120 --> 00:09:23,710
Donc, cette ligne ici fait exactement la même chose que ces quatre lignes ici.

113
00:09:23,710 --> 00:09:25,430
Ces cinq lignes.

114
00:09:25,510 --> 00:09:27,360
C'est ce qu'on appelle l'opérateur ternaire.

115
00:09:27,400 --> 00:09:28,950
Il y a trois parties.

116
00:09:28,960 --> 00:09:30,860
La première chose est la condition.

117
00:09:31,070 --> 00:09:42,080
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.

118
00:09:42,250 --> 00:09:44,060
C'est donc juste une façon d'écrire ceci.

119
00:09:44,380 --> 00:09:46,280
Et je vais le garder comme ça.

120
00:09:46,270 --> 00:09:55,970
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.

121
00:09:56,600 --> 00:09:59,420
Nous avons quand même un problème, mais nous ne nous cachons jamais.

122
00:09:59,420 --> 00:10:01,380
Ou montrant le nombre correct de carrés.

123
00:10:01,390 --> 00:10:03,940
Alors, que se passera-t-il si je me rafraîchis.

124
00:10:04,030 --> 00:10:04,950
Nous démarrons en mode dur.

125
00:10:04,950 --> 00:10:05,860
Cela fonctionne très bien.

126
00:10:05,870 --> 00:10:07,290
Tout fonctionne de la même façon.

127
00:10:07,450 --> 00:10:16,160
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.

128
00:10:16,370 --> 00:10:21,890
Donc, ce que nous devons faire au lieu de notre fonction de réinitialisation, nous devons tenir compte de cela.

129
00:10:21,880 --> 00:10:28,000
Donc ici au lieu de cette boucle où nous changeons la couleur des carrés pour correspondre à la couleur du tableau des couleurs.

130
00:10:28,210 --> 00:10:34,060
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.

131
00:10:34,270 --> 00:10:40,670
Donc, je vais écrire cela avec une déclaration if et je vais juste vérifier s'il ya une couleur à peindre.

132
00:10:40,670 --> 00:10:42,070
Je fais aussi autre chose.

133
00:10:42,110 --> 00:10:47,410
Donc, s'il ya une couleur, nous allons peindre ou changer la couleur de fond des carrés.

134
00:10:47,410 --> 00:10:57,200
Je pour être cette couleur autrement nous devons changer les carrés que je montre pour être aucun.

135
00:10:57,320 --> 00:11:02,920
Et cela doit être stylisé pour afficher juste comme cela.

136
00:11:03,100 --> 00:11:05,130
Et alors cela nous le cachera.

137
00:11:05,360 --> 00:11:14,870
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.

138
00:11:14,920 --> 00:11:19,790
S'il ya une couleur qui correspond à ce carré et pour les trois premiers il y aura.

139
00:11:19,820 --> 00:11:22,890
Nous définissons donc la couleur d'arrière-plan comme étant la couleur du tableau.

140
00:11:23,020 --> 00:11:26,700
Mais les trois dernières couleurs, je vais être non.

141
00:11:26,740 --> 00:11:27,910
Ou en fait sera indéfini.

142
00:11:27,910 --> 00:11:29,240
Il n'y aura pas de couleur.

143
00:11:29,470 --> 00:11:31,010
C'est faux.

144
00:11:31,270 --> 00:11:34,560
Et ce qui arrive est alors nous avons placé l'affichage pour être aucun.

145
00:11:34,820 --> 00:11:37,770
Donc, je vais vous montrer comment cela fonctionne rafraîchir.

146
00:11:38,230 --> 00:11:41,180
Si je clique sur facile les trois inférieurs disparaissent.

147
00:11:41,170 --> 00:11:43,720
Continuez à cliquer sur facile, nous obtenons trois nouvelles couleurs.

148
00:11:43,780 --> 00:11:44,840
Jouons au jeu.

149
00:11:44,840 --> 00:11:46,410
Voilà.

150
00:11:46,450 --> 00:12:01,720
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.

151
00:12:01,720 --> 00:12:03,960
Je vais aller de l'avant et les montrer.

152
00:12:03,970 --> 00:12:09,470
Donc, il va être des carrés, je pensais affichage de style égale bloc.

153
00:12:09,590 --> 00:12:11,320
Voilà comment nous les ramènons.

154
00:12:11,410 --> 00:12:13,140
Et nous allons faire cela aux six.

155
00:12:13,150 --> 00:12:14,170
Ce n'est pas grave.

156
00:12:14,200 --> 00:12:19,320
Donc, si nous leur donnons une couleur de fond, nous allons toujours nous assurer qu'ils sont visibles en premier.

157
00:12:19,340 --> 00:12:24,590
Alors maintenant, si nous rafraîchissons et ils vont à facile, nous avons trois jouer un jeu.

158
00:12:24,760 --> 00:12:26,160
Je clique sur dur.

159
00:12:26,380 --> 00:12:28,070
Maintenant, nous avons six appelants.

160
00:12:28,070 --> 00:12:30,520
Jouons à un jeu.

161
00:12:30,520 --> 00:12:33,700
Là nous allons cliquer sur facile et nous retournons à trois.

162
00:12:33,700 --> 00:12:34,280
D'accord.

163
00:12:34,450 --> 00:12:37,390
Donc vous pouvez voir que nous avons nettoyé beaucoup de code ici.

164
00:12:37,510 --> 00:12:39,480
C'était beaucoup plus long.

165
00:12:39,480 --> 00:12:41,360
C'est comme trois fois au moins au moins.

166
00:12:41,380 --> 00:12:46,120
Et deux écouteurs cliqués différents et maintenant notre code est relativement polyvalent.

167
00:12:46,120 --> 00:12:54,040
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.

168
00:12:54,040 --> 00:13:09,160
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 .

169
00:13:09,430 --> 00:13:17,630
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.

170
00:13:17,650 --> 00:13:19,500
Donc, cela fait monter beaucoup de code.

171
00:13:19,570 --> 00:13:22,650
Nous nous sommes débarrassés de 10 lignes.

172
00:13:23,170 --> 00:13:26,280
Revenons donc sans parenthèses.

173
00:13:26,600 --> 00:13:29,020
Allons au navigateur et assurez-vous qu'il fonctionne toujours.

174
00:13:29,020 --> 00:13:31,580
Alors jouons un jeu.

175
00:13:31,850 --> 00:13:35,000
Cliquez sur jouer à nouveau et il se réinitialise très bien.

176
00:13:35,320 --> 00:13:40,750
Cliquez sur facile jouer un autre jeu et réinitialise aussi bien.

177
00:13:40,750 --> 00:13:41,430
D'accord.

178
00:13:41,530 --> 00:13:43,340
Donc, nous poussons vers le haut notre code un peu.