OK, nous allons reprendre là où nous en étions.
Nous allons commencer à ajouter dans certains des comportements pour lorsque vous cliquez sur la bonne couleur et lorsque vous cliquez sur la mauvaise couleur.
Commençons donc par choisir la mauvaise couleur.
Ce que nous voulons faire est de faire fondre ceci afin qu'il correspond à la couleur de fond ici.
C'est donc assez simple.
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.
Donc nous allons coller dans et enregistrer.
Testez-le.
Cliquez sur l'un des mauvais.
Vous pouvez le voir s'effacer et si je clique sur le droit, nous obtenons toujours notre alerte.
OK alors je vais rafraîchir.
C'est donc ce que nous allons commencer.
Et l'autre chose que nous voulons arriver est que nous voulons un affichage afin que vous puissiez voir ici ici.
Il y aura un affichage si je clique sur l'une des couleurs et il dit essayez de nouveau.
Et si je l'ai droit comme ici, il affiche correcte et puis se concentrer sur les autres choses comme changer la couleur.
Une fois que nous obtenons cette première partie.
Donc, ajoutons dans ce paragraphe ou la portée en fait est ce qu'il est et de le faire afficher le message correct.
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.
Pour l'instant il va juste être une petite portée qui va à l'intérieur de cette div.
Donc, comme je l'ai mentionné, il sera plus.
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.
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.
Et de cette façon, nous pouvons le sélectionner au lieu de notre Javascript.
Alors allons à notre javascript maintenant et sélectionnez cela.
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.
Nous avons besoin de l'ID.
Donc nous avons besoin de l'arc à Thor.
Et puis si l'utilisateur devine mal.
Tout ce que nous devons faire est d'écrire le message afficher le contenu du texte point égal essayer de nouveau.
Et si nous rafraîchissons et que vous cliquez sur le mauvais, c'est vraiment difficile à voir.
Donc nous devons changer la couleur d'arrière-plan ou la couleur du texte.
On peut faire ça ici.
Nous allons simplement dire que tous les span doivent avoir la couleur blanche et si nous sommes frais.
Maintenant, j'ai cliqué sur le mauvais.
Il me dit d'essayer à nouveau.
D'ACCORD.
Et nous continuons d'obtenir cela jusqu'à ce que j'obtienne le bon.
Et nous obtenons toujours cette alerte.
Donc, si nous obtenons le bon, ce que nous voulons faire, c'est changer ce que nous affichons dans cet affichage de message.
Nous voulons le changer pour être correct.
Ainsi, le message affiche que le contenu du texte est correct.
Juste comme ça.
Et maintenant, si nous essayons cela, nous nous trompons et essayez à nouveau.
Nous le faisons bien et il nous dit correct.
D'ACCORD.
Nous avons donc cette logique de base là où nous vérifions si nous avons raison ou non et que nous affichons quelque chose.
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.
Alors ici, vous cliquez sur la bonne réponse, ils changent tous de degré.
Et puis nous pouvons également faire l'arrière-plan de ce H1 ainsi.
Donc, la première chose que nous devons faire pour que cela fonctionne.
En fait, je vais écrire une fonction distincte pour le faire pour moi juste pour garder mon code un peu plus organisé.
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.
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.
Et puis à l'intérieur est où nous aurons besoin de changer chaque couleur et nous avons fait cela avant déjà.
C'est juste des couleurs.
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.
Ainsi, y compris celui-ci qui est la couleur correcte.
Il suffit de l'écraser et de le changer à la même couleur qu'il est déjà.
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é.
Et nous le faisons.
S'ils le devinent correctement.
Donc, si nous sauvegardons et rafraîchissons voir si nous avons des erreurs.
Nan.
Et maintenant c'est rapide.
Faux.
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.
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.
C'est notre gamme de couleurs.
Il devrait être sur le tableau des carrés qui sont les carrés que nous essayons de changer.
Ce que je faisais était le tableau des couleurs juste les cordes.
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.
D'accord.
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.
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.
Je vais effectivement faire une fonction.
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.
C'est donc quelque chose que nous allons devoir appeler à plusieurs reprises pour que cela fonctionne.
Je vais commencer par appeler la fonction qui n'existe pas encore.
Donc, je vais dire que la couleur de pick est égale et que l'on nomme.
Choisissez la couleur et ensuite nous devons définir la couleur de sélection.
Donc je viens ici juste le faire au fond pour le choix de fonction maintenant.
Couleur dans cette fonction, nous devons faire deux choses.
On choisit un nombre aléatoire.
Donc, quelque chose comme 0 ou 1 ou 2 tout le chemin vers le dernier index de ce tableau.
Et puis nous avons besoin d'utiliser ce nombre pour accéder à la couleur hors de ce tableau et de retourner cette couleur.
Nous allons donc commencer par choisir un nombre aléatoire.
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.
Alors laissez-moi vous montrer que les maths pas aléatoire et c'est une longue décimale longue.
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.
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.
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.
Maintenant, nous pouvons obtenir jusqu'à six point quatre-vingt-dix-neuf et d'obtenir un nombre entier.
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.
Et cela nous donne des nombres aléatoires entre 1 et 6.
Comme vous pouvez le voir, mais nous ne voulons pas nécessairement juste entre 1 et 6.
Ce tableau éventuellement ne peut avoir que trois éléments.
Comme vous pouvez le voir quand je vais en mode facile il ya seulement trois couleurs.
Donc, il pourrait avoir trois et pourrait avoir six.
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.
Ainsi, même si la longueur du tableau est un de plus que l'indice le plus élevé.
Donc, la longueur est de six.
Mais le plus grand nombre que nous voulons, c'est cinq.
Parce que le nombre aléatoire va seulement entre 0 et 1.
Mais il ne comprend pas celui que nous sommes en bonne forme.
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.
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.
Donc, nous allons dire les couleurs de retour aléatoire.
Donc, cela choisit un nombre aléatoire comme trois et puis il retourne des couleurs de trois.
D'accord.
Alors testons cela.
Nous avons la couleur de choix.
Nous appelons la couleur de pick up au sommet ici.
Donc, si je rafraîchir, nous devrions nous attendre à ce changement et il ne change que je rafraîchir.
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.
Maintenant, nous allons vérifier si notre logique rapide fonctionne de la même manière.
Donc, si je clique sur celui-ci est zéro rouge zéro vert et tout bleu.
Alors essayons de cliquer sur le cyan rouge.
Bien.