Nous saluons le retour.
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.
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.
Et puis je peux cliquer sur facile et qui reste sélectionné.
Et nous n'avons que trois carrés à choisir.
Et puis je peux revenir à cœur.
Nous allons commencer par ajouter les deux boutons dont nous avons besoin.
Donc, je vais aller dans mon HMO et ajouter en deux boutons.
Le premier nous direons facile.
Le second dira dur et se rafraîchira.
D'ACCORD.
Et cela semble très bien pour l'instant.
Vous remarquerez que notre portée ne prend pas encore de place.
Et je vois qu'il y a du texte.
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.
Et la façon dont nous faisons cela est d'utiliser une classe et de transformer cette classe sur et en dehors.
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.
Donc, notre couleur de fond et la classe va être appelée sélectionnée parce que c'est ce que nous faisons.
Nous ajoutons la classe sélectionnée au bouton qui est sélectionné.
Et il va juste avoir un ensemble de fond pour vous de commencer.
Et puis ce que nous allons faire est de donner juste le bouton de mode dur classe égale sélectionnée.
Et si nous rafraîchissons sur notre code, vous pouvez voir que dur est engagé.
C'est hideux Oui, mais au moins nous montre que nous sommes sur le mode dur.
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.
D'ACCORD.
Commençons ici.
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é.
Alors laissez-nous le rendre plus facile à sélectionner et je vais commencer par leur donner chacun un ID facile.
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.
Nous allons refactoriser cela en quelques instants.
Mais nous allons commencer par deux identifications différentes.
Bouton facile Bouton dur.
Accédez à notre javascript et sélectionnez-les.
So var easy ETN est identique au sélecteur de requête document doc avec Octa.
Facile ETN.
Assurez-vous que nous capitaliser les choses de la même.
Voilà.
Et la même chose pour dur et je ne sais pas si vous avez pris cela en sublime.
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.
Nous avons donc deux boutons et nous pouvons faire quelque chose comme ça.
Easy PTEN ajouter l'écouteur d'événement.
Cliquez et tout ce que nous allons faire est juste d'alerter que le bouton facile a été arrêté juste comme ceci.
Cliquez sur le bouton Alert easy et assurez-vous que cela fonctionne.
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é.
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é.
Donc, si nous cliquons sur le bouton facile tout ce que nous voulons faire est simple bouton.
Doc liste de la classe ajouter sélectionné et si nous rafraîchissons maintenant, je clique sur facile.
Il a une classe choisie.
Facile mais le problème est qu'il reste toujours sur le bouton dur de sorte que soit facile à fixer.
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.
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é.
OK, testez-le.
D'accord.
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.
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.
Nous devons donc faire cela avant de commencer.
Revenons à la solution pour voir comment cela fonctionne.
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.
Donc, cela pourrait être un jeu assez brisant bogue.
Donc plutôt que de traiter avec cela, nous allons simplement choisir trois nouvelles couleurs.
Donc, le processus est que nous actualiser cela.
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.
Nous allons mettre à jour qui apparaissent avec une couleur choisie.
Nous allons mettre à jour les trois carrés ici.
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.
Et puis la même chose va pour dur.
Nous générons six nouvelles couleurs dans le tableau des couleurs.
Nous choisissons un pour être nos choix colorés.
Nous l'affichons ici.
Ensuite, nous montrons les trois carrés au bas, puis définir chacun d'eux pour avoir une couleur.
D'ACCORD.
Alors abordons ce problème maintenant.
Tout d'abord, lorsque nous cliquons sur le bouton facile, commençons par là.
Nous allons vouloir générer de nouvelles couleurs afin que les couleurs égales génèrent des couleurs aléatoires cette fois 3.
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.
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.
Donc, c'est aussi simple que de dire que le contenu du texte affiché en couleur est égal à la couleur choisie.
Et si nous rafraîchissons je vais obtenir des nouvelles couleurs ici juste pour vous montrer quelques choses.
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.
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.
Et il a également choisi la couleur est différente.
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.
Peu importe.
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.
Alors laissez-moi vous montrer comment cela fonctionne.
Je vais juste choisir l'un d'entre eux.
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.
Eh bien en fait le sixième avec un index de cinq et puis définir que l'affichage de style d'être aucun.
Et vous verrez qu'il disparaît.
Et puis si je veux qu'il revienne que je vais si nous cliquons sur le mode dur, je dois juste dire le style.
L'affichage est égal au verrou.
D'accord.
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.
Et pour les trois premiers nous allons leur donner une nouvelle couleur.
Et pour les trois derniers, nous allons les cacher.
Donc, plutôt que d'avoir deux boucles à faire que nous allons le faire à la fois.
Donc pour var I est égal à zéro.
J'ai juste moins de carrés de longueur.
De plus, nous allons profiter du fait que les couleurs a trois éléments en elle.
Donc, nous allons faire quelque chose comme ça si les couleurs I.
Donc, s'il ya une couleur suivante, cela se passera sur les trois premiers.
Nous allons écrire des carrés que je stylise le fond est égal à la couleur.
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.
Et s'il y a nous allons changer la couleur de ces trois premiers.
Alors laissez-nous nous assurer que cela fonctionne.
Je clique sur facile et vous verrez que les trois premiers changent.
Nous sommes donc proches.
Tout ce que nous voulons faire maintenant est de masquer les trois derniers.
Donc, nous ferons cela avec autrement.
Squares I style que l'affichage n'est égal à aucun.
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.
Et essayons de savoir qui est celui-ci.
Soixante-trois rouge 125 vert et un peu de bleu.
Voilà.
Vous pouvez actualiser essayez un peu plus.
Nous avons un petit problème que je rafraîchir certains de ces et je clique sur le mode facile.
Nous ne produisons ici que trois couleurs.
Mais si je clique sur le bouton de nouvelles couleurs, je vais vous montrer ce que les couleurs ressemble en ce moment.
Ce sont trois items.
Si je clique sur de nouvelles couleurs et puis je regarde les couleurs.
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.
Donc, ce code est juste ici sur le bouton de réinitialisation.
Nous disons simplement que les couleurs sont égales à générer des couleurs aléatoires.
Nous devons donc régler ce problème.
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.
Je vais juste prendre une partie de ce code et le dupliquer ici, ce qui est toujours un mauvais signe.
Et c'est pourquoi nous allons refactoriser ce en un peu.
Donc, la première chose que je veux faire.
Je vais juste copier tout cela dans nos couleurs d'écouteur d'événement de bouton dur.
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.
Et puis nous allons faire le tour de tous dans cette boucle.
Nous devons faire deux choses différentes.
La première consiste à attribuer une nouvelle couleur à chaque carré.
Mais nous avons également potentiellement besoin de s'assurer que les trois sont unhidden au fond.
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.
Et toutes les places auront un affichage de bloc.
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.
Mais c'est une chose vraiment mineure sur laquelle nous pouvons nous concentrer plus tard.
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.
Et nous avons juste un accolade supplémentaire ici.
Donc, si nous économisons maintenant et rafraîchir, nous avons six couleurs comme nous avons toujours.
Si je clique sur easy nous obtenons trois.
Si je clique sur dur je vais maintenant revenir à six.
Je reçois une nouvelle couleur ici et nous allons juste vous assurer que cela continue à fonctionner.
Donc facile facile difficile dur quand je vais au mode dur.
Nous allons cliquer sur de nouvelles couleurs à nouveau.
Retournez à facile revenir à dur facile et dur.
D'accord.
Et jouons à ceci et voyons si cela fonctionne.
Ainsi la couleur de choix est 196 170 57.
Donc beaucoup de lire beaucoup de vert et un peu de bleu.
Donc, c'est beaucoup de rouge et le vert est une couleur jaune.
Donc, ce ne sera pas l'un ou l'autre.
Celui-ci va être celui-ci très rapide et qui ressemble à son fonctionnement très bien.
Si je clique de nouveau sur easy nous retournons à trois couleurs.
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.
Tout ce que nous devons faire est d'avoir une variable qui conserve la trace de ce mode que nous sommes sur.
Facile ou dur ou le nombre de carrés trois ou six.
Nous allons faire cela ici.
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.
C'est un peu plus facile comme ça et économiser.
Et puis nous devons remplacer cela dans quelques endroits.
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.
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.
Nous voulons générer le nombre correct de couleurs qui seraient Nahm carrés là aussi.
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
Nous allons au mode facile et gagnons celui-ci.
Donc, surtout rouge un peu bleu.
Pas celui-ci.
Pas celui là.
Voilà.
Et si je clique sur jouer à nouveau, nous allons nous assurer que lorsque je tape des couleurs, nous ne voyons que trois couleurs.
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.
Nous n'avons donc plus à nous préoccuper de cela.