1
00:00:00,240 --> 00:00:01,080
Nous saluons le retour.

2
00:00:01,080 --> 00:00:07,350
Dans cette vidéo, nous allons nous concentrer sur l'ajout des boutons faciles et difficiles ici qui auront un impact sur la difficulté du jeu.

3
00:00:07,350 --> 00:00:14,590
Ainsi quand nous chargeons la page vers le haut dur est déjà sélectionnée et nous voyons six boutons différents ici ou six carrés différents.

4
00:00:14,760 --> 00:00:18,610
Et puis je peux cliquer sur facile et qui reste sélectionné.

5
00:00:18,900 --> 00:00:21,180
Et nous n'avons que trois carrés à choisir.

6
00:00:21,270 --> 00:00:23,270
Et puis je peux revenir à cœur.

7
00:00:23,520 --> 00:00:26,860
Nous allons commencer par ajouter les deux boutons dont nous avons besoin.

8
00:00:27,000 --> 00:00:31,050
Donc, je vais aller dans mon HMO et ajouter en deux boutons.

9
00:00:31,560 --> 00:00:33,800
Le premier nous direons facile.

10
00:00:34,020 --> 00:00:37,470
Le second dira dur et se rafraîchira.

11
00:00:37,900 --> 00:00:38,440
D'ACCORD.

12
00:00:38,520 --> 00:00:40,610
Et cela semble très bien pour l'instant.

13
00:00:41,160 --> 00:00:44,030
Vous remarquerez que notre portée ne prend pas encore de place.

14
00:00:44,300 --> 00:00:46,020
Et je vois qu'il y a du texte.

15
00:00:46,020 --> 00:01:01,900
Il pousse ces boutons de suite se concentrera sur le style plus tard, mais il ya un élément du style que je veux mettre l'accent sur ce qui est de le faire regarder sélectionné lorsque la page charge ou lorsque nous choisissons facile ou dur le bouton correspondant devrait rester bleu.

16
00:01:02,160 --> 00:01:06,540
Et la façon dont nous faisons cela est d'utiliser une classe et de transformer cette classe sur et en dehors.

17
00:01:06,540 --> 00:01:12,780
Donc, je vais définir une classe ici et il va être plus simple que ce style style ici, il va juste être une couleur.

18
00:01:12,810 --> 00:01:18,520
Donc, notre couleur de fond et la classe va être appelée sélectionnée parce que c'est ce que nous faisons.

19
00:01:18,720 --> 00:01:22,110
Nous ajoutons la classe sélectionnée au bouton qui est sélectionné.

20
00:01:22,440 --> 00:01:25,870
Et il va juste avoir un ensemble de fond pour vous de commencer.

21
00:01:26,280 --> 00:01:33,820
Et puis ce que nous allons faire est de donner juste le bouton de mode dur classe égale sélectionnée.

22
00:01:34,500 --> 00:01:39,600
Et si nous rafraîchissons sur notre code, vous pouvez voir que dur est engagé.

23
00:01:39,810 --> 00:01:44,540
C'est hideux Oui, mais au moins nous montre que nous sommes sur le mode dur.

24
00:01:44,550 --> 00:01:55,070
Donc, ce que nous voulons faire est d'ajouter le code qui est un commutateur qui quand ils cliquent sur facile et ensuite la partie la plus délicate est montrant les trois couleurs lorsque vous cliquez sur le facile et les six couleurs lorsque vous cliquez sur le cœur.

25
00:01:55,350 --> 00:01:56,340
D'ACCORD.

26
00:01:56,610 --> 00:01:58,580
Commençons ici.

27
00:01:58,650 --> 00:02:08,460
Donc, pour faire fonctionner ces boutons, nous devons les sélectionner dans notre javascript et ensuite avoir quelques auditeurs rapides et faire certains et exécuter du code quand chacun d'eux est cliqué.

28
00:02:08,520 --> 00:02:14,490
Alors laissez-nous le rendre plus facile à sélectionner et je vais commencer par leur donner chacun un ID facile.

29
00:02:14,590 --> 00:02:24,230
DTN, puis dur ETN et nous allons changer cela si vous voyez des drapeaux rouges ici ou si vous pensez que nous utilisons trop d'idées.

