1
00:00:00,700 --> 00:00:02,670
OK, nous allons reprendre là où nous en étions.

2
00:00:02,790 --> 00:00:08,620
Nous allons commencer à ajouter dans certains des comportements pour lorsque vous cliquez sur la bonne couleur et lorsque vous cliquez sur la mauvaise couleur.

3
00:00:08,640 --> 00:00:10,860
Commençons donc par choisir la mauvaise couleur.

4
00:00:11,010 --> 00:00:16,000
Ce que nous voulons faire est de faire fondre ceci afin qu'il correspond à la couleur de fond ici.

5
00:00:16,170 --> 00:00:18,070
C'est donc assez simple.

6
00:00:18,070 --> 00:00:31,080
C'est juste une question d'écrire ce style de point que le fond est égal et alors nous avons juste besoin de faire correspondre la couleur que nous avons fixée dans notre C Ss ressemble à cela.

7
00:00:31,080 --> 00:00:33,980
Donc nous allons coller dans et enregistrer.

8
00:00:34,530 --> 00:00:35,470
Testez-le.

9
00:00:35,610 --> 00:00:37,050
Cliquez sur l'un des mauvais.

10
00:00:37,140 --> 00:00:41,670
Vous pouvez le voir s'effacer et si je clique sur le droit, nous obtenons toujours notre alerte.

11
00:00:42,060 --> 00:00:43,710
OK alors je vais rafraîchir.

12
00:00:43,710 --> 00:00:45,490
C'est donc ce que nous allons commencer.

13
00:00:45,600 --> 00:00:52,280
Et l'autre chose que nous voulons arriver est que nous voulons un affichage afin que vous puissiez voir ici ici.

14
00:00:52,320 --> 00:00:56,700
Il y aura un affichage si je clique sur l'une des couleurs et il dit essayez de nouveau.

15
00:00:57,090 --> 00:01:05,620
Et si je l'ai droit comme ici, il affiche correcte et puis se concentrer sur les autres choses comme changer la couleur.

16
00:01:05,820 --> 00:01:07,290
Une fois que nous obtenons cette première partie.

17
00:01:07,350 --> 00:01:14,370
Donc, ajoutons dans ce paragraphe ou la portée en fait est ce qu'il est et de le faire afficher le message correct.

18
00:01:14,370 --> 00:01:22,680
Nous retournons donc à notre HMO et nous allons ajouter un autre div, et nous avons en fait trois ou quatre pièces différentes qui arriveront éventuellement.

19
00:01:22,680 --> 00:01:26,890
Pour l'instant il va juste être une petite portée qui va à l'intérieur de cette div.

20
00:01:27,450 --> 00:01:29,220
Donc, comme je l'ai mentionné, il sera plus.

21
00:01:29,220 --> 00:01:36,480
Pour l'instant, c'est juste la période où il va être vide pour commencer car je rafraîchir la page, vous pouvez voir il n'y a pas de message ici.

22
00:01:36,480 --> 00:01:41,700
Donc nous allons aller ici, j'ai une période vide et nous allons lui donner un I.D. Et nous allons simplement appeler le message.

23
00:01:41,910 --> 00:01:45,410
Et de cette façon, nous pouvons le sélectionner au lieu de notre Javascript.

24
00:01:45,420 --> 00:01:49,000
Alors allons à notre javascript maintenant et sélectionnez cela.

25
00:01:49,140 --> 00:02:02,870
Donc, ici, nous l'appellerons l'affichage des messages de ferme est égal au document et nous allons faire un sélecteur de requête sélecteur de requête et que nous appelons ce message.

26
00:02:03,090 --> 00:02:04,410
Nous avons besoin de l'ID.

27
00:02:05,010 --> 00:02:06,400
Donc nous avons besoin de l'arc à Thor.

28
00:02:06,960 --> 00:02:09,110
Et puis si l'utilisateur devine mal.

29
00:02:09,210 --> 00:02:20,260
Tout ce que nous devons faire est d'écrire le message afficher le contenu du texte point égal essayer de nouveau.

30
00:02:21,180 --> 00:02:25,560
Et si nous rafraîchissons et que vous cliquez sur le mauvais, c'est vraiment difficile à voir.

31
00:02:25,920 --> 00:02:28,470
Donc nous devons changer la couleur d'arrière-plan ou la couleur du texte.

