Amusez-vous avec le Javascript ! Développer un jeu de mémoire

1. Bienvenue au cours !: Bonjour, bienvenue dans ce cours. Si vous êtes un débutant en développement Web et que vous vouliez simplement vous lancer et créer des projets amusants. Alors c'est le cours qu'il vous faut. L'idée derrière cette série est de vous montrer ce que nous pouvons faire lorsqu'ils sont combinés en HTML, CSS et JavaScript. Ne pas utiliser de modèles et de bibliothèques, modèles standard ou de frameworks. Au lieu de cela, nous allons construire nos projets entièrement à partir de zéro en utilisant ces trois technologies. Le projet pour ce cours est un jeu de mémoire. L'idée est d'avoir une grille de carrés. Le lien de jeu clique sur une paire de cases pour révéler les couleurs et essaie de trouver une correspondance. S'ils obtiennent une correspondance incorrecte, les cases sont à nouveau masquées. Le joueur doit essayer de se souvenir ce que chaque récompense complète pour la prochaine tentative. Les couleurs sont également aléatoires, donc elles se trouvent dans un endroit différent pour chaque partie. Ce jeu sera entièrement construit à partir de zéro. Nous allons commencer par créer la structure HTML. Avant, je n'avais pas de style et aussi de mise en page avec CSS, ainsi que d'ajouter des animations plus légères quand il y a une correspondance et aussi quand il n'y en a pas beaucoup. passerons la majeure partie de notre temps à écrire du JavaScript, y compris à générer les carrés avec des couleurs aléatoires, traiter les correspondances et les non-correspondances, à compiler le score sous-jacent à la fin du jeu. Et bien plus encore. Nous aborderons de nombreux principes fondamentaux de JavaScript que vous devez connaître, tels que les variables, les fonctions, travail avec le DOM, les événements, les conditionnels, et bien d'autres encore. Merci d'avoir suivi ce cours et à bientôt dans la première leçon. 2. Ce dont vous aurez besoin pour ce cours: Eh bien, je vais me perdre à tout moment en sautant et en intégrant notre projet. Mais juste avant de le faire, il y a un certain nombre de choses que nous devons commencer. Tout d'abord, nous avons besoin d'un navigateur Web et vous pouvez utiliser n'importe quel navigateur Web de votre choix, et ce que vous utilisez Google Chrome, mais vous pouvez utiliser Firefox Safari ou n'importe lequel d'entre nous, ainsi que ceci, vous aurez également besoin d'un éditeur de texte. J'utiliserai Visual Studio Code, qui est disponible sur le site de code point Visual Studio.com. Une fois que vous l'avez téléchargé et que vous l'avez ouvert, vous verrez une fenêtre de démarrage, comme nous le faisons sur la gauche, mais vous ne pouvez pas utiliser d'autre éditeur si vous préférez. Passons maintenant à la première leçon. Nous allons commencer par créer notre projet. 3. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de cocher une autre conférence. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe, et vous pouvez même prendre du recul une fois que vous avez terminé le cours et revenir et apporter quelques modifications par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare. Non seulement je vais y jeter un œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 4. Configuration du projet et HTML: Il s'agit de la version finale du jeu que nous allons maintenant passer à Build. Cela vous aidera à visualiser exactement ce que nous allons créer. L'idée de ce jeu de mémoire est assez simple. Nous avons une séquence de carrés sans couleur de fond. Pour chacun d'entre eux a une couleur cachée attachée à celui-ci. Ainsi, lorsque nous cliquons sur l'un d'entre eux, cela révélera la couleur. Et l'idée est de créer une paire assortie. Une fois que nous l'avons fait, notre score est augmenté. Petits effets d'animation, et ces deux couleurs resteront à l'écran. Nous continuons ensuite en cliquant sur les cases supplémentaires et essayons de continuer jusqu'à ce que tous les matchs soient créés. Donc pour ce faire, comme toujours, va sauter dans le bureau et créer un nouveau dossier. Je vais appeler ça le jeu de mémoire. Faites-le glisser dans le code de Visual Studio. D'accord, et à partir de là, nous devons créer nos fichiers habituels pour commencer, nous allons commencer par la page d'index. Passons donc à notre barre latérale. Cliquez sur la nouvelle icône de fichier ou utilisez la commande ou le contrôle N. Pour créer notre page HTML d' index. Nous utilisons la commande de raccourci intégrée, qui est HTML deux-points cinq, qui configurera tous les modèles dont nous avons besoin pour notre index, est-ce le titre du jeu de mémoire ? Et pour cela, le contenu HTML est assez simple. Tout ce que nous allons ajouter si nous regardons la version finale, c'est un titre en haut, nous allons créer un élément qui n' est pas visible actuellement, qui contiendra la partition, ajouterons un bouton que nous ne pouvons pas actuellement voir. Ce sera pour jouer à nouveau. Control with JavaScript is putting n' apparaîtra qu' une fois que toutes les parties auront été créées, ce qui permettra à l'utilisateur de redémarrer le jeu. Nous aurons également notre zone de grille, qui sera une liste non ordonnée, et chacun de nos carrés sera un élément de liste. Donc c'est assez simple en termes de code HTML. Passons donc à la section du corps. Nous allons commencer par un titre de niveau un, qui sera le texte des éléments du jeu de mémoire a p. Et ceci est mémorisé pour notre score, et nous allons le définir sur une valeur initiale de 0, en plaçant un identifiant unique de crâne. Et nous allons l'utiliser pour saisir cette section de cours dans JavaScript. Nous l'utiliserons pour afficher et masquer cette section lorsque cela sera nécessaire. Et aussi pour augmenter le score chaque fois que l'utilisateur a une correspondance. Comme mentionné, nous aurons également besoin d'un bouton pour jouer à nouveau. Nous allons également le cacher jusqu'à ce que le jeu soit terminé. Et puis si j'étais carré va créer une liste non ordonnée. Dans la vidéo à venir, nous allons créer cette liste non ordonnée comme une grille. Donc pour l'instant il va être vide car nous créons chacun de nos carrés en utilisant JavaScript nous donne également un identifiant unique de carrés. Enregistrez ceci, puis ouvrons-le dans le navigateur. Nos options sont donc soit d'aller dans le dossier du jeu de mémoire et double-cliquer sur la page d'index pour l'ouvrir. Ou en utilisant Visual Studio, nous pouvons également cliquer avec le bouton droit de la souris sur l'onglet, copier le chemin et le coller dans le navigateur. Bien sûr, ça n'a pas l' air génial pour le moment. Nous devons créer notre style dans la vidéo à venir. Et nous allons nous y préparer en créant notre nouveau fichier pour le conserver. Donc, lorsque vous déposez, il s'agit du style dot css. Et bien entendu, nous avons également besoin d'un fichier JavaScript pour contrôler notre jeu. Créez donc un nouveau fichier également à l'intérieur d'ici. Il s'agit des scripts point js. Nous y reviendrons plus tard, mais pour l'instant, nous allons simplement accéder à notre page d'index, descendre dans la barre latérale et créer un lien vers nos deux fichiers. Tout d'abord, dans la tête, nous allons créer notre lien vers nos feuilles de style. Et comme il se trouve dans le même dossier à côté de notre index, nous pouvons simplement faire référence par le titre styles.css. Ensuite, en bas de la section du corps, juste en dessous de la liste non ordonnée, créez un lien vers notre script. La source est simplement le nom de fichier script.js. Vérifions-nous que cela fonctionne avec une alerte. Dans n'importe quel texte à l'intérieur d'ici. Enregistrez notre fichier et actualisez le navigateur. Et notre fichier JavaScript est correctement lié. Nous pouvons le supprimer. Enregistrez tous nos fichiers, et nous allons maintenant passer à la section suivante où nous allons créer nos styles pour améliorer l'apparence de notre jeu. 5. Style de CSS: Maintenant, c'est à vous de désactiver nos feuilles de style, créées dans la vidéo précédente. L'idée est de faire en sorte cela ressemble davantage à la version finale. Et bien sûr, vous pouvez l'adapter à votre propre style à ce que je vais devenir trop fou. Nous allons simplement créer un style et des couleurs de base pour le rendre un peu plus attrayant. Pour commencer, nous allons passer notre feuille de style et nous allons cibler la section du corps. Nous allons commencer par la famille de polices. Encore une fois, vous pouvez définir les couleurs les polices et les tailles que vous préférez. Sélectionnez donc l'une des familles de polices que vous souhaitez utiliser. Pour vérifier que cela est correctement lié à l'intérieur de notre index. Enregistrez ceci et actualisez le navigateur, et vous devriez voir une modification de notre texte. OK, ensuite, nous allons régler le corps pour qu'il ait le type d'affichage Flex. Et cela nous permettra de définir la direction de flexion pour qu'elle soit colonne. Cela donnera que tout notre contenu est vertical, empilé les uns sur les autres mises en page. Nous aurons donc le titre, nous aurons le crâne, qui est actuellement invisible, le bouton qui est actuellement invisible, suivi de notre liste non ordonnée. L'écran. Utilisez la Flexbox. Par défaut, la direction de flexion est alignée, sorte que tout s'affiche de gauche à droite sur la page. Et nous pouvons changer cela en définissant la direction de flexion par défaut sur colonne. Placez tout au centre, comme le texte et la partition. Nous pouvons définir les éléments de campagne au centre. Lors de l'utilisation de la direction de flexion de la colonne. Cela poussera tout au milieu du navigateur, en arrière-plan. Le contexte. Je vais choisir, nous allons utiliser un dégradé linéaire, qui va prendre trois couleurs différentes. Avec le dégradé linéaire, nous pouvons définir la première section de nos dégradés comme étant la valeur de n'importe quel angle que nous voulons voir apparaître. Nous pouvons donc changer la couleur du haut à gauche vers le bas à droite, de la gauche vers la droite, du haut vers le bas ou tout autre angle que vous voulez, je veux aller sur 90 degrés, puis séparé par une virgule, placer trois couleurs différentes. Donc la première, il s'agira la couleur de départ sur la gauche, qui est une valeur RVB de 2015149. Cela va donc commencer au tout début. Nous allons donc le placer à 0 %. Faisons un peu plus de place pour que nous puissions voir cela sur la page. Ok ? Nous avons donc notre premier paramètre, je vais le deuxième, puis une autre virgule juste après le 0 pour cent. La deuxième valeur RVB. Ouvrez les supports. Celui-ci est 118248 pour libérer 0. Et puis après cela, juste après cette parenthèse bleue, en plaçant le pourcentage qui est de 50, commencera à cette couleur. 50 % des dégradés auront cette couleur, puis séparés par une virgule, notre troisième et dernière valeur. Encore une fois, une valeur RVB, qui va être rouge, valeur de 70, vert et bleu, 249. Il s'agit de la couleur finale. Ce sera donc à l'extrême droite. Nous allons donc le placer à 100 %. Actualisez la page. Nous commencerons à 0, qui est notre couleur la plus foncée. Nous avons notre couleur moyenne. Ensuite, à 100 %, nous passons à cette troisième valeur, juste après notre couleur de fond, qui s'appliquera au texte. Et ce sera encore une fois, une valeur RVB, la placera dans une valeur de 2073, puis 63 pour le bleu. De plus, à titre de préférence personnelle, je vais définir un espace entre chacune de ces lettres avec une valeur de deux pixels, juste pour que le texte soit un peu plus étalé. Ok, donc après ça, je vais laisser le titre de niveau un tel qu'il est. Et nous pouvons accéder à la section des scores et au bouton de notre page d'index. Nous avons notre score, qui a l'idée de score. Ensuite, nous avons notre bouton juste en dessous. Feuilles de style. Saisir la partition en utilisant le hachage, puisqu'il s'agit d'un identifiant, augmentera la taille de la police à deux rems. L'épaisseur de la police doit être un peu plus foncée. Cela peut donc être audacieux. Ensuite, une marge en haut et en bas. Donc un rem en haut et en bas. Et nous laisserons une marge de 0 à gauche et à droite. Ensuite, nous avons le bouton, qui n'a jamais l'air bon par défaut. Nous allons donc cibler cela avec le sélecteur de boutons. les boutons n' héritent pas automatiquement de la famille de police définie à partir du corps. Nous pouvons donc copier cette même famille de polices. Places dans. Cela modifiera le texte du bouton. D'accord, ce que je veux faire ici, c'est supprimer la bordure par défaut. Nous allons ajouter des coins arrondis. Et nous allons également définir un rembourrage pour le rendre un peu plus grand. Et c'est aussi agréable de changer son curseur pour qu'il devienne un pointeur. Nous allons donc commencer par les coins arrondis en utilisant le rayon de la bordure de cinq pixels. Supprimez cette bordure noire par défaut. En définissant ce paramètre sur aucun. Ok, il faut un peu plus d'espacement, que nous pouvons ajouter du rembourrage. N'oubliez pas que le rembourrage ajoute de l'espace à l'intérieur de l'élément. Donc, si j'ajoute deux valeurs, le remplissage, la première valeur de 0,5 rems, nous l'appliquerons au haut et au bas. Et la deuxième valeur s'appliquera à gauche et à droite. Taille de police à appliquer au texte d'une RAM. Espacement des lettres d'un pixel, et changez le curseur en pointeur. Ces deux dernières propriétés espaceront donc le texte et nous donneront également ce pointeur à main chaque fois que l'utilisateur survolera ce bouton. Revenons donc à notre page index. La prochaine chose que nous avons, le style est notre liste non ordonnée. Comme nous pouvons le voir, nous n'avons aucun de nos carrés dans la liste non ordonnée avec lequel travailler. Nous allons donc commencer par ajouter des éléments de liste vides juste pour simuler à quoi cela ressemblera lorsque nous les ajouterons avec JavaScript. Placez donc un élément de liste et vous pouvez le dupliquer autant de fois que vous le souhaitez. Actuellement, voyez toujours si ces points iront sur nos feuilles de style et nous commencerons à travailler avec notre liste non ordonnée. Tout d'abord, afficher soudainement le type comme une grille. La grille nous permettra de définir nos carrés comme nous le voyons dans cette version finale. Nous allons donc définir le nombre de lignes et colonnes que nous voulons, ainsi que la taille de chacun de ces carrés. Pour ce faire, nous définissons d'abord les colonnes du modèle de grille et nous pouvons définir autant de valeurs que nous le voulons à l'intérieur d'ici. Donc, par exemple, si nous ajoutons 100 pixels et 200 pixels, cela nous donnera deux colonnes, la première ou 100 pixels, puis la seconde de 200 pixels. Mais comme nous allons créer quatre carrés différents, taille égale, nous pouvons utiliser la fonction de répétition. La fonction de répétition va prendre en compte deux choses. Le premier est le nombre de colonnes séparées par une virgule. La deuxième valeur est la taille de chacun d'eux. Donc 100 pixels. Et si nous copions et collons ceci, nous pouvons le transformer en lignes de modèle de grille. Ceci pour fermer. Nous voulons également quatre lignes de 200 pixels de haut. Cela nous donne une grille de quatre par quatre, qui nous laisse 16 espaces individuels. Et nous verrons cela plus clairement très bientôt une fois que nous arriverons à l'élément de la liste, l'écart autour de chacun des dix pixels. Je vais également supprimer la valeur de remplissage par défaut en la définissant sur 0. Puis descendez à l'élément de liste, élément de liste. Nous devons déplacer ces points. Ces puces sont-elles définies en définissant le style de liste sur aucun ? Cela permet de se débarrasser de ceux-là. Nous allons définir une frontière. Et l'épaisseur de la bordure le rendra assez mince. Donc 0,5 pixel, une couleur de trait plein. La couleur de la ligne. Nous utilisons une valeur RVB de 2036, ce qui nous donne notre première ligne. Et comme nous n' avons que quatre éléments de liste, n'occupons que les quatre premiers espaces. Allons-y et dupliquons ces quatre éléments. Fais-en huit. Nous avons maintenant de la place pour huit objets différents qui apparaîtront désormais sur le deuxième rouleau. Bien, donc pour briser les coins de chacun de ces carrés, nous pouvons placer dans un rayon de bordure de dix pixels. Et définissez également le curseur pour qu'il soit un pointeur. Puisque nous voulons que l' utilisateur puisse cliquer sur chacun d'entre eux. Bien. C'est donc notre style de base pour l'instant. Nous y reviendrons plus tard et ajouterons quelques animations. Permet de configurer deux animations différentes. Et le premier sera si l'utilisateur obtient la bonne estimation, je suis un s'il se trompe également. 6. Choisir les couleurs aléatoires: Bon, nous avons maintenant notre page d' index avec notre balisage, nous avons notre feuille de style, et voici comment notre jeu se présente actuellement. Nous avons également notre script, qui est actuellement vide et nous sommes liés au bas de notre page d'index. L'objectif de cette vidéo est donc de créer un tableau qui contiendra toutes les couleurs que vous souhaitez utiliser pour tous nos 16 carrés qui feront 16 carrés. Nous avons donc besoin de huit paires de couleurs pour créer un lot. Par exemple, nous avons un tableau avec deux rouges, deux jaunes, deux bleus, etc. Le deuxième objectif est de créer une fonction qui sélectionnera aléatoirement l'une de ces couleurs, affectera cette couleur à un carré particulier, puis cette couleur sera supprimée du tableau. Nous n'avons donc pas de doublons. Tout d'abord, la première étape consiste à créer un tableau appelé couleurs et à commencer huit paires de couleurs à l'intérieur d'ici. Donc, en sautant dans nos scripts, créez notre tableau appelé couleurs. Et chacune d'entre elles sera une chaîne. Vous pouvez donc changer ces couleurs pour qu'elles soient différentes, vous pouvez également les changer en couleur RVB, mais je veux utiliser une couleur hexagonale comme chaîne. Il n'y a donc que des valeurs CSS, qui commencent par le hachage. La première valeur que j'ai choisie est 3333. Séparé par une virgule, cela dupliquera celui-ci. Nous avons donc une paire parce que nous voulons en faire 16 couleurs, mais il y aura huit couleurs différentes pour faire des paires. Après cela, la deuxième couleur, encore une couleur hexadécimale, sera le double F9 sera pour D. Et puis dupliquez celle-ci. La troisième couleur sera un 0, C-C double F une virgule, et dupliquera celle-ci. Le prochain. Double F, double six. Duplique le double F4, D suivant pour dupliquer. Ensuite, double F sur a, sur une virgule copier-coller. Oups, n'oubliez pas les cendres au début de chacun d'entre eux. Et le prochain sera tous les « D ». Donc 60 jours. Après cela, nous aurons 000099. Doublons. Ce devrait être tout ce dont nous avons besoin. Nous avons notre première paire, 2345678 paires. Cela nous donne 16 couleurs différentes pour chacun de nos carrés. Ensuite, juste après cela, nous allons créer une fonction. Et le travail de cette fonction est de sélectionner une couleur aléatoire dans ce tableau, puis nous la supprimerons. Pour commencer, nous allons simplement créer notre corps de fonction appelé Select Color. Et pour sélectionner aléatoirement l'une de nos 16 valeurs dans le tableau, nous pouvons créer un nombre aléatoire contenant 16 choix. Nous utilisons donc la fonction map, génère un nombre aléatoire. Et nous pourrions, si nous voulions le multiplier par 16, ou plutôt, utiliser le tableau de couleurs et sélectionner la propriété length. Alors, les couleurs, la terre. Et si nous décidons de changer cela à l'avenir, cela le récupérera automatiquement. N'oubliez pas que Math.random nous donne un nombre aléatoire entre 010 est inclus, mais pas la valeur de un. Elle va jusqu'à 0,999, par exemple. Ce que nous devons faire, c'est obtenir des nombres entiers afin de pouvoir arrondir ce chiffre vers le bas. Découpons de place tous ces mathématiques d'accès.Floor coller dans notre nombre aléatoire. Cela va arrondir ça. Cela nous donnera donc un nombre compris entre 015, ce qui donne 16 options. Stockez-le dans une variable ou une constante appelée aléatoire. Je vais simplement faire un commentaire. Il s'agit donc de 0 à 15. Et nous pouvons maintenant utiliser ce nombre aléatoire pour sélectionner l'une de nos couleurs dans la gamme de couleurs. Sélectionnez donc les couleurs. Et comme pour tout autre tableau, nous pouvons passer un numéro d'index pour sélectionner une couleur particulière. Mais nous allons transmettre notre valeur aléatoire pour nous donner une sélection aléatoire. C'est à l'intérieur d'une constante appelée selected. Ensuite, une fois que chacune de ces valeurs aléatoires est sélectionnée, nous pouvons la supprimer de notre tableau de couleurs d'épissure par points de couleurs. La méthode Splice supprimera l'une de nos valeurs. Tout d'abord, le numéro de l'indice, lequel nous allons commencer. Donc, si nous partons de là, nous pouvons même supprimer la valeur unique ou déplacer chaque valeur juste après. La position de départ est donc notre nombre aléatoire pour notre position sur l'indice. Et puisque nous ne voulons supprimer une seule valeur au temps o, placer une valeur de un pour ne supprimer que cette seule valeur. Après cela, retournez la valeur que nous avons sélectionnée. Ensuite, nous pouvons tester cela en appelant notre fonction juste en dessous. Je l'ai donc appelé par son nom. Nous l'appellerons deux fois afin de voir combien de ces valeurs ont été supprimées. Également placé dans un journal de console pour notre gamme de couleurs. Accédez au navigateur et ouvrez les outils de développement avec le bouton droit de la souris et inspectez. Accédez à la console. Actualiser. Et nous pouvons voir que nous avons un tableau contenant 14 valeurs. N'oubliez pas que notre tableau d'origine contient ces 16 valeurs. Nous exécutons ensuite notre fonction deux fois. Et à chaque appel de fonction, il a supprimé une valeur unique d' une position aléatoire. Par conséquent, au moment où il arrive dans le journal de la console, deux positions ont été supprimées. Faisons un copier-coller. Cela devrait maintenant donner 13 valeurs. Et en supprimer un chaque fois que nous l'avons sélectionné. Cela signifie que nous allons nous retrouver avec des valeurs uniques. Fera également un autre test, sera coupé de sa place. L'un de nos appels de fonction placé dans le journal de la console. Il suffit de supprimer le point-virgule. Et chaque fois que nous actualisons, nous devrions voir l'une de nos valeurs de tableau sélectionnées aléatoirement. Bonne âme avec notre valeur aléatoire de notre tableau maintenant sélectionnée. Ensuite, nous pouvons utiliser cette couleur aléatoire à l'intérieur d'une boucle pour créer les 16 cases que nous devons afficher pour notre jeu. 7. Créer la grille des carrés: Bienvenue dans la partie suivante. L'objectif de cette vidéo est de créer une boucle qui sera exécutée 16 fois. Ceci, en combinaison avec le CSS que vous avez déjà dans notre feuille de style, sera utilisé pour créer notre grille de carrés, dont nous avons besoin de 16 carrés, soit quatre lignes de Foursquare. En plus de cela, chacun de nos carrés a besoin d'un attribut personnalisé pour stocker la couleur qu' il est censé avoir. N'oubliez pas que nous avons toutes nos valeurs hexagonales juste ici. Nous ne voulons pas que cela s'applique à la couleur de fond de nos carrés, car cela rendrait évidemment le jeu inutile car l'utilisateur pourra cliquer sur les couleurs qu'il peut voir. Nous voulons pouvoir les cacher. Pour ce faire, nous allons supprimer la couleur d'arrière-plan et les stocker en tant qu'attributs afin de savoir lequel de nos carrés nous pouvons faire correspondre. Oups, pendant que nous serons là, nous ajouterons simplement le hashtag, ces deux couleurs. Donc, si ce n'est déjà fait, nous allons commencer par aller dans notre fichier index.html et nous pouvons déplacer tous les éléments de liste vides que nous avons créés juste pour voir à quoi cela ressemblerait avec le style. Supprimez donc tous les éléments de la liste, puis revenez à notre script. Nous allons commencer par sélectionner notre liste non ordonnée sur notre page d'index, qui contient l'ID des carrés. Le top. Créez une constante pour les maintenir dans un conteneur de carrés appelé. Nous utilisons QuerySelector. Sélecteur de requête par points de document. Transmettre la chaîne how, qui est le hachage, puisqu'il s'agit d'un ID et du nom des carrés. Je crée juste un peu plus d'espace pour que nous puissions voir tout cela sur une seule ligne. Ensuite, nous allons créer une variable stockée dans une constante appelée nombre de carrés. Nous voulons 16 carrés. Et puis une autre variable appelée I, qui sera égale à une valeur initiale de 0. Et nous allons l'utiliser pour la boucle while, que nous sommes sur le point de configurer. Ok, donc en bas et soufflez simplement notre fonction de sélection de couleur, que nous allons utiliser en combinaison avec notre boucle. Nous allons utiliser une boucle while. Cela s'exécutera tant que I est inférieur à la variable appelée nombre de carrés. Souvenez-vous donc que le I est actuellement égal à 0 et que le nombre de carrés est de 16. Donc, effectivement, cela commencera par exécuter et nous dirons, alors que le nombre 0 est inférieur à 16, exécutez le code à l'intérieur. Et puis avant que j'oublie, nous lancerons I plus, plus. Cela va augmenter la valeur de I sur chaque boucle. Pour commencer, 0 est inférieur à 16. Donc le code à l'intérieur s' exécutera, augmentera alors I pour être égal à 11 est toujours inférieur à 16. Le code continuera donc à l' exécuter 16 fois. Mais quel code devons-nous exécuter ici ? Eh bien, puisque nous avons dans notre page d' index et notre liste non ordonnée, et il semble que nous ayons sélectionné notre liste non ordonnée. Tout en haut. Nous allons créer une liste d'éléments à placer à l'intérieur. Et ce sont exactement comme les éléments de liste que nous avons ajoutés ici. Il s'agit donc de les créer avec JavaScript. Nous utilisons des éléments de création de points de document, passant le nom de la balise LI pour créer un élément de liste, puis nous le stockons dans une constante appelée carré. Bon, maintenant nous avons le contenant et nous avons également besoin d'une couleur aléatoire. Pour cela, nous avons notre fonction ci-dessus appelée Sélectionner la couleur. Et cela va renvoyer une valeur sélectionnée de notre tableau. Stockez-le à l'intérieur d'une constante appelée color, qui est égale à la valeur de retour de notre fonction appelée select color. Nous pouvons également supprimer ou commenter ce code ci-dessous. Et nous allons vérifier que tout fonctionne en ajoutant ces couleurs à nos carrés. Donc, accédez au carré r, qui est l'élément de liste. Nous pouvons définir l'arrière-plan du style pour qu'il soit égal à une couleur aléatoire. Bon, nous avons maintenant notre élément de liste que nous sommes en train de créer. Nous pouvons maintenant l'ajouter à notre conteneur de carrés. Vous pouvez le faire en accédant à un stylo enfant. Accédez donc au conteneur ou au conteneur des carrés d'or des parents. La méthode append child pour ajouter notre nouvel élément de liste, qui est la variable appelée Square. Actualiser. Cela crée maintenant j'étais 16 éléments de liste et nous avons défini la couleur d'arrière-plan pour qu'elle soit égale à o valeurs aléatoires. Je m'en souviens puisque nous supprimons chacune de ces valeurs aléatoires par la suite, nous ne voyons que deux de chacune de ces couleurs. Bien. Nous avons donc ces carrés que nous voulons, mais nous ne voulons pas vraiment voir la couleur de fond comme celle-ci. Nous allons commenter cela et accéder à chacune de nos cases. Définira l'attribut, qui sera égal à un attribut personnalisé appelé couleur de tiret de données. La valeur sera égale à notre couleur. Cette information supplémentaire ou cet attribut va être ajouté à chacun de nos carrés. Nous pouvons donc le voir si nous allons dans les outils de développement, cliquons avec le bouton droit de la souris et inspectons les éléments, sautons dans la section du corps, ouvrons la liste non ordonnée. Et nous allons voir que chacun de nos éléments de liste que nous avons créés possède ces attributs personnalisés avec la couleur hexagonale. 8. Écouter des clics: Maintenant, qu'en est-il de 16 carrés sur l'écran ? Nous allons maintenant ajouter un écouteur d'événement à chacune de ces cases, qui déclenchera une fonction lorsque vous cliquerez dessus, le jeu se jouera par paires. Donc, lorsque nous cliquons sur deux carrés, nous allons comparer les couleurs de chacun. Pour cela, nous devons stocker la couleur des deux carrés cliqués , puis suivre s'il s'agit du premier ou du deuxième carré sélectionné. Les téléphones ne comparent les deux que s'il s'agit du deuxième clic. Donc, si nous avons deux carrés sélectionnés, allons comparer les couleurs des deux. Donc pour commencer, nous allons sauter juste en dessous de notre boucle while. Ce que nous allons faire, c'est sélectionner tous nos carrés qui sont stockés dans les éléments de la liste. Donc, récupérez tous ces éléments, interrogerez le sélecteur en boucle dessus, puis ajoutez un écouteur d'événement. Donc, je les ai vus à l'intérieur d' une constante appelée carrés utiliseront alors le point de document, le sélecteur de requête. Tous sélectionneront tous les éléments de notre liste. Cela va contenir une référence à nos 16 carrés d'éléments de liste. Ensuite, ci-dessous, cela utilisera une boucle for, of pour boucler sur chacun de nos carrés et ajouter un écouteur d'événement. Ainsi, une boucle for, of commence comme une boucle for. À l'intérieur, vous allez dire const square of squares. Cela signifie que nous allons parcourir toutes nos cases, ce qui correspond à nos 16 éléments de liste. Ensuite, nous pouvons accéder à chacun d'eux individuellement avec cette variable carrée. Donc, accédez à nos points carrés add event listener veut écouter un clic sur chacun d'entre eux, ce qui exécutera une fonction personnalisée appelée carré cliqué. Bon, donc juste avant créer cette fonction de clic carré, nous allons tout en haut et ajouter quelques variables supplémentaires pour stocker les informations dont nous avons besoin. Les informations dont nous avons besoin sont les deux cases frappées. Il va donc commencer à jouer. Nous cliquons sur le premier, puis sur le second. Je les installe à l'intérieur de deux variables. Alors partons de la case départ. Séparé par une virgule créera également une variable appelée square to. Elles n'ont pas besoin de valeur initiale. Et comme nous ne voulons cliquer que sur deux carrés à la fois, nous allons suivre cela avec une variable appelée nombre de clics, qui sera égale à 0. Égal à 0. Nous allons cliquer sur la première case. Elle sera ensuite augmentée pour s'échauffer. Cliquez sur le second, il sera augmenté à deux. Nous allons vérifier si c'est le cas. Ensuite, nous allons le remettre à 0, ce empêchera l'utilisateur de cliquer sur une troisième case. Bon, revenons à notre fonction que nous devons créer, qui s'appelle clic carré. Mettons-en place ça, mais juste en dessous. Comme mentionné précédemment, pour chacun de ces clics, nous devons augmenter notre variable de nombre de clics. Nous aurions plus plus. Cette variable de clic va donc être vraiment utile car nous avons besoin de savoir si c'est le premier ou le deuxième carré dont nous avons affaire. Le premier clic va définir notre variable carré un. Et au deuxième clic, nous allons définir notre carré deux. Est-ce qu'il contiendra toutes les informations de notre élément de liste qui ont été créées, y compris l'attribut contenant la couleur ? Mais juste avant cela, comment pouvons-nous savoir sur quel carré a été cliqué ? Une façon de procéder, que vous avez peut-être déjà vue par le passé, consiste à transmettre les informations relatives à l'événement dans la fonction. Et nous pouvons y accéder avec des cibles E-dot. Ou une autre façon est d'accéder à quelque chose appelé This. Je verrai la valeur de cela. Si nous le transmettons à une console, enregistrez, enregistrez et actualisons. Accédez aux outils de développement dans la console. Ok, alors cliquez sur l' une de nos cases. Nous pouvons voir un élément de liste ou cliquer sur une deuxième case, notre deuxième élément de liste. Ces deux éléments indiquent des attributs de données différents. Donc, le mot-clé this peut être une chose complexe en JavaScript, signifier différentes choses dans différents contextes. Mais pour notre cas d'utilisation, nous pouvons voir qu'il enregistre la valeur de l' élément de liste sur lequel nous avons cliqué. Nous pouvons donc l'utiliser pour définir nos variables. Nous pouvons le faire avec un opérateur conditionnel JavaScript. L'opérateur conditionnel, souvent appelé ternaire, posera une question, dira le nombre de clics est égal à un ? Posez une question si elle est égale à un ou si vous voulez faire est de définir la variable un carré pour qu'elle soit égale à ceci. Sinon, s'il est égal à deux, nous définirons carré pour qu'il soit égal à cela, définissant nos deux variables. Et ne vous inquiétez pas, si vous économisez sur le code Visual Studio, il ajoute automatiquement ces crochets. C'est tout à fait correct. Bon, donc pour tester cela, nous pouvons placer dans un journal de console la valeur de case un, puis carré pour actualiser et ouvrir la console. Cliquez sur le premier. Comme nous n'avons cliqué que sur une seule, la première variable carrée est définie et la seconde n' est toujours pas définie. Cliquez sur l'un des carrés, pour obtenir la valeur de deux éléments de liste différents. Comme nous le savons, tous nos carrés ne sont actuellement qu'un contour. Je devrai révéler la couleur d'arrière-plan lorsque chacun d'entre eux sera cliqué, indiquer à l'utilisateur de quelle couleur il s'agissait réellement, afin qu'il ne puisse pas s'en souvenir pour la prochaine fois. Pour ce faire, nous allons passer une instruction if, supprimer le journal de la console. Et nous allons dire que si le nombre de clics est égal à un, donc le premier carré a été sélectionné. Ce que nous allons faire, c'est récupérer notre première variable carrée. Nous allons définir l'arrière-plan du point de style. N'oubliez pas que c'est exactement ce que nous avons fait comme mesure temporaire à l'intérieur de notre boucle while pour définir les couleurs. Nous allons mettre cette valeur à la case départ. Nous allons récupérer nos attributs, que nous définissons ici, là où ils obtiennent des attributs. Les attributs que vous souhaitez sélectionner sont ceux personnalisés appelés couleur des données. Transmettez-la sous forme de chaîne. Si ce n'est pas le cas, cela équivaut à nos seconds clics ou transmettez-le dans les instructions l. Copiez cette ligne de code. Je ne veux pas faire ici, c'est changer cela pour qu'il soit égal à la racine carrée deux. Donc, juste comme un récapitulatif ou premier clic sur l'un de nos carrés, nous sommes en cours d'exécution, notre fonction augmentera le compteur de clics pour qu'il soit égal à un. Si c'est égal à un. Ou définissez la case 1 pour qu'elle soit égale à l'élément de liste cliqué. Si ce n'est pas le cas, c'est au deuxième clic que nous mettrons carré. Encore une fois, vérifier si le compte est égal à un. Le premier carré est cliqué. Nous allons modifier la couleur d' arrière-plan pour qu'elle soit égale à l'attribut de couleur des données, qui est stocké dans l'élément de liste. S'il s'agit du deuxième clic, nous définirons ce carré sur deux couleurs. Ces deux éléments seront donc révélés dans notre jeu. Essayons ça. Actualiser. Cliquez sur la couleur. Et le premier carré a son arrière-plan défini pour être égal à nos attributs. La seconde, ces deux couleurs sont maintenant réglées correctement. Vous remarquerez tout ce que nous pouvons continuer et cliquer sur le reste des couleurs, même si nous ne voulons en traiter que deux à la fois. Mais c'est quelque chose que nous traiterons à l'avenir. Ensuite, nous traiterons de ce qu'il faut faire si les couleurs sont nombreuses ou si elles sont différentes. 9. Vérifier une correspondance: Comme le titre de cette vidéo le suggère, l'objectif est maintenant d' attendre que deux cases soient sélectionnées. Ensuite, nous pouvons vérifier s'ils correspondent à I, II, ils ont tous les deux les mêmes attributs de couleur. Cela va descendre à la fonction r squared click. Et à l'intérieur de cette fonction, la section L sera exécutée si deux carrés sont sélectionnés. Donc je clique sur count est égal à deux, puis le code else s'exécutera. C'est donc ici qu'il faut vérifier s'il y a une correspondance et nous pouvons ajouter le code directement à l'intérieur. Est-ce que je vais plutôt créer une fonction séparée. Cette fonction va donc être appelée correspondance de chèque, ce qui va maintenant créer. Allez donc juste en dessous de notre fonction de clic carré et créez cette fonction. Vérifiez la correspondance. Alors, comment pouvons-nous réellement vérifier si les deux correspondent ? Eh bien, la façon de faire est d'accéder à la case 1 et à la case juste comme nous l'avons fait ci-dessus. Nous utiliserons la méthode d'attribut get pour couvrir la valeur de chacune des couleurs. Nous pouvons ensuite vérifier si elles sont égales et les stocker dans une variable. Tout comme nous l'avons fait ici. X est notre variable appelée à la case 1, obtiendra les attributs, ce qui est appelé Couleur des données. Et nous allons vérifier que c'est égal à la même chose en utilisant le carré deux. Cela va donc comparer les deux pour les attributs et cela retournera une valeur booléenne vraie ou fausse, que nous pouvons stocker dans une variable appelée match. Ensuite, la valeur de match déterminera les fonctions suivantes que nous allons exécuter. Nous allons donc créer deux nouvelles fonctions. Le premier, s' il n'y a pas grand-chose, alors celui-ci le sera, s'il y a une correspondance. Pour déterminer lequel va être exécuté, nous pouvons placer une instruction if. À l'intérieur, nous allons vérifier s'il n'y a pas grand-chose, qui fonctionnera si c' est égal à false, puis nous lancerons notre fonction de correspondance et nous saurons que beaucoup d'autres exécuteront notre seconde fonction. Et en fait, nous appellerons cela bien des changements. Un, c'est beaucoup. Ainsi, une seule de ces fonctions sera exécutée à la fois. Et nous reviendrons sur la majorité de ce contenu dans les prochaines vidéos. Mais pour l'instant, ce dont les deux ont besoin, c'est de réinitialiser le nombre de clics. Puisque les deux ne sont exécutés que si nous sommes au deuxième clic. Cela signifie que nous avons sélectionné deux carrés. Nous devons donc réinitialiser le compteur de clics, revenir à 0. Nous allons donc d'abord le faire. Le nombre de clics est égal à 0 et il en va de même pour une correspondance. Maintenant, tout ce que nous allons faire dans ces deux fonctions est de les placer dans un journal de console pour vérifier que cela fonctionne. Le premier à ne pas correspondre. Le second est une correspondance. Ok, testons ça. Actualisez la page dans la console. Tout d'abord, nous allons cliquer sur deux carrés. Nous pouvons clairement voir à cause de la couleur de ceux-ci et non d'une correspondance. Et la fonction correcte a été exécutée. Nous allons donc essayer de créer une correspondance. Celui-ci n'est toujours pas grand chose. Mais si vous cliquez sur nos deux greens, celui-ci sera un match. 10. Gérer un match: Pour le moment, nous pouvons cliquer sur n'importe quel nombre de carrés et les couleurs sont alors révélées. Nous devons limiter cela pour ne travailler qu' avec deux carrés à la fois. Nous ne voyons donc pas ce que nous avons actuellement. Auparavant, nous avons créé deux fonctions, qui sont de gérer les conditions de correspondance et de correspondance de note. Tout ce que nous faisons est d'augmenter le compteur de clics sur chacun d'entre eux et de créer un journal de console à des fins de test. ne reste plus qu'à étendre ces fonctions pour traiter ces résultats, commençant par la fonction de correspondance des notes. Donc, s'il n'y a pas grand-chose à faire, par exemple, nous voulons sélectionner deux de nos carrés et ensuite, s'ils ne sont pas trop, nous devons ensuite les retourner pour masquer efficacement le couleurs d'arrière-plan. Pour ce faire, juste au-dessus de notre nombre de clics, nous allons accéder à nos deux cases. Supprimez la propriété style, où nous définirons l' arrière-plan comme étant égal à une chaîne vide. Nous ferons de même pour le nombre carré pour enregistrer cela, et essayons-le. Nous ne savions pas grand-chose. Cliquez donc sur l'un d'entre eux. Et nous pouvons voir que dès que vous n'avez pas de correspondance, celui-ci est tellement bon. Nous n'avons pas de correspondance comme ça. Le second disparaît si vite qu'on ne peut pas voir de quelle couleur il était. Ce n'est pas bon pour notre jeu car l'idée est que nous voulons que les utilisateurs puissent cliquer sur ces couleurs. Je ne me souviens pas lequel était lequel. Donc, pour ralentir les choses, ce que nous pouvons faire juste avant l'appel est aucune fonction de correspondance. Nous pouvons encapsuler cet appel de fonction avec un délai d'expiration. Découpons ça. Placez-le dans un setTimeout JavaScript, qui exécutera une fonction. Cette fonction séparée par une virgule sera exécutée après un certain temps. C'est donc en millisecondes. 500 millisecondes, c'est une demi-seconde. Ensuite, à l'intérieur du corps de la fonction, collez notre appel de fonction. Rechargez le navigateur et essayons-le. Allons-y pour le payeur qui ne correspond pas. Nous pouvons voir que les deux couleurs sont révélées, puis elles attendent 2,5ème avant de les retirer. Cela permet au joueur de se souvenir de la couleur sélectionnée afin de pouvoir l' utiliser ultérieurement. Nous pouvons donc commencer à comparer notre prochaine paire de carrés. Ce que nous allons ensuite faire juste au-dessus du compteur de clics est également de réinitialiser la case 1. Réinitialisez la variable pour qu'elle soit une chaîne ou plutôt une chaîne vide. Et nous ferons de même pour la case deux. Nous avons donné une toile vierge pour notre prochain essai. C'est donc tout ce dont nous avons besoin pour notre fonction no match. Donc, jusqu'à la fonction is much qui va s'exécuter si deux couleurs sont identiques. Donc, qu'allons-nous faire s' il y a une correspondance que nous avons déjà définie dans la couleur d' arrière-plan. Nous allons donc supprimer cette bordure que nous avons déjà, et également supprimer l'écouteur d' événement afin qu'il n'interfère pas avec le reste du jeu. Juste au-dessus du nombre de clics. Prends le carré. La propriété style. Eh bien, nous allons définir la limite pour qu'elle soit égale à non. Copiez et collez ceci. Faites le même carré pour. Ensuite, nous allons supprimer l'écouteur d' événement afin ne plus pouvoir cliquer avec le bouton droit de la souris sur ces cases, ce qui va interférer avec le reste du jeu. Un carré. Cette fois, nous allons appeler remove event listener. Et cela doit prendre en compte les mêmes paramètres que l'une des premières configurations, cet écouteur d'événement. Donc, si nous allons dans la section de l'écouteur d' événement, qui se trouve juste ici, nous devons passer exactement avec les mêmes paramètres. Cela inclut donc le type d'écouteur d' événement qui est actuellement cliqué, ainsi que la fonction à appeler. Je vais le coller dedans. Copiez et collez le carré deux. Essayons maintenant de le résoudre en trouvant un orange bleu foncé. Nous avons deux oranges. Alors cliquons sur ce formulaire, nous avons une correspondance. Celles-ci restent dans le jeu et nous pouvons voir si nous y regardons de plus près, nous n'avons pas cette frontière autour de chacune d'elles. Cliquons sur l'un de ces carrés révélés. Maintenant, cliquez sur un deuxième. Puisque l'écouteur d'événement a été supprimé du premier, nous devons toujours cliquer sur un autre carré pour créer une paire. Les choses commencent donc à fonctionner comme elles le devraient actuellement, mais il y a quelques petits problèmes que nous devons résoudre. L'un d'eux consiste à cliquer deux fois sur le même carré. Si nous devions faire cela et cliquer deux fois sur le même carré , comme nous l'avons fait ici. Nous pouvons voir que le tableau a été supprimé et que cela est considéré comme une correspondance car ils ont évidemment tous les deux le même attribut de couleur de données. Pour régler ça, montons sur notre place. Cela est exécuté chaque fois que je clique sur l'un de nos carrés de la grille, nous pouvons sauter dans notre fonction et ajouter une instruction if. Et cette instruction if va d' abord vérifier si le carré est égal à ceci. Cela signifie donc que si nous avons déjà cliqué sur une case, sera égale à la case un. Et puis quand nous cliquons sur un deuxième carré, encore une fois, si je clique sur le même, ce sera égal au carré alpha. Si c'est le cas. Nous quitterons ensuite cette fonction avant d' exécuter tout autre code. Un autre problème est que nous pouvons également cliquer rapidement sur Plus de deux carrés. Donc, cliquez sur 123. Et avant que le délai de 2,5ème ne soit terminé, cliquez sur Plus de deux carrés. Donc pour cela, nous allons faire quelque chose de très similaire qui reviendra de cette fonction si quelque chose est vrai. Mais cette fois, nous le ferons juste en dessous de notre nombre de clics. Nous faisons cela parce que si nous avons actuellement deux cases cliquées, la carte cliquée sera égale à deux. Par conséquent, nous pouvons placer dans une instruction if, qui va vérifier si le nombre de clics est supérieur à la valeur de deux, puis nous reviendrons, modifiant le dysfonctionnement. Allons tester ça. Rafraîchissez lorsque vous cliquez plusieurs fois sur le même carré et cela n'a aucun effet. Nous pouvons rapidement cliquer sur Plus de deux cases. Plus de deux clics sont ignorés. 11. Suivi du score et de la fin du jeu: L'objectif de cette vidéo sera maintenant de suivre la partition et d'utiliser ces éléments p, que nous avons créés dans une vidéo précédente. Nous allons le mettre à jour chaque fois que nous aurons un match, masquerons également lorsque nous n'avons aucun score actuel. De plus, une fois que le jeu est terminé et que toutes les cases sont appariées avec une poignée, laissez l'utilisateur réinitialiser le jeu pour recommencer. Donc, pour recommencer dans notre script, nous allons créer une nouvelle variable pour suivre le score. Utilisera des leçons. Nous pouvons le mettre à jour et nous allons initialement définir le score pour qu'il soit égal à 0. Comme mentionné, nous ne voulons pas que ce chiffre soit affiché comme 0 avant le début du jeu. Nous pouvons donc masquer cela en accédant au document. Sélecteur de requêtes. Rappelez-vous, c'est-à-dire p éléments qui affichent la partition, a cette idée de score. Nous pouvons donc l'attraper sous forme de chaîne. Définissez la visibilité du point de style sur masqué. La raison pour laquelle nous allons basculer la visibilité plutôt que le type d'affichage est que nous voulons également conserver cet espace dans notre code. Si nous définissons l' affichage sur aucun, cela supprimera alors cet élément du navigateur et poussera tous les jeux en haut. Et aussi, lorsque nous le rétablissons pour afficher le score, cela pousserait tout le jeu vers le bas et le rendrait très nerveux. Ok, maintenant nous devons mettre à jour la variable de score et la rétablir également. Nous avons notre premier match. Descendez donc à la fonction match, qui se trouve juste ici. Stefan doit appeler le score plus les augmentations de la valeur de un. Nous utiliserons le sélecteur de requête par points de document pour récupérer nos éléments Scott et nous définirons le texte intérieur pour qu'il soit égal à notre score. C'est aussi copier et coller cette ligne. Récupérez tous les éléments p une fois de plus. Cette fois, nous allons définir la visibilité du point de style pour qu'elle soit égale à visible. Cela remplacera la propriété cachée que nous avons définie en haut. Alors sauvegardons ça et essayons-le. Au départ, lorsque nous rechargeons le jeu pour la première fois, le score a été supprimé car nous avons défini la visibilité comme étant égale à cachée. Maintenant, quand nous rafraîchissons, essayons d'en obtenir beaucoup. J'ai deux roses. Je vais marquer est maintenant mis à jour. Ensuite, nous allons créer une nouvelle fonction qui va vérifier si le jeu est terminé. Cela signifie que toutes les paires ont été appariées. Donc pour cette nouvelle fonction, qui s'appelle check game ended, et nous lancerons cette fonction chaque fois que nous aurons une paire correspondante. Nous devons donc savoir exactement ce qui cause la fin de notre partie. Ce sera donc notre nombre de carrés, qui est fixé à 16. Ensuite, divisez-le par deux. Puisque nous faisons correspondre ces déficiences. Enregistrez cela dans une variable ou une constante appelée target. Ce résultat est donc effectivement huit. Nous devons ensuite créer une seconde constante, qui sera une valeur booléenne appelée GameOver. Nous pouvons utiliser l'opérateur conditionnel JavaScript. Nous allons donc vérifier si le score est égal ou supérieur à l'objectif. Posez la question. Si c'est vrai, GameOver sera égal à vrai. Donc, en gros, si le score est égal à huit, retournera vrai. cas contraire, nous enregistrerons la valeur de false. Nous pouvons ensuite exécuter une instruction if pour vérifier si game over est égal à true, puis exécuter du code à l'intérieur. Donc, à l'intérieur de cette instruction if, vous voulez réinitialiser un jeu affichant ce bouton rejouer. Actuellement, nous ne l'avons pas encore caché. Nous y reviendrons donc dans un instant. Nous allons maintenant exécuter notre fonction à l'intérieur de la fonction de correspondance de chèques. Alors vérifiez beaucoup. Cette opération est exécutée chaque fois qu'une paire de carrés sera sélectionnée. Et nous voulons vérifier cela uniquement si nous avons une correspondance. Donc, juste après avoir vérifié s'il y a une correspondance, exécutera cette fonction. Donc, comme mentionné, si c'est vrai, cela va déclencher notre bouton Rejouer. Nous devons donc d'abord le cacher avant la fin du jeu. Allons tout en haut. Prenez ceci, installez-le à l'intérieur d' une constante appelée bouton Play Again. Je vais saisir cela avec le sélecteur de requête par points de documents, chaîne. Si nous allons sur notre page d'index, nous pouvons voir qu'il n'y a pas de classes ni d'ID. Nous pouvons donc l'attraper simplement par le nom de la balise du bouton. Accèdera à cette variable, définira la visibilité du point de style égale à a1. Cela signifie que dès que nous actualisons la page, nous ne voyons pas le bouton. Une fois le jeu terminé, nous devons faire le contraire en réglant la visibilité sur visible. Mais juste avant cela, nous allons également accéder à notre bouton Rejouer. Nous allons ajouter un écouteur d'événement, qui va maintenant être listé pour un clic et exécuter à nouveau une fonction appelée play. Bon, maintenant pour terminer, ce que nous allons faire c'est régler notre bouton pour qu'il soit visible une fois le jeu terminé. Et créera également cette fonction de lecture à nouveau. Commençons par la visibilité. Revenez à notre fonction Vérifier la fin de la partie. Donc, si le jeu est terminé, si cela est égal à vrai, accèdera au bouton Tout jouer à nouveau et fera le contraire en réglant la visibilité du point de style sur visible. Enfin, nous allons déplacer ce code commenté et créer notre fonction qui s'exécute chaque fois que je clique sur le bouton. Nous avons ajouté l'écouteur d'événement pour cela et appelons cette lecture à nouveau. Le code pour cela va être assez simple. Tout ce que nous allons faire est de recharger la page en sélectionnant l' emplacement du point de la fenêtre , puis en appelant la méthode reload. Enregistrez ceci et actualisez la page. Ce que nous devons faire maintenant est de terminer le jeu en faisant correspondre toutes ces cases. Le gris, le vert, le bleu clair . Allons-y. Donc dès que le jeu se termine avec le bouton Rejouer NCD , cliquez dessus. Cela appelle la méthode reload, puis redémarre le jeu. 12. Animations: Pour terminer le projet, nous pouvons maintenant ajouter quelques effets d'animation. Il y aura une animation de secousse si le match est incorrect. Et pour une correspondance correcte, nous allons ajouter un effet pop. Pour cela, passons à notre feuille de style et nous pouvons y ajouter nos animations. Donc tout en bas, nous allons d'abord configurer deux classes différentes, que nous pouvons insérer avec JavaScript. La première est que si la correspondance est incorrecte, vous voulez faire trembler ces deux carrés. Pour cela, nous allons ajouter un effet d'animation. On va appeler ça un shake. Et nous allons mettre cela en place dans une seconde. Je ferai en sorte que cela se produise en 0,1 seconde. Donc, ce sera très rapide, puis les carrés reviendront à la normale. Si la correspondance est correcte. Nous allons faire un effet pop. Comme ci-dessus. Nous allons créer notre animation qui s'appellera POP, ce qui la rendra un peu plus longue. Ce sera plus de 2,5. Donc, à la fois pour la forme et pour ce pop, nous devons configurer les images-clés. Nous le faisons donc avec l' ajout d'images-clés. Je passe le nom de shake. Donc, à l'intérieur de ces images clés, nous voulons configurer les différentes étapes de l'animation. Nous pouvons donc configurer cela du début à la fin, ou nous pouvons également ajouter différentes étapes au fur et à mesure. Ainsi, par exemple, à 0 %, l'animation peut être un certain état, puis vingt-cinq pour cent, cinquante 75% et enfin, 100 pour cent. Donc, si vous n'avez jamais utilisé ces images-clés auparavant, il suffit d'ajouter l'une de nos propriétés CSS à l'intérieur de ces accolades . Et nous pouvons changer ces différents états. Par exemple, nous pourrions peut-être dire qu' une couleur est une couleur à l'intérieur d'ici. Dites simplement « couleur rouge ». Et puis à vingt-cinq pour cent, on pourrait changer ça pour qu'il soit coloré en bleu. Cela fonctionne pour n'importe laquelle de nos propriétés CSS. Mais pour notre cas, faire l'effet de secousse ou veut faire est d'utiliser la rotation, qui va faire pivoter les éléments d'un certain nombre de degrés. Pour ce faire, il met en place une transformation appelée Rotation. Et puisque c'est le tout début, nous allons le régler à 0 degré. Copions cette section. Collez cela à vingt-cinq pour cent. Pour ces trois degrés négatifs, moitié de 50 pour cent le rétabliront au milieu. Cela tournera de manière négative, puis de nouveau au centre. Aux trois quarts du parcours, nous ajouterons cela comme une valeur positive des degrés libres. Et puis, à la fin, nous rétablirons la place. Tout cela va donc se produire très rapidement puisque nous avons réglé cela sur une durée de 0,1 seconde. Nous allons donc faire pivoter rapidement vers la gauche et la droite , puis replacer un carré au centre à 0 degré. Le prochain, l'effet pop. Nous ferons la même chose. Nous devons configurer les images-clés avec la règle des images-clés. Celui-ci s'appelait « pop ». Donc 0 %. Pour celui-ci, il n'a pas besoin d'autant d'étapes. Tout ce que nous allons faire est d' augmenter les éléments pour les agrandir un peu, puis de les redimensionner à la taille normale. Nous avons donc besoin de trois étapes le début, le milieu et la fin. Donc, si cela utilise également la transformation, celle-ci utilisera l'échelle. Ainsi, lorsque nous utilisons l'échelle, la valeur de un est taille irrégulière de l'élément. C'est donc effectivement la position de départ. Copions ça. Et nous voulons que cet effet soit assez subtil. Nous pouvons le faire deux fois la taille de trois fois la taille ou tout ce que vous voulez. Mais tout ce que je vais faire c'est faire un peu de pop subtil, ce qui rendra l'élément un peu plus grand puis rétablira sa taille normale. La valeur que je veux rechercher est 1,06. Ensuite, à la fin de la transformation, revenez à la taille normale. Tout cela se produira pendant la durée du 2,5. Revenons à notre script. Tout d'abord, s'il y a une correspondance, nous allons ajouter la classe pop à la fonction. Juste pour, Oui, et ensuite tout ce qu' on a à faire ici c'est d'ajouter la classe de pop. Ajoutons ceci. Juste après avoir défini le carré d'accès de visibilité une variable. La liste des classes. Nous utilisons la fonction add pour ajouter notre classe de pop, copiez-collez ceci, puis modifiez-le en racine carrée deux. Je vais donc ajouter la classe et nous devons également ajouter la classe de forme. Pour ce faire, nous allons dans notre fonction où nous vérifierons la correspondance. Souvenez-vous qu'à l'intérieur, nous avons nos deux sections. La première consiste à vérifier s'il n'y a pas de correspondance. S'il n'y a pas grand-chose. Juste avant le temps mort, nous pouvons accéder à notre carré. Liste des classes de points. L'ajout de points ajoutera l'effet Shake. Dupliquez ce carré deux. Nous ajoutons donc ici l'effet Shake. Nous attendons ensuite 2,5ème, appelons la fonction no match. Ensuite, à l'intérieur de la fonction match, nous pouvons supprimer ces effets de secousse. Descendez donc à la fonction no match. C'est à l'intérieur de la figurine. Nous supprimons donc la classe de forme car les carrés peuvent être erronés plusieurs fois. Ainsi, l'ajout et la suppression de la classe déclencheront l' effet de secousse à chaque tentative. Faisons donc cette étrange liste de classes à un point carré. Mais cette fois, nous allons appeler la fonction de suppression. Jacque fera de même pour la deuxième case. Cela devrait maintenant être ajouté et supprimé. Donc, si cette classe n'a été ajoutée et jamais supprimée, elle ne sera appelée qu'une seule fois. Donc, par exemple, si nous avions une erreur comme celle-ci, prochaine fois que nous essaierons de faire la correspondance incorrecte, n' obtiendrons pas l'effet shake. Bon, assurez-vous que tous les fichiers sont enregistrés. Actualisons la page et nous allons commencer. Il s'agit d'une correspondance incorrecte. Nous pouvons donc voir que nous avons cet effet de tremblement, qui est très rapide et dure plus de 0,1 seconde. Essayons l'effet pop en créant une correspondance. Verts. Maintenant, lorsque nous avons une correspondance, nous obtenons cet effet pop qui agrandit un peu les éléments , puis revient à la taille normale. 13. Suivez-moi sur Skillshare !: Toutes mes félicitations pour avoir atteint la fin de ce cours. J'espère que vous l'avez vraiment apprécié et que vous en aurez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare et de me suivre pour toutes les mises à jour et aussi pour être informé des nouveaux cours dès qu'ils seront disponibles. Merci encore, bonne chance, et j'espère vous revoir dans un prochain cours.