30
00:02:24,330 --> 00:02:26,660
Nous allons refactoriser cela en quelques instants.

31
00:02:26,760 --> 00:02:28,630
Mais nous allons commencer par deux identifications différentes.

32
00:02:28,650 --> 00:02:30,500
Bouton facile Bouton dur.

33
00:02:30,660 --> 00:02:32,570
Accédez à notre javascript et sélectionnez-les.

34
00:02:32,580 --> 00:02:40,100
So var easy ETN est identique au sélecteur de requête document doc avec Octa.

35
00:02:40,410 --> 00:02:42,430
Facile ETN.

36
00:02:42,600 --> 00:02:45,210
Assurez-vous que nous capitaliser les choses de la même.

37
00:02:45,270 --> 00:02:46,270
Voilà.

38
00:02:46,650 --> 00:02:54,240
Et la même chose pour dur et je ne sais pas si vous avez pris cela en sublime.

39
00:02:54,240 --> 00:03:06,140
Si vous sélectionnez le mot facile et que vous touchez Kamandi, il sélectionnera automatiquement l'instance suivante et je peux continuer à faire cela pour les sélectionner tous, mais je veux juste ces deux et je vais taper à la place.

40
00:03:06,210 --> 00:03:09,670
Nous avons donc deux boutons et nous pouvons faire quelque chose comme ça.

41
00:03:09,960 --> 00:03:13,690
Easy PTEN ajouter l'écouteur d'événement.

42
00:03:13,800 --> 00:03:23,950
Cliquez et tout ce que nous allons faire est juste d'alerter que le bouton facile a été arrêté juste comme ceci.

43
00:03:24,600 --> 00:03:31,170
Cliquez sur le bouton Alert easy et assurez-vous que cela fonctionne.

44
00:03:31,200 --> 00:03:49,050
Donc, nous rafraîchissons cliquez sur Easy OK dit Easy bouton cliqué puis nous allons dupliquer cela pour le bouton dur et nous allons dire que le bouton dur a été arrêté et rafraîchir facile fonctionne toujours et dur, mais il nous dit que le bouton dur a été cliqué.

45
00:03:49,410 --> 00:03:57,390
Donc, plutôt que de simplement faire que nous allons travailler à obtenir de la classe la classe sélectionnée pour refléter celui qui est sélectionné.

46
00:03:57,810 --> 00:04:02,020
Donc, si nous cliquons sur le bouton facile tout ce que nous voulons faire est simple bouton.

47
00:04:02,070 --> 00:04:11,120
Doc liste de la classe ajouter sélectionné et si nous rafraîchissons maintenant, je clique sur facile.

48
00:04:11,420 --> 00:04:12,920
Il a une classe choisie.

49
00:04:12,940 --> 00:04:19,630
Facile mais le problème est qu'il reste toujours sur le bouton dur de sorte que soit facile à fixer.

50
00:04:19,650 --> 00:04:30,520
Nous voulons juste avoir un bouton dur doc Liste des points de croisement supprimer et maintenant si nous cliquons sur facile le mode dur disparaît.

51
00:04:30,660 --> 00:04:47,630
Mais si nous cliquons sur dur nous n'avons toujours pas cette logique afin que nous puissions corriger cela en copiant simplement ce code et nous allons maintenant avoir des boutons sans classless qui ajoutent la liste sélectionnée de classe de bouton facile que supprimer sélectionné.

52
00:04:48,160 --> 00:04:49,970
OK, testez-le.

53
00:04:50,890 --> 00:04:51,630
D'accord.

54
00:04:51,630 --> 00:05:02,930
Donc nous avons maintenant la partie plus facile fait qui est les deux boutons montrant lequel est actuellement sélectionné et je rafraîchir et dur est automatiquement sélectionné parce que nous avons six éléments.

55
00:05:02,940 --> 00:05:12,730
Ensuite, nous devons ajouter la logique de changer réellement la difficulté non seulement le style de ces boutons ici, mais pour ne montrer que trois éléments ou six carrés.

56
00:05:12,930 --> 00:05:15,840
Nous devons donc faire cela avant de commencer.

