1
00:00:00,650 --> 00:00:02,670
OK nous reviendrons dans cette vidéo.

2
00:00:02,670 --> 00:00:05,040
Nous allons travailler sur quelques nouvelles fonctionnalités.

3
00:00:05,040 --> 00:00:08,190
Le premier est quand je gagne le match.

4
00:00:08,460 --> 00:00:09,410
Il me dit correct.

5
00:00:09,630 --> 00:00:15,440
Et puis je peux cliquer de nouveau jouer pour obtenir de nouvelles couleurs et si je n'ai pas encore gagné.

6
00:00:15,530 --> 00:00:19,460
Mais je veux aussi de nouvelles couleurs parce que pour une raison quelconque, je n'aime pas les couleurs que j'ai.

7
00:00:19,680 --> 00:00:21,750
Je peux aussi cliquer sur ce bouton de nouvelles couleurs.

8
00:00:21,930 --> 00:00:32,770
Donc, fondamentalement, nous avons besoin d'un bouton qui va réinitialiser le jeu de choisir de nouvelles couleurs choisir une nouvelle couleur aléatoire apparaissent sur les six couleurs aléatoires et nous reviendrons au mode facile et difficile dernière.

9
00:00:32,940 --> 00:00:35,870
Donc ce bouton fait la même chose.

10
00:00:36,040 --> 00:00:44,150
Le texte change cependant si nous avons gagné le jeu et il a demandé si nous voulons jouer de nouveau afin que nous puissions cliquer le jeu de nouveau et qui le réinitialisera.

11
00:00:44,220 --> 00:00:48,540
Mais je peux aussi cliquer sur de nouvelles couleurs et cela va aussi le réinitialiser.

12
00:00:48,570 --> 00:00:49,840
Voilà ce sur quoi nous allons nous concentrer.

13
00:00:50,010 --> 00:01:00,290
Et pour commencer je vais aller de l'avant et ajouter dans le bouton et ajouter la bande qui passe de sorte que la bande contiendra ce bouton pour une nouvelle couleur ou pour jouer à nouveau.

14
00:01:00,870 --> 00:01:02,890
Et il contient le message que nous avons déjà.

15
00:01:03,060 --> 00:01:04,970
Et puis les deux boutons que nous allons faire plus tard.

16
00:01:05,250 --> 00:01:14,240
Donc, si nous allons la première chose que nous avons besoin de faire, nous avons déjà un div je vais juste lui donner id de la bande et puis nous pouvons utiliser cela.

17
00:01:14,550 --> 00:01:19,560
Et puis nous avons déjà notre portée à l'intérieur qui va montrer quelque chose comme correcte ou essayez à nouveau.

18
00:01:19,590 --> 00:01:29,820
Et l'intérieur ici nous ajouterons juste notre bouton et ce bouton commencera par dire de nouvelles couleurs que nous pouvons économiser nous rafraîchissons.

19
00:01:30,160 --> 00:01:33,140
OK qui semble à peu près aussi mauvais que vous attendez.

20
00:01:33,330 --> 00:01:40,210
Allons-y et ajoutez la couleur d'arrière-plan blanc et centrez tout dans cette div Donc notre div s'appelle stripe.

21
00:01:40,590 --> 00:01:45,220
Allons à notre C Ss et nous allons sélectionner Strype qui est un ID.

22
00:01:45,360 --> 00:01:48,970
Donc, nous devons utiliser la bande avec une réflexion après coup.

23
00:01:49,260 --> 00:01:54,580
Et nous allons définir un fond de couleur d'arrière-plan pour être blanc.

24
00:01:54,660 --> 00:02:09,030
Je vais mettre la hauteur à 30 pixels de sorte que nous avons une div belle et grande sont div relativement élevé et je vais définir l'alignement du texte pour être Centre.

25
00:02:09,300 --> 00:02:13,330
Et maintenant, si je rafraîchir vous obtenez un div blanc va tout le chemin à travers.

26
00:02:13,350 --> 00:02:15,220
C'est un peu plus grand qu'il ne l'était.

27
00:02:15,240 --> 00:02:17,230
Nous avons un bouton ici juste pour rien.

28
00:02:17,400 --> 00:02:23,640
Et si je gagne ou que je perds ou que je reçois la mauvaise réponse, il y a une portée que vous ne pouvez pas voir.