32
00:02:28,580 --> 00:02:30,120
On peut faire ça ici.

33
00:02:30,420 --> 00:02:37,320
Nous allons simplement dire que tous les span doivent avoir la couleur blanche et si nous sommes frais.

34
00:02:37,320 --> 00:02:39,620
Maintenant, j'ai cliqué sur le mauvais.

35
00:02:39,690 --> 00:02:41,330
Il me dit d'essayer à nouveau.

36
00:02:41,910 --> 00:02:42,250
D'ACCORD.

37
00:02:42,270 --> 00:02:44,620
Et nous continuons d'obtenir cela jusqu'à ce que j'obtienne le bon.

38
00:02:44,760 --> 00:02:46,180
Et nous obtenons toujours cette alerte.

39
00:02:46,410 --> 00:02:54,680
Donc, si nous obtenons le bon, ce que nous voulons faire, c'est changer ce que nous affichons dans cet affichage de message.

40
00:02:54,780 --> 00:02:57,060
Nous voulons le changer pour être correct.

41
00:02:57,300 --> 00:03:05,700
Ainsi, le message affiche que le contenu du texte est correct.

42
00:03:06,630 --> 00:03:07,980
Juste comme ça.

43
00:03:08,080 --> 00:03:11,000
Et maintenant, si nous essayons cela, nous nous trompons et essayez à nouveau.

44
00:03:11,190 --> 00:03:13,730
Nous le faisons bien et il nous dit correct.

45
00:03:14,100 --> 00:03:14,340
D'ACCORD.

46
00:03:14,340 --> 00:03:21,280
Nous avons donc cette logique de base là où nous vérifions si nous avons raison ou non et que nous affichons quelque chose.

47
00:03:21,420 --> 00:03:28,940
La prochaine chose que nous pourrions faire est d'ajouter la fonctionnalité où lorsque vous obtenez la bonne réponse tous les carrés changent de couleur pour correspondre à cette réponse.

48
00:03:28,950 --> 00:03:32,180
Alors ici, vous cliquez sur la bonne réponse, ils changent tous de degré.

49
00:03:32,340 --> 00:03:35,370
Et puis nous pouvons également faire l'arrière-plan de ce H1 ainsi.

50
00:03:35,370 --> 00:03:38,360
Donc, la première chose que nous devons faire pour que cela fonctionne.

51
00:03:38,580 --> 00:03:43,900
En fait, je vais écrire une fonction distincte pour le faire pour moi juste pour garder mon code un peu plus organisé.

52
00:03:44,040 --> 00:04:01,430
Changer de couleurs et il faudra un argument unique une chaîne de couleur et puis à l'intérieur d'ici, nous avons besoin de boucler tous les carrés de changer chaque couleur pour correspondre à la couleur donnée.

53
00:04:02,550 --> 00:04:15,770
Donc, pour parcourir tous les carrés que nous avons déjà fait que juste une question de quatre VAR I est égale à zéro est inférieure à la longueur du point de couleur ou des couleurs que la longueur plus plus.

54
00:04:15,970 --> 00:04:21,880
Et puis à l'intérieur est où nous aurons besoin de changer chaque couleur et nous avons fait cela avant déjà.

55
00:04:22,080 --> 00:04:23,530
C'est juste des couleurs.

56
00:04:23,740 --> 00:04:35,260
J'ai obtenu le style de fond difficile égale couleur qui est ce que nous avons fourni techniquement notre code va changer chaque carré unique pour correspondre à la couleur.

57
00:04:35,370 --> 00:04:38,670
Ainsi, y compris celui-ci qui est la couleur correcte.

58
00:04:38,700 --> 00:04:42,640
Il suffit de l'écraser et de le changer à la même couleur qu'il est déjà.

59
00:04:42,660 --> 00:04:59,660
Nous pouvons ajouter un certain code pour corriger cela, mais commençons par ceci et alors nous devons appeler cette fonction changer les couleurs et nous devons passer dans la couleur correcte qui est la variable que nous avons créée ici qui est l'arrière-plan appelé de la couleur qui A été cliqué.

60
00:04:59,790 --> 00:05:00,700
Et nous le faisons.

61
00:05:00,750 --> 00:05:02,080
S'ils le devinent correctement.

62
00:05:02,130 --> 00:05:05,600
Donc, si nous sauvegardons et rafraîchissons voir si nous avons des erreurs.