57
00:05:15,870 --> 00:05:19,110
Revenons à la solution pour voir comment cela fonctionne.

58
00:05:19,110 --> 00:05:36,510
Donc, si je rafraîchir et je clique sur l'avis facile que nous obtenons de nouvelles couleurs et nous devons le faire parce qu'il ya un risque que j'ai six couleurs ici et la couleur qui est sélectionné ici pourrait être l'un de ces trois que lorsque je clique sur easy Ces trois sont supprimés.

59
00:05:36,510 --> 00:05:39,400
Donc, cela pourrait être un jeu assez brisant bogue.

60
00:05:39,600 --> 00:05:42,860
Donc plutôt que de traiter avec cela, nous allons simplement choisir trois nouvelles couleurs.

61
00:05:42,990 --> 00:05:45,870
Donc, le processus est que nous actualiser cela.

62
00:05:45,930 --> 00:05:54,640
Donc, le processus est quand je clique sur le bouton facile, nous allons générer trois nouvelles couleurs pour le tableau de couleurs vont choisir une couleur de ces trois.

63
00:05:54,750 --> 00:05:57,490
Nous allons mettre à jour qui apparaissent avec une couleur choisie.

64
00:05:57,510 --> 00:05:59,450
Nous allons mettre à jour les trois carrés ici.

65
00:05:59,640 --> 00:06:08,610
Et la partie importante est que nous cachons également les trois autres carrés afin que nous ne les supprimions pas, nous les cachons simplement en mettant l'affichage à aucun.

66
00:06:09,120 --> 00:06:11,010
Et puis la même chose va pour dur.

67
00:06:11,010 --> 00:06:13,930
Nous générons six nouvelles couleurs dans le tableau des couleurs.

68
00:06:13,950 --> 00:06:16,080
Nous choisissons un pour être nos choix colorés.

69
00:06:16,230 --> 00:06:17,850
Nous l'affichons ici.

70
00:06:18,000 --> 00:06:23,740
Ensuite, nous montrons les trois carrés au bas, puis définir chacun d'eux pour avoir une couleur.

71
00:06:24,270 --> 00:06:24,730
D'ACCORD.

72
00:06:24,810 --> 00:06:26,570
Alors abordons ce problème maintenant.

73
00:06:26,820 --> 00:06:31,170
Tout d'abord, lorsque nous cliquons sur le bouton facile, commençons par là.

74
00:06:31,380 --> 00:06:39,520
Nous allons vouloir générer de nouvelles couleurs afin que les couleurs égales génèrent des couleurs aléatoires cette fois 3.

75
00:06:40,410 --> 00:06:50,820
Et puis, une fois que nous avons fait cela, nous allons vouloir choisir une nouvelle couleur choisie afin de choisir la couleur égale choisir la couleur juste comme ça.

76
00:06:50,820 --> 00:06:58,400
Donc, une fois que nous avons nos couleurs et notre couleur choisie, nous pouvons commencer par changer l'affichage ici pour montrer la nouvelle couleur de l'image.

77
00:06:59,070 --> 00:07:06,050
Donc, c'est aussi simple que de dire que le contenu du texte affiché en couleur est égal à la couleur choisie.

78
00:07:06,360 --> 00:07:11,410
Et si nous rafraîchissons je vais obtenir des nouvelles couleurs ici juste pour vous montrer quelques choses.

79
00:07:11,580 --> 00:07:19,630
Quand je clique sur facile comme vous l'avez mentionné avant la couleur est en train de changer et dans les coulisses il ya un tableau de couleurs qui change aussi.

80
00:07:19,650 --> 00:07:27,490
Alors regardons ce que les couleurs est en ce moment et puis je clique sur le mode facile et je regarde ce que les couleurs est de nouveau et c'est différent.

81
00:07:27,870 --> 00:07:30,990
Et il a également choisi la couleur est différente.

82
00:07:30,990 --> 00:07:38,190
Maintenant, nous allons parler de la façon dont nous cachons les trois div inférieur lorsque nous cliquons sur le mode facile ou nous pouvons cacher les trois premiers.

83
00:07:38,190 --> 00:07:38,730
Peu importe.