29
00:02:23,640 --> 00:02:27,290
Et c'est parce que le texte de cette portée est blanc.

30
00:02:28,380 --> 00:02:38,690
Donc, ce que vous pourriez penser à faire est d'entrer dans notre stripe div et de dire la couleur du texte doit être noir, mais malheureusement, cela ne fonctionne pas.

31
00:02:38,880 --> 00:02:59,710
Et c'est une question de spécificité parce que nous disons qu'avec cette ligne ici tout à l'intérieur de la chose avec l'idée de la bande doit être noir texte couleur noire et vous pensez que c'est bien snidey qui est super spécifique si vous pouvez réfléchir à Nos premières conférences CSS spécificité et l'ID est très spécifique.

32
00:02:59,790 --> 00:03:05,440
La chose est bien que ce soit le réglage des couleurs à être noir sur le div avec ID stripe.

33
00:03:05,970 --> 00:03:20,630
Ensuite, nous définissons tous les intervalles de sorte que vous puissiez voir que la couleur est blanche pour que ce paramètre soit blanc et que cela soit plus précis car nous ciblons l'élément lui-même plutôt que le parent et le héritons de la couleur.

34
00:03:21,090 --> 00:03:22,570
Nous avons donc quelques options.

35
00:03:22,590 --> 00:03:25,960
Ce que je vais faire est en fait juste se débarrasser de cela pour l'instant.

36
00:03:26,040 --> 00:03:42,960
Nous n'allons pas mettre la couleur à être blanc plus et nous pouvons rafraîchir et vous verrez que cela ne change pas de couleur, il est encore une portée blanche, même si nous avons débarrassé de la ligne qui dit que toutes les portées sont blanches et c'est Car il est à l'intérieur d'un H1 et il hérite de la couleur de texte H1 qui est blanc.

37
00:03:42,990 --> 00:03:45,590
De la même manière que cette travée ici est noire.

38
00:03:45,600 --> 00:03:55,160
Il a hérité de la couleur de texte du noir ou juste régulière de couleur noire de la div stripe qui est autour de lui que vous pouvez voir ici la couleur noire.

39
00:03:55,410 --> 00:03:56,770
Et c'est notre frappé.

40
00:03:57,060 --> 00:03:57,660
D'ACCORD.

41
00:03:57,810 --> 00:04:06,800
Alors travaillons maintenant sur obtenir ce bouton pour réinitialiser le jeu afin de commencer, nous devons ajouter un écouteur d'événement.

42
00:04:06,870 --> 00:04:09,750
Et avant que nous puissions faire cela, nous devons sélectionner ce bouton.

43
00:04:09,960 --> 00:04:21,000
Donc, je vais donner ce bouton et l'ID ici nous allons juste appeler ID équivaut à réinitialiser et puis nous allons sélectionner ce bouton de réinitialisation au lieu d'un Javascript.

44
00:04:21,000 --> 00:04:31,980
Donc, le bouton de réinitialisation de var est égal au document que le sélecteur de requête avec notre octave ou réinitialiser.

45
00:04:31,980 --> 00:04:37,120
Et puis, comme toujours, je voudrais ajouter mon simple auditeur d'événement de test.

46
00:04:37,140 --> 00:04:40,680
Donc le bouton de réinitialisation n'ajoute l'écouteur d'événement.

47
00:04:40,860 --> 00:04:52,820
Cliquez et quand nous cliquons sur tout ce que nous allons faire est de faire une simple alerte rapide bouton de réinitialisation juste comme ça être rafraîchir.

48
00:04:52,970 --> 00:04:57,590
Et si je clique dessus, je reçois mon alerte et cela signifie que nous sommes prêts à partir.

49
00:04:57,590 --> 00:05:01,030
Donc, nous pouvons travailler sur la logique pour réinitialiser.

50
00:05:01,250 --> 00:05:03,890
Donc, ce que nous devons faire, écrivons le pseudo-code.

51
00:05:03,890 --> 00:05:10,030
Lorsque vous cliquez sur ce bouton besoin de générer toutes les nouvelles couleurs.

52
00:05:10,040 --> 00:05:22,030
Nous avons besoin de choisir une nouvelle couleur aléatoire de tableau et ensuite nous avons besoin de changer les couleurs des carrés sur la page.

