OK nous reviendrons dans cette vidéo.
Nous allons travailler sur quelques nouvelles fonctionnalités.
Le premier est quand je gagne le match.
Il me dit correct.
Et puis je peux cliquer de nouveau jouer pour obtenir de nouvelles couleurs et si je n'ai pas encore gagné.
Mais je veux aussi de nouvelles couleurs parce que pour une raison quelconque, je n'aime pas les couleurs que j'ai.
Je peux aussi cliquer sur ce bouton de nouvelles couleurs.
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.
Donc ce bouton fait la même chose.
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.
Mais je peux aussi cliquer sur de nouvelles couleurs et cela va aussi le réinitialiser.
Voilà ce sur quoi nous allons nous concentrer.
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.
Et il contient le message que nous avons déjà.
Et puis les deux boutons que nous allons faire plus tard.
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.
Et puis nous avons déjà notre portée à l'intérieur qui va montrer quelque chose comme correcte ou essayez à nouveau.
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.
OK qui semble à peu près aussi mauvais que vous attendez.
Allons-y et ajoutez la couleur d'arrière-plan blanc et centrez tout dans cette div Donc notre div s'appelle stripe.
Allons à notre C Ss et nous allons sélectionner Strype qui est un ID.
Donc, nous devons utiliser la bande avec une réflexion après coup.
Et nous allons définir un fond de couleur d'arrière-plan pour être blanc.
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.
Et maintenant, si je rafraîchir vous obtenez un div blanc va tout le chemin à travers.
C'est un peu plus grand qu'il ne l'était.
Nous avons un bouton ici juste pour rien.
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.
Et c'est parce que le texte de cette portée est blanc.
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.
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.
La chose est bien que ce soit le réglage des couleurs à être noir sur le div avec ID stripe.
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.
Nous avons donc quelques options.
Ce que je vais faire est en fait juste se débarrasser de cela pour l'instant.
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.
De la même manière que cette travée ici est noire.
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.
Et c'est notre frappé.
D'ACCORD.
Alors travaillons maintenant sur obtenir ce bouton pour réinitialiser le jeu afin de commencer, nous devons ajouter un écouteur d'événement.
Et avant que nous puissions faire cela, nous devons sélectionner ce bouton.
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.
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.
Et puis, comme toujours, je voudrais ajouter mon simple auditeur d'événement de test.
Donc le bouton de réinitialisation n'ajoute l'écouteur d'événement.
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.
Et si je clique dessus, je reçois mon alerte et cela signifie que nous sommes prêts à partir.
Donc, nous pouvons travailler sur la logique pour réinitialiser.
Donc, ce que nous devons faire, écrivons le pseudo-code.
Lorsque vous cliquez sur ce bouton besoin de générer toutes les nouvelles couleurs.
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.
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.
Donc, nous allons simplement dire que les couleurs est maintenant égale à générer des couleurs aléatoires de six.
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.
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.
Donc, nous allons simplement dire changer l'affichage couleur pour correspondre à la couleur choisie de sorte que l'on est simple.
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.
Nous ne les voyons pas encore parce que nous n'avons pas ce code.
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.
Donc, il nous donne une nouvelle couleur aléatoire là-haut et six couleurs aléatoires dans les coulisses.
Donc la dernière pièce est de refléter ces six nouvelles couleurs sur la page et nous l'avons fait avant.
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.
Je vais donc commencer par simplement dupliquer tout cela ici et nous refactoriserons cela.
Mais pour commencer à tout mettre ici.
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.
Je vais sauver.
Et si nous rafraîchissons et que nous cliquons sur de nouvelles couleurs, il génère 60 couleurs aléatoires.
Il en choisit un.
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.
Alors essayons-le et voyons si notre logique précédente tient aussi.
D'ACCORD.
Donc, celui-ci est une quantité décente de rouge.
Très peu de vert et une quantité décente de bleu.
Essayons de cliquer sur certains que nous ne pensons pas être justes.
Et maintenant, allons-y pour l'un des pourpres.
Il semble donc un peu plus rouge le bleu.
Donc, je vais deviner et nous avons raison et il semble que les choses fonctionnent toujours très bien.
De nouvelles couleurs rapides à nouveau.
Nous voulons réinitialiser ceci.
C'est une chose cosmétique vraiment mineure.
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é.
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.
Celui-ci est beaucoup de vert.
Je gagne et ça me dit de jouer encore et ça fait la même chose.
Fonctionnellement il ne change pas vraiment c'est juste nous et le texte différent.
C'est simple à faire.
Tout ce que nous devons faire est de trouver où le code est pour vérifier si vous gagnez.
C'est juste ici.
Et puis nous voulons simplement changer le contenu textuel de ce bouton.
Donc, le bouton a été appelé bouton de réinitialisation.
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.
Maintenant, essayons d'en jouer un.
Donc, celui-ci est beaucoup de rouge et beaucoup de vert et un peu de bleu.
Donc beaucoup de rouge et beaucoup de vert va nous donner une couleur jaune.
Alors réduisons certains d'entre eux.
Et puis un peu de bleu va le rendre plus léger et plus lumineux.
Donc, si nous essayons un de ces comme ceci ou celui-ci, vous verrez qu'ils n'ont pas tout à fait raison.
Et c'est notre réponse ici et il nous dit de jouer à nouveau.
Et très rapide et il fait exactement la même chose.
La dernière chose que j'ai mentionné est de changer la couleur de fond arrière.
Donc, ici, nous pouvons le faire à la fin du bouton de réinitialisation.
Nous allons simplement choisir ce H-1.
C'est un point que nous avons choisi ici.
C'est le fond d'appel.
UPS est égal.
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.
Ou nous le mettons ici quand nous éliminons une des couleurs si vous choisissez la mauvaise couleur.
Nous changeons la couleur d'arrière-plan pour qu'elle soit la même que le corps.
OK, actualisons de nouvelles couleurs.
Gagnez maintenant.
Juste rapide aléatoire juste pour le temps, nous cliquons sur jouer à nouveau et il change en arrière à un fond noir.
Ou le fond gris foncé.
OK, c'est tout pour cette vidéo.
Ensuite, nous allons ajouter les boutons pour choisir entre le mode facile et dur.