84
00:07:38,730 --> 00:07:46,360
Mais je vais faire le bas trois de la façon dont nous allons faire, c'est en bouclant à travers et en mettant les trois inférieurs afficher la propriété d'être aucun.

85
00:07:46,560 --> 00:07:48,440
Alors laissez-moi vous montrer comment cela fonctionne.

86
00:07:48,510 --> 00:07:49,870
Je vais juste choisir l'un d'entre eux.

87
00:07:49,980 --> 00:08:01,850
Alors nous allons faire un sélecteur de requête de document tous les carrés ou un carré et ensuite travailler avec le cinquième.

88
00:08:02,250 --> 00:08:11,320
Eh bien en fait le sixième avec un index de cinq et puis définir que l'affichage de style d'être aucun.

89
00:08:12,150 --> 00:08:13,760
Et vous verrez qu'il disparaît.

90
00:08:13,770 --> 00:08:19,000
Et puis si je veux qu'il revienne que je vais si nous cliquons sur le mode dur, je dois juste dire le style.

91
00:08:19,050 --> 00:08:22,160
L'affichage est égal au verrou.

92
00:08:22,500 --> 00:08:23,280
D'accord.

93
00:08:23,490 --> 00:08:30,980
Donc, allons de l'avant et de mettre en œuvre dans notre code de la manière qui permettra d'atteindre ce est en bouclant tous les six au début.

94
00:08:31,170 --> 00:08:34,820
Et pour les trois premiers nous allons leur donner une nouvelle couleur.

95
00:08:35,040 --> 00:08:37,380
Et pour les trois derniers, nous allons les cacher.

96
00:08:37,410 --> 00:08:40,380
Donc, plutôt que d'avoir deux boucles à faire que nous allons le faire à la fois.

97
00:08:40,560 --> 00:08:43,980
Donc pour var I est égal à zéro.

98
00:08:43,980 --> 00:08:48,140
J'ai juste moins de carrés de longueur.

99
00:08:48,300 --> 00:08:54,390
De plus, nous allons profiter du fait que les couleurs a trois éléments en elle.

100
00:08:54,390 --> 00:08:58,000
Donc, nous allons faire quelque chose comme ça si les couleurs I.

101
00:08:58,440 --> 00:09:02,350
Donc, s'il ya une couleur suivante, cela se passera sur les trois premiers.

102
00:09:02,610 --> 00:09:11,020
Nous allons écrire des carrés que je stylise le fond est égal à la couleur.

103
00:09:12,660 --> 00:09:22,740
Donc, pour les trois premiers dans notre cas parce que les couleurs ont seulement trois éléments, nous allons boucler tous les carrés et vérifier s'il ya une couleur à cet index.

104
00:09:22,770 --> 00:09:27,320
Et s'il y a nous allons changer la couleur de ces trois premiers.

105
00:09:27,390 --> 00:09:29,160
Alors laissez-nous nous assurer que cela fonctionne.

106
00:09:29,160 --> 00:09:33,990
Je clique sur facile et vous verrez que les trois premiers changent.

107
00:09:33,990 --> 00:09:35,470
Nous sommes donc proches.

108
00:09:35,520 --> 00:09:38,550
Tout ce que nous voulons faire maintenant est de masquer les trois derniers.

109
00:09:39,000 --> 00:09:41,040
Donc, nous ferons cela avec autrement.

110
00:09:42,370 --> 00:09:48,970
Squares I style que l'affichage n'est égal à aucun.

111
00:09:49,600 --> 00:10:00,010
Et si nous rafraîchissons et de le rendre plein écran si je clique sur le mode facile, vous pouvez voir que nous perdons le bas trois et les couleurs des trois premiers changent.

112
00:10:00,640 --> 00:10:03,010
Et essayons de savoir qui est celui-ci.

113
00:10:03,050 --> 00:10:08,850
Soixante-trois rouge 125 vert et un peu de bleu.

114
00:10:08,950 --> 00:10:10,190
Voilà.

115
00:10:10,300 --> 00:10:13,200
Vous pouvez actualiser essayez un peu plus.