53
00:05:22,280 --> 00:05:28,910
Donc, pour générer toutes les nouvelles couleurs nous avons déjà déjà cette fonction existante générer des couleurs aléatoires.

54
00:05:29,030 --> 00:05:33,940
Donc, nous allons simplement dire que les couleurs est maintenant égale à générer des couleurs aléatoires de six.

55
00:05:34,580 --> 00:05:42,860
Et puis nous allons choisir une nouvelle couleur aléatoire afin de choisir la couleur est maintenant égale à choisir la couleur de la méthode ou la fonction que nous avons définie.

56
00:05:42,860 --> 00:05:49,540
Il ya une autre chose que nous avons réellement besoin de faire qui est de changer cette couleur d'affichage pour correspondre à la couleur des nouveaux pics.

57
00:05:49,850 --> 00:06:01,090
Donc, nous allons simplement dire changer l'affichage couleur pour correspondre à la couleur choisie de sorte que l'on est simple.

58
00:06:01,160 --> 00:06:23,110
Tout ce que nous devons faire est de dire que le contenu de texte d'affichage couleur de couleur est égal à la couleur choisie et si nous rafraîchissons notre page et nous essayons de cliquer sur de nouvelles couleurs ce qu'il fait est de générer six nouvelles couleurs.

59
00:06:23,120 --> 00:06:25,400
Nous ne les voyons pas encore parce que nous n'avons pas ce code.

60
00:06:25,580 --> 00:06:31,410
Et puis il est de choisir un de ceux que la couleur choisie et ensuite changer ce que nous voyons ici pour correspondre à la couleur picta.

61
00:06:31,730 --> 00:06:36,220
Donc, il nous donne une nouvelle couleur aléatoire là-haut et six couleurs aléatoires dans les coulisses.

62
00:06:36,230 --> 00:06:42,230
Donc la dernière pièce est de refléter ces six nouvelles couleurs sur la page et nous l'avons fait avant.

63
00:06:42,260 --> 00:06:50,440
En bas ici nous bouclons à travers tous les carrés et nous changeons le style carré que l'arrière-plan pour être des couleurs.

64
00:06:50,450 --> 00:06:56,060
Je vais donc commencer par simplement dupliquer tout cela ici et nous refactoriserons cela.

65
00:06:56,350 --> 00:06:58,340
Mais pour commencer à tout mettre ici.

66
00:06:58,370 --> 00:07:12,600
Donc bouclez par tous les carrés carrés pour flotter plus et puis tout ce que nous avons besoin de faire est de dire carrés, je le style que le fond est égal aux couleurs.

67
00:07:13,020 --> 00:07:15,820
Je vais sauver.

68
00:07:16,070 --> 00:07:21,660
Et si nous rafraîchissons et que nous cliquons sur de nouvelles couleurs, il génère 60 couleurs aléatoires.

69
00:07:21,740 --> 00:07:22,820
Il en choisit un.

70
00:07:22,820 --> 00:07:30,360
Il met à jour l'affichage pour refléter la couleur de l'image et il change tous les six carrés pour correspondre aux six nouvelles couleurs.

71
00:07:30,710 --> 00:07:34,730
Alors essayons-le et voyons si notre logique précédente tient aussi.

72
00:07:35,240 --> 00:07:35,850
D'ACCORD.

73
00:07:36,290 --> 00:07:39,130
Donc, celui-ci est une quantité décente de rouge.

74
00:07:39,140 --> 00:07:41,460
Très peu de vert et une quantité décente de bleu.

75
00:07:41,840 --> 00:07:45,280
Essayons de cliquer sur certains que nous ne pensons pas être justes.

76
00:07:46,160 --> 00:07:48,880
Et maintenant, allons-y pour l'un des pourpres.

77
00:07:49,070 --> 00:07:50,940
Il semble donc un peu plus rouge le bleu.

78
00:07:50,960 --> 00:07:56,510
Donc, je vais deviner et nous avons raison et il semble que les choses fonctionnent toujours très bien.

79
00:07:56,540 --> 00:07:58,470
De nouvelles couleurs rapides à nouveau.

80
00:07:58,610 --> 00:08:00,320
Nous voulons réinitialiser ceci.

81
00:08:00,320 --> 00:08:01,960
C'est une chose cosmétique vraiment mineure.