63
00:05:05,700 --> 00:05:06,330
Nan.

64
00:05:06,630 --> 00:05:07,770
Et maintenant c'est rapide.

65
00:05:07,770 --> 00:05:08,370
Faux.

66
00:05:08,400 --> 00:05:09,030
Faux.

67
00:05:10,050 --> 00:05:22,670
Corriger et nous avons un problème lorsque vous cliquez sur le correct nous dit ne peut pas définir l'arrière-plan de la propriété de undefined si nous regardons ce qu'il est de parler de couleurs Je le style de l'arrière-plan.

68
00:05:22,770 --> 00:05:28,790
Bien sûr, nous avons un problème ici parce que je le fais à notre gamme de couleurs et ce ne devrait pas être nos couleurs.

69
00:05:29,120 --> 00:05:30,570
C'est notre gamme de couleurs.

70
00:05:30,600 --> 00:05:35,070
Il devrait être sur le tableau des carrés qui sont les carrés que nous essayons de changer.

71
00:05:35,060 --> 00:05:39,860
Ce que je faisais était le tableau des couleurs juste les cordes.

72
00:05:39,960 --> 00:05:48,120
Donc, les carrés de longueur et maintenant il devrait être bon d'aller et ils changent tous à la couleur qui a été choisi juste comme ça.

73
00:05:48,120 --> 00:05:48,790
D'accord.

74
00:05:48,900 --> 00:05:55,940
Donc, maintenant, nous allons nous concentrer sur l'obtention des couleurs aléatoires dans le tableau, puis en choisissant une couleur aléatoire de ce tableau.

75
00:05:55,940 --> 00:06:05,910
Donc, je vais commencer par la deuxième chose qui est de choisir une couleur au hasard au lieu de simplement faire automatiquement trois couleurs pour nous aider à choisir un élément aléatoire de ce tableau.

76
00:06:05,910 --> 00:06:07,830
Je vais effectivement faire une fonction.

77
00:06:07,830 --> 00:06:17,910
Et la raison pour laquelle je fais ça, c'est de nettoyer notre code, mais nous allons réellement utiliser cette fonction plus tard parce que chaque fois que nous commençons un nouveau jeu, nous devons choisir une nouvelle couleur.

78
00:06:17,940 --> 00:06:22,040
C'est donc quelque chose que nous allons devoir appeler à plusieurs reprises pour que cela fonctionne.

79
00:06:22,050 --> 00:06:25,200
Je vais commencer par appeler la fonction qui n'existe pas encore.

80
00:06:25,200 --> 00:06:29,460
Donc, je vais dire que la couleur de pick est égale et que l'on nomme.

81
00:06:29,460 --> 00:06:34,760
Choisissez la couleur et ensuite nous devons définir la couleur de sélection.

82
00:06:34,980 --> 00:06:38,420
Donc je viens ici juste le faire au fond pour le choix de fonction maintenant.

83
00:06:38,430 --> 00:06:43,070
Couleur dans cette fonction, nous devons faire deux choses.

84
00:06:43,080 --> 00:06:45,330
On choisit un nombre aléatoire.

85
00:06:45,810 --> 00:06:50,650
Donc, quelque chose comme 0 ou 1 ou 2 tout le chemin vers le dernier index de ce tableau.

86
00:06:51,180 --> 00:06:57,220
Et puis nous avons besoin d'utiliser ce nombre pour accéder à la couleur hors de ce tableau et de retourner cette couleur.

87
00:06:57,300 --> 00:06:59,070
Nous allons donc commencer par choisir un nombre aléatoire.

88
00:06:59,220 --> 00:07:09,420
Et la façon dont nous choisissons un nombre aléatoire dans javascript est d'utiliser des mathématiques aléatoires et mathématiques au hasard choisira un nombre entre 0 et 1 et il ne comprend pas un.

89
00:07:09,420 --> 00:07:16,620
Alors laissez-moi vous montrer que les maths pas aléatoire et c'est une longue décimale longue.

90
00:07:16,620 --> 00:07:28,850
Donc, si nous voulions générer un nombre entre 0 et 6 par exemple pour imiter un Dayrell, nous ferions des mathématiques au hasard, puis le multiplierons.