116
00:10:13,210 --> 00:10:19,030
Nous avons un petit problème que je rafraîchir certains de ces et je clique sur le mode facile.

117
00:10:19,030 --> 00:10:21,010
Nous ne produisons ici que trois couleurs.

118
00:10:21,140 --> 00:10:26,600
Mais si je clique sur le bouton de nouvelles couleurs, je vais vous montrer ce que les couleurs ressemble en ce moment.

119
00:10:26,740 --> 00:10:27,640
Ce sont trois items.

120
00:10:27,760 --> 00:10:32,330
Si je clique sur de nouvelles couleurs et puis je regarde les couleurs.

121
00:10:33,070 --> 00:10:38,340
Il s'agit en fait de six éléments et c'est parce que nous ne sommes pas en train de suivre le mode dans lequel nous sommes.

122
00:10:38,350 --> 00:10:40,440
Donc, ce code est juste ici sur le bouton de réinitialisation.

123
00:10:40,510 --> 00:10:44,520
Nous disons simplement que les couleurs sont égales à générer des couleurs aléatoires.

124
00:10:44,680 --> 00:10:46,370
Nous devons donc régler ce problème.

125
00:10:46,600 --> 00:10:54,700
Mais avant que nous faisons que nous allons obtenir notre bouton dur de sorte qu'il nous ramène à six carrés et chacun a sa propre couleur pour le faire.

126
00:10:54,850 --> 00:11:00,000
Je vais juste prendre une partie de ce code et le dupliquer ici, ce qui est toujours un mauvais signe.

127
00:11:00,490 --> 00:11:03,250
Et c'est pourquoi nous allons refactoriser ce en un peu.

128
00:11:03,280 --> 00:11:04,870
Donc, la première chose que je veux faire.

129
00:11:04,870 --> 00:11:09,380
Je vais juste copier tout cela dans nos couleurs d'écouteur d'événement de bouton dur.

130
00:11:09,400 --> 00:11:16,000
Il va être de six coloris de couleurs de choix sera le même contenu de texte d'affichage en couleur est le même.

131
00:11:16,000 --> 00:11:18,880
Et puis nous allons faire le tour de tous dans cette boucle.

132
00:11:18,880 --> 00:11:20,590
Nous devons faire deux choses différentes.

133
00:11:20,590 --> 00:11:24,200
La première consiste à attribuer une nouvelle couleur à chaque carré.

134
00:11:24,460 --> 00:11:29,980
Mais nous avons également potentiellement besoin de s'assurer que les trois sont unhidden au fond.

135
00:11:30,430 --> 00:11:38,990
Donc, nous allons nous débarrasser de l'instruction if pour l'instant et nous allons simplement définir tous les carrés d'avoir une couleur de fond d'être des couleurs.

136
00:11:39,430 --> 00:11:43,880
Et toutes les places auront un affichage de bloc.

137
00:11:44,230 --> 00:11:51,710
Donc, c'est un peu gaspilleur parce que nous n'avons besoin que des trois derniers techniquement et nous les réinitialisons tous pour qu'ils soient des blocs d'affichage.

138
00:11:51,850 --> 00:11:54,940
Mais c'est une chose vraiment mineure sur laquelle nous pouvons nous concentrer plus tard.

139
00:11:55,000 --> 00:12:03,150
So let's juste voir si cela fonctionne rafraîchir nous dit que nous avons une erreur de syntaxe sur la ligne 36 Voyons ce que nous sommes absents.

140
00:12:03,670 --> 00:12:05,600
Et nous avons juste un accolade supplémentaire ici.

141
00:12:05,710 --> 00:12:10,210
Donc, si nous économisons maintenant et rafraîchir, nous avons six couleurs comme nous avons toujours.

142
00:12:10,210 --> 00:12:12,190
Si je clique sur easy nous obtenons trois.

143
00:12:12,310 --> 00:12:15,260
Si je clique sur dur je vais maintenant revenir à six.

144
00:12:15,370 --> 00:12:18,780
Je reçois une nouvelle couleur ici et nous allons juste vous assurer que cela continue à fonctionner.

145
00:12:18,850 --> 00:12:23,280
Donc facile facile difficile dur quand je vais au mode dur.

146
00:12:23,380 --> 00:12:25,510
Nous allons cliquer sur de nouvelles couleurs à nouveau.

147
00:12:25,570 --> 00:12:29,570
Retournez à facile revenir à dur facile et dur.

148
00:12:29,650 --> 00:12:29,930
D'accord.

149
00:12:29,920 --> 00:12:32,320
Et jouons à ceci et voyons si cela fonctionne.

150
00:12:32,320 --> 00:12:37,410
Ainsi la couleur de choix est 196 170 57.

151
00:12:37,450 --> 00:12:42,240
Donc beaucoup de lire beaucoup de vert et un peu de bleu.

152
00:12:42,460 --> 00:12:44,970
Donc, c'est beaucoup de rouge et le vert est une couleur jaune.

153
00:12:45,070 --> 00:12:46,650
Donc, ce ne sera pas l'un ou l'autre.

154
00:12:46,660 --> 00:12:52,120
Celui-ci va être celui-ci très rapide et qui ressemble à son fonctionnement très bien.

155
00:12:52,380 --> 00:12:55,880
Si je clique de nouveau sur easy nous retournons à trois couleurs.

156
00:12:56,050 --> 00:13:11,350
La question la plus urgente qui nous fait face est quand je suis en mode facile et je clique sur jouer à nouveau, cela va générer six couleurs pas trois et il va choisir une couleur aléatoire sur six qui ne peut pas nous afficher qui va À poser problème.

157
00:13:11,350 --> 00:13:15,730
Tout ce que nous devons faire est d'avoir une variable qui conserve la trace de ce mode que nous sommes sur.

158
00:13:15,730 --> 00:13:19,650
Facile ou dur ou le nombre de carrés trois ou six.

159
00:13:19,840 --> 00:13:21,530
Nous allons faire cela ici.

160
00:13:21,640 --> 00:13:40,180
Nous aurons une variable appelée nombre de carrés et qui commencera à 6 et nous allons simplement déclarer que là-haut et dire que les couleurs égales générer des couleurs aléatoires de nombre et nous allons faire le nombre de carrés ou de carrés.

161
00:13:40,240 --> 00:13:47,020
C'est un peu plus facile comme ça et économiser.

162
00:13:47,140 --> 00:13:50,120
Et puis nous devons remplacer cela dans quelques endroits.

163
00:13:50,170 --> 00:14:00,040
Donc, lorsque nous cliquons sur le mode facile que vous voulez numb carrés d'être trois et puis nous générer des couleurs au hasard, sans carrés.

164
00:14:00,430 --> 00:14:18,850
Et puis plus bas lorsque nous cliquons sur le bouton dur, nous voulons que quelques carrés soient 6 carrés si numériques égale six et ensuite générer des couleurs aléatoires carrés et puis il ya quelques autres endroits ici quand nous cliquons sur ce bouton de réinitialisation.

165
00:14:18,850 --> 00:14:24,540
Nous voulons générer le nombre correct de couleurs qui seraient Nahm carrés là aussi.

166
00:14:24,580 --> 00:14:28,970
Nous espérons néanmoins que cela vous aidera dans vos recherches. Original en anglais Language Weaver Notez cette traduction: Merci pour votre évaluation Mauvaise Bonne

167
00:14:29,530 --> 00:14:33,080
Nous allons au mode facile et gagnons celui-ci.

168
00:14:33,190 --> 00:14:35,280
Donc, surtout rouge un peu bleu.

169
00:14:35,320 --> 00:14:37,350
Pas celui-ci.

170
00:14:37,660 --> 00:14:38,740
Pas celui là.

171
00:14:38,740 --> 00:14:39,830
Voilà.

172
00:14:39,880 --> 00:14:47,140
Et si je clique sur jouer à nouveau, nous allons nous assurer que lorsque je tape des couleurs, nous ne voyons que trois couleurs.

173
00:14:47,140 --> 00:14:55,240
Et si je regardais les espoirs de couleurs choisies choisies une couleur que vous pouvez voir c'est à l'intérieur de la gamme de couleurs.

174
00:14:55,450 --> 00:14:56,880
Nous n'avons donc plus à nous préoccuper de cela.