82
00:08:02,030 --> 00:08:11,000
Mais lorsque nous cliquons sur de nouvelles couleurs, nous devrions réinitialiser l'affichage ici pour qu'il revienne au noir ou à cette couleur gris foncé.

83
00:08:11,000 --> 00:08:18,480
L'autre chose que nous voulons faire, c'est que lorsque nous voulons que le jeu reprenne, comme vous pouvez le voir ici, je vais gagner ici.

84
00:08:18,530 --> 00:08:20,350
Celui-ci est beaucoup de vert.

85
00:08:20,540 --> 00:08:24,980
Je gagne et ça me dit de jouer encore et ça fait la même chose.

86
00:08:24,980 --> 00:08:29,260
Fonctionnellement il ne change pas vraiment c'est juste nous et le texte différent.

87
00:08:29,300 --> 00:08:31,060
C'est simple à faire.

88
00:08:31,100 --> 00:08:35,150
Tout ce que nous devons faire est de trouver où le code est pour vérifier si vous gagnez.

89
00:08:35,180 --> 00:08:36,240
C'est juste ici.

90
00:08:36,620 --> 00:08:39,500
Et puis nous voulons simplement changer le contenu textuel de ce bouton.

91
00:08:39,740 --> 00:08:41,820
Donc, le bouton a été appelé bouton de réinitialisation.

92
00:08:41,930 --> 00:08:52,700
Donc, le bouton de réinitialisation que le contenu du texte est égale à jouer à nouveau avec un rafraîchissement d'un point d'interrogation, il indique de nouvelles couleurs.

93
00:08:52,790 --> 00:08:54,560
Maintenant, essayons d'en jouer un.

94
00:08:54,740 --> 00:08:58,750
Donc, celui-ci est beaucoup de rouge et beaucoup de vert et un peu de bleu.

95
00:08:58,790 --> 00:09:02,070
Donc beaucoup de rouge et beaucoup de vert va nous donner une couleur jaune.

96
00:09:02,210 --> 00:09:04,100
Alors réduisons certains d'entre eux.

97
00:09:04,100 --> 00:09:08,180
Et puis un peu de bleu va le rendre plus léger et plus lumineux.

98
00:09:08,480 --> 00:09:13,590
Donc, si nous essayons un de ces comme ceci ou celui-ci, vous verrez qu'ils n'ont pas tout à fait raison.

99
00:09:13,880 --> 00:09:17,230
Et c'est notre réponse ici et il nous dit de jouer à nouveau.

100
00:09:17,300 --> 00:09:20,120
Et très rapide et il fait exactement la même chose.

101
00:09:20,180 --> 00:09:23,570
La dernière chose que j'ai mentionné est de changer la couleur de fond arrière.

102
00:09:23,570 --> 00:09:28,430
Donc, ici, nous pouvons le faire à la fin du bouton de réinitialisation.

103
00:09:28,520 --> 00:09:30,950
Nous allons simplement choisir ce H-1.

104
00:09:31,200 --> 00:09:34,610
C'est un point que nous avons choisi ici.

105
00:09:34,670 --> 00:09:37,090
C'est le fond d'appel.

106
00:09:37,160 --> 00:09:40,600
UPS est égal.

107
00:09:40,640 --> 00:09:49,560
Et c'est que hexadécimal 2 3 2 3 2 3 qui est si vous avez oublié que vous pourriez aller regarder dans SEE évaluer la couleur de fond du corps.

108
00:09:49,800 --> 00:09:55,410
Ou nous le mettons ici quand nous éliminons une des couleurs si vous choisissez la mauvaise couleur.

109
00:09:55,580 --> 00:09:58,680
Nous changeons la couleur d'arrière-plan pour qu'elle soit la même que le corps.

110
00:09:59,150 --> 00:10:02,130
OK, actualisons de nouvelles couleurs.

111
00:10:02,330 --> 00:10:03,820
Gagnez maintenant.

112
00:10:04,010 --> 00:10:11,300
Juste rapide aléatoire juste pour le temps, nous cliquons sur jouer à nouveau et il change en arrière à un fond noir.

113
00:10:11,310 --> 00:10:13,060
Ou le fond gris foncé.

114
00:10:13,570 --> 00:10:15,530
OK, c'est tout pour cette vidéo.

115
00:10:15,530 --> 00:10:19,790
Ensuite, nous allons ajouter les boutons pour choisir entre le mode facile et dur.