91
00:07:29,000 --> 00:07:37,320
Dans notre cas, si nous avons fait juste dime 6, nous n'aurions jamais obtenir un nombre au-dessus de cinq virgule neuf neuf neuf neuf.

92
00:07:37,640 --> 00:07:48,350
Donc, si nous voulons que ce chiffre passe de l'un à l'autre et que nous en disions six, nous pourrions le multiplier par six, puis en ajouter un à la fin.

93
00:07:48,380 --> 00:07:53,570
Maintenant, nous pouvons obtenir jusqu'à six point quatre-vingt-dix-neuf et d'obtenir un nombre entier.

94
00:07:53,580 --> 00:08:09,630
Nous avons ensuite besoin de couper ce décimal afin que nous puissions utiliser le plancher mathématiques qui est une autre méthode et qui prendra tout ce qui est retourné de math en multipliant aléatoire par 6 en ajoutant 1 et puis enlever tout après la virgule décimale.

95
00:08:09,770 --> 00:08:13,790
Et cela nous donne des nombres aléatoires entre 1 et 6.

96
00:08:13,920 --> 00:08:18,460
Comme vous pouvez le voir, mais nous ne voulons pas nécessairement juste entre 1 et 6.

97
00:08:18,540 --> 00:08:22,090
Ce tableau éventuellement ne peut avoir que trois éléments.

98
00:08:22,620 --> 00:08:25,800
Comme vous pouvez le voir quand je vais en mode facile il ya seulement trois couleurs.

99
00:08:25,920 --> 00:08:27,600
Donc, il pourrait avoir trois et pourrait avoir six.

100
00:08:27,690 --> 00:08:42,690
Donc, nous allons simplement utiliser la longueur du tableau pour générer notre couleur de sorte qu'il ressemble à cette mathématique pensée aléatoire, nous allons générer un nombre entre 0 et 1, puis multiplier par la longueur du tableau et c'est OK parce que n'oubliez pas que ce n'est pas inclusif.

101
00:08:42,750 --> 00:08:47,330
Ainsi, même si la longueur du tableau est un de plus que l'indice le plus élevé.

102
00:08:47,390 --> 00:08:48,970
Donc, la longueur est de six.

103
00:08:49,080 --> 00:08:51,040
Mais le plus grand nombre que nous voulons, c'est cinq.

104
00:08:51,410 --> 00:08:54,500
Parce que le nombre aléatoire va seulement entre 0 et 1.

105
00:08:54,500 --> 00:08:57,140
Mais il ne comprend pas celui que nous sommes en bonne forme.

106
00:08:57,330 --> 00:09:11,530
Donc, nous allons générer cela et ensuite nous allons faire des calculs à l'étage de tout ce qui va couper la virgule décimale restante et une fois que nous avons fait cela nous donne un nombre aléatoire.

107
00:09:11,610 --> 00:09:20,990
La prochaine chose que nous devons faire est de l'enregistrer dans une variable, puis d'utiliser cette variable pour accéder à un élément du tableau à cet index.

108
00:09:21,000 --> 00:09:26,720
Donc, nous allons dire les couleurs de retour aléatoire.

109
00:09:26,730 --> 00:09:33,230
Donc, cela choisit un nombre aléatoire comme trois et puis il retourne des couleurs de trois.

110
00:09:33,240 --> 00:09:33,630
D'accord.

111
00:09:33,620 --> 00:09:35,420
Alors testons cela.

112
00:09:35,460 --> 00:09:36,490
Nous avons la couleur de choix.

113
00:09:36,620 --> 00:09:39,150
Nous appelons la couleur de pick up au sommet ici.

114
00:09:39,480 --> 00:09:45,690
Donc, si je rafraîchir, nous devrions nous attendre à ce changement et il ne change que je rafraîchir.

115
00:09:45,720 --> 00:09:54,170
Vous pouvez voir parfois vous obtenez le même parce qu'il n'y a que six et ils ne changent jamais, mais il change presque à chaque fois.

116
00:09:54,170 --> 00:09:57,900
Maintenant, nous allons vérifier si notre logique rapide fonctionne de la même manière.

117
00:09:57,890 --> 00:10:03,060
Donc, si je clique sur celui-ci est zéro rouge zéro vert et tout bleu.

118
00:10:03,060 --> 00:10:05,430
Alors essayons de cliquer sur le cyan rouge.

119
00:10:05,420 --> 00:10:06,120
Bien.