JS'amuser avec Javascript : Construisez un jeu de correspondance de nombres !

1. Bienvenue dans le cours !: Hé, bienvenue dans ce cours. Si vous êtes un débutant en développement web et que vous voulez simplement sauter et construire des projets amusants, vous êtes au bon endroit. L' idée derrière ces séries est de vous montrer ce que vous pouvez faire avec HTML, CSS et JavaScript standard. Nous n'allons pas utiliser de frameworks, de bolerplate, de bibliothèques ou de modèles. Au lieu de cela, nous allons tout construire complètement à partir de zéro, étape par étape pour vous montrer comment ces technologies libres fonctionnent toutes ensemble. Ce projet particulier va être un jeu de match de nombre. Les règles sont assez simples. Si nous cliquons sur le bouton de lecture, nous sommes alors présentés avec une série d'images, puis l'utilisateur doit décider si le nombre d'éléments dans l'image est le même que la question sur la gauche. Si nous pensons que c'est vrai, nous cliquons sur la coche, Si nous croyons que cela est incorrect, nous cliquons sur la croix et notre score est ensuite ajusté en fonction de la bonne réponse. Nous avons un certain nombre d'images qui sont toutes uniques. Aussi, nous pouvons changer la durée de temps entre chacune de ces images aussi. À la fin de la partie, nous aurons également l'occasion de commencer une nouvelle partie et aussi de voir notre score total aussi. Comme pour tous les autres projets, nous créons l'interface utilisateur en HTML, puis nous utilisons notre CSS pour le style et aussi la mise en page. Nous allons travailler avec des tableaux d'objets, travailler avec des retards de temps, des fonctions, travailler avec le DOM. Réglage aléatoire de la source de l'élément image, génération et affichage en nombres aléatoires, comparaison des nombres, travail avec des délais d'attente, mise à jour du score utilisateur et aussi quelques petites touches telles que certains fondu, animations aussi. C' est un excellent projet, si vous êtes un débutant et un nouveau venu au HTML, CSS et JavaScript, et j'espère que vous êtes intéressé par ce cours. Je te verrai dans la première leçon. 2. 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 reprendre un autre cours. 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, ce qui 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. Vous pouvez même prendre du recul une fois que vous avez terminé le cours, revenir et apporter des modifications au projet 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, et 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. 3. Créer l'interface utilisateur: Pour ce prochain projet, qui est le jeu de match de numéros, nous allons compter sur l'utilisation de beaucoup d'images. Vous pouvez utiliser vos propres images pour ce cours, mais j'ai également fourni un dossier Images si vous voulez utiliser les mêmes images que moi. Si vous allez sur github et allez au dépôt pour ce cours, qui est fun-javascript projects.com. Vous serez ensuite redirigé vers une page où vous pourrez télécharger le code complet, qui inclura tous les projets et aussi ces solutions d'étapes ainsi que tous les actifs. De là, nous pouvons télécharger les fichiers zip, obtenir le bundle complet. Ensuite, une fois téléchargé, si nous allons dans le jeu de match de numéros, vous verrez un dossier d'images. Il y aura aussi des solutions froides pour chaque vidéo. Ce sera le jeu que nous allons créer. C' est une interface utilisateur assez simple, nous avons juste deux sections. Nous avons une section de bienvenue, où nous allons cliquer sur le bouton de lecture et pour commencer. L' idée de ce projet est que nous allons parcourir un certain nombre d'images, aura alors une certaine quantité d'éléments dans chacune de ces images, comme deux cartes ou huitième bougies d'anniversaire. Ensuite, l'utilisateur doit décider si le nombre sur la gauche correspond aux mêmes éléments multiples que dans l'image. Par exemple, nous avons deux poivrons, donc ce serait correct. Nous cliquons sur la coche. C'est sept pinceaux, donc ce sera faux, je vais cliquer sur le X. L'échelle de temps pour chacune de ces images sera également définie à l'intérieur du projet. Ceci est entièrement réglable. Si vous voulez que le jeu soit plus difficile, nous pouvons réduire le temps perdu, et nous pouvons également l'augmenter pour rendre le jeu plus simple. Le jeu est effectivement submergé, nous parcourons toutes les images. Dans notre cas, nous avons fourni 20 images dans le dossier Images. Une fois que nous obtenons à travers 20 d'entre eux, va alors obtenir un écran à la fin qui indique à l'utilisateur combien ils ont correct. Vers le bureau et nous allons créer un nouveau dossier de projet. Le nom de celui-ci va être une correspondance de nombre. Faites glisser ceci dans votre éditeur de texte. Nous pouvons commencer par un nouveau fichier, qui va être le index.HTML. Encore une fois, nous avons besoin de notre structure HTML et je vais utiliser la commande emmet intégrée, qui est HTML5, puis ajouter un titre de document, qui est la correspondance numérique. Cliquez avec le bouton droit de la souris et copions le chemin, puis collez-le dans un nouvel onglet de navigateur. Travaillons à l'intérieur de notre section du corps. Cela va contenir une section principale, qui va être le wrapper principal pour tout le contenu. Nous allons également utiliser cela à l'intérieur de JavaScript afin que nous puissions lui donner un ID unique. Je veux aller pour l'aire de jeu. Cette section principale sera composée de deux domaines principaux. Nous allons avoir la section de départ, qui est à gauche, et à droite, nous allons avoir la zone d'image. Cela va dans deux divs séparés. Le premier est pour le côté gauche. La classe commence. Le deuxième div sera pour la zone d'image à la classe de zone d'image. Ce sont nos deux principaux wrappers pour notre zone de jeu, et nous allons commencer sur le côté gauche, ce qui est ces statistiques. regardant la version finale ici, nous allons avoir un score qui va être mis à jour dynamiquement lorsque l'utilisateur a raison ou tort. Nous allons alors avoir un numéro qui va être généré au hasard, le nom de l'image, puis nos deux boutons. Aussi juste comme une note de côté aussi, quand nous arrivons à cela plus tard. Le nombre qui est généré juste ici. Cela va être soit le nombre exact d'éléments dans l'image, soit il va être un plus haut, un plus bas. C' est pour rendre le jeu un peu plus difficile. Par exemple, nous ne voulons pas voir 10 éléments à l'écran. Ensuite, un certain nombre d'un est comparé à, puisque cela rendrait le jeu assez simple. Dans la zone de départ, ouvrons cette div. Je vais commencer tout en haut avec un titre de niveau 3. Ce post le texte de la partition. Le score de l'utilisateur sera quelque chose comme 2 sur 20. Mais ces deux domaines vont être dynamiques. Le premier, nous pouvons créer un élément span. Donnons-lui un ID, qui sera notre score actuel. Juste après la barre oblique, il peut s'agir d'une section 2 dynamique. Un second élément de travée. Cela va avoir l'ID, qui sera égal au total disponible. Cela va être le nombre total de points disponibles, ce qui est le même nombre d'images que nous allons avoir. Nous pouvons également ajouter des valeurs d'espace réservé juste pour rendre cela plus visible. Allons-y pour deux et 20 ans. C' est à quoi il ressemble à l'intérieur du navigateur. La prochaine chose à faire est de passer à notre prochaine section. Si nous cliquons sur « JOUER », ce sera le nombre d' éléments dans l'image suivi des deux boutons. Faisons-le sous la rubrique de niveau 3. Le texte va avoir la classe d'éléments. C' est pour que nous puissions ajouter un peu de style à l'intérieur du CSS. Encore une fois, ce sera deux sections dynamiques. Nous allons avoir le nombre généré au hasard, qui est soit le nombre d'éléments un plus élevé ou un plus bas. Faisons cela à l'intérieur d'une plage avec l'ID du nombre. Nous pouvons ajouter une valeur de détenteur de place à l'intérieur ici. Ensuite, une deuxième plage avec l'ID, qui est égal au nom de l'élément. Une valeur d'espace réservé à l'intérieur d'ici, donc ce seront les images alors allons-y pour six canards et un espace entre les deux. Ensuite, juste après l'élément p, nous pouvons ajouter une nouvelle section div, qui va être le wrapper pour nos deux boutons. La classe qui va être utilisée dans le CSS, cela va être égal à beaucoup de boutons. Ensuite, notre premier bouton, le premier symbole que nous allons utiliser ou le premier caractère va être le tic, qui va être utilisé comme une petite entité de couverture avec le code des esperluettes, le hachage 10003 suivi du point-virgule. Le deuxième bouton, qui va être à travers, et ce sera un code d'entité HTML, qui est l'esperluette, le dur 10007, et le point-virgule. L' étape suivante consiste à ajouter la zone d'image, qui sera le côté droit. Actuellement, lorsque nous commençons juste le HTML, cela peut sembler un peu désordonné parce que nous devons créer deux sections. Nous devons créer cet écran de bienvenue, et nous devons également créer la section image une fois que le jeu est en jeu. Nous utilisons JavaScript pour afficher et masquer ces deux sections. Commençons si nous descendons à notre deuxième div juste après que les statistiques, qui est la zone d'image, vont travailler avec notre écran d'accueil au début. En haut, nous allons ajouter un titre de niveau 3, qui va avoir l'ID du message. Cela va être vide niveau 3 en-tête, et nous allons utiliser JavaScript plus tard pour ajouter un message, qui va dire à l'appel du bureau utilisateur. Cette section ne sera également disponible qu'à la fin du jeu. Ensuite, une section div, et cela va être le wrapper pour notre écran de démarrage. À l'intérieur, ce sera tout le contenu que nous verrons au début. Nous allons ensuite cacher ceci et commencer le jeu. Pour garder cela unique, nous pouvons ajouter un ID qui est égal à l'écran de démarrage, et le contenu pour commencer sera un titre de niveau 1. C' est le texte que nous verrons tout en haut. Notez également comment le mot correspondance est également souligné. C'est notre descente. Ensuite, nous pouvons envelopper la correspondance de nombre dans les éléments m. La section suivante est également soulignée. On peut dire que les règles sont simples. Encore une fois à l'intérieur des éléments m. Ensuite, tout le reste du texte sera dans les éléments p. Les deux lignes suivantes vont être préfixées avec une entité HTML pour cette petite flèche. Cela va avoir le code d'entité qui est égal à l'esperluette, le dur 96, 54, puis le point-virgule, suivi du texte, tous les pouces de coup vers le haut. Si le nombre d'éléments correspond au nombre affiché. Après cela, un second élément p, nous allons à nouveau utiliser le même code d'entité HTML que ci-dessus. Nous pouvons maintenant descendre, sur le texte est pouces vers le bas si aucune correspondance. La troisième, qui est la dernière ligne de texte est que vous avez un certain nombre de secondes pour décider. Ce nombre va également être dynamique, donc nous pouvons changer cela dans le JavaScript. Nous devons envelopper ce nombre dans une période qui va avoir l'ID de réglage de l'heure. Dans l'élément p que vous avez, créez un élément span avec cet ID. Vous pouvez ajouter le nombre à l'intérieur si vous le souhaitez, suivi de secondes pour décider. Voyons à quoi il ressemble dans le navigateur. Tout cela semble bien, il nous aide juste avec le CSS plus tard. Nous allons également ajouter une classe chacune de ces lignes de texte. Ce sera une classe d'espacement où nous allons ajouter un peu d'espacement sur le haut et le bas. Passons à nos lignes de texte, et nous commencerons par la première ligne sous le titre. Je vais nous donner une classe, qui est le tiret de l'espace y, car cela est responsable de l'ajout d'espace et sur l'axe des y. Copiez ceci et collez-le dans les éléments p juste en dessous. Cela nous donnera un peu d'espace cohérent lorsque nous ajouterons notre style. Après cela, nous avons également un bouton de lecture vers le bas. Stocké dans cette section div, un bouton avec l'ID du bouton de lecture, texte à lire. C' est maintenant tout le contenu dont nous avons besoin pour tout cet écran de bienvenue. La prochaine chose que nous devons faire est d'ajouter une image d'espace réservé, qui sera pour efficacement l'écran suivant. Il va jeter un oeil à la version finie juste ici. Tout ce que nous avons à faire ici, c'est de faire pivoter ou de parcourir l'une de ces images. Tout ce dont nous avons besoin, et c'est juste un espace réservé, allez sous le bouton et puis en dehors de notre section d'écran de démarrage. Un nouveau div, qui va être le wrapper pour cette image avec l'ID du conteneur d'image. Nous allons créer une image dynamiquement en utilisant JavaScript. Mais pour l'instant, nous pouvons ajouter une image d'espace réservé juste pour que nous puissions voir à quoi tout ressemble quand nous venons d'ajouter notre CSS. Tout d'abord, nous pouvons aller dans le dossier images, puis barre oblique et le nom de l'une de nos images. Je veux aller chercher les macarons. Nous pouvons laisser le texte alt pour l'instant car cela va être supprimé très bientôt. Ensuite, nous devons réellement ajouter ces images dans notre dossier de projet. Nous pouvons utiliser les mêmes images que celles que j'ai utilisées dans ce cours, ou vous pouvez télécharger les vôtres. Je vais les coller dans nos projets de correspondance de numéros. Cela devrait maintenant nous laisser avec une image. Cela semble un peu désordonné puisque ces deux sections seront échangées. Nous devons également ajouter du style CSS, ce que nous allons faire dans la prochaine vidéo. 4. Styliser avec CSS: Nous sommes maintenant de retour avec notre projet et en ce moment nous allons appliquer un style CSS pour améliorer l'apparence et la sensation de ce projet. Pour ce faire comme si nous allions créer une feuille de style à l'intérieur de notre répertoire de projet. Nouveau fichier, et ceci est le styles.css. Nous pouvons lier cela à l'intérieur de la section d'en-tête ou de la page d'index avec notre lien. C' est au même niveau que notre page d'index. C' est simplement le nom de styles.css. Nous pouvons passer à nos feuilles de style et commencer par créer la racine d'une taille à l'intérieur de notre sélecteur HTML. Commençons par la taille de la police racine, et je vais aller pour un 10 pixels, et aussi une couleur qui s'appliquera à tous les textes notre projet et nous allons le remplacer utiliser peut sélecteur. La couleur à prendre va être 212560. Je vais vérifier que c'est le travail en rechargeant le navigateur, et tout cela est maintenant pris en vigueur. Maintenant, nous allons passer à la zone de jeu, qui était le wrapper principal, et ceci est le wrapper pour les deux sections de statistiques de vie et aussi pour ImageArea. Ce n'était pas une pièce d'identité, donc nous utilisons le dur. Maintenant, nous allons faire ici est de définir un style de police et aussi la taille. Donc 1.6rems, un peu de rembourrage. Allons pour le rembourrage sur le dessus de 3rems. Cela nous donnera juste un peu d'espacement en haut de la page juste ici. La majorité de notre style va être divisée en deux sections. Avoir la section Stat, qui est toutes les informations en haut ici. Nous avons le score, le nombre d'éléments sur l'image, et aussi la coche et les boutons croisés , puis ci-dessous, qui sera toute cette section ici. Ce sera la zone de l'image. Tout d'abord, nous allons cibler les deux sections et nous pouvons définir la hauteur minimale pour le petit écran. C' est la classe de la zone d'image, et aussi la même chose pour les statistiques. La hauteur minimale, je vais aller pour 30 vh, ce qui est de 30 pour cent de la fenêtre visible des navigateurs. Cela va rendre nos sections un peu plus grandes. Cela n'a pas vraiment d'importance pour le moment parce que vous aurez beaucoup de contenu à l'écran, mais plus tard en JavaScript, mais plus tard en JavaScript, lorsque nous bascutons entre cette section et l'image, il y a moins de contenu sur le écran. Pour la zone d'image, je vais appliquer un dégradé comme couleur d'arrière-plan, tout comme la version finale. Ce sera la section ovale sur la droite ou sur le petit écran. Ce sera la section en bas. En descendant l'ImageArea, nous pouvons le faire en définissant un arrière-plan comme un dégradé linéaire. La première couleur que je vais sélectionner 859ede. Pour la deuxième valeur, je vais aller pour 6965de. Vérifions que c'est du travail dans. C' est très bien et cela nous donne ce gradient linéaire droit de la nuance plus claire à la nuance plus foncée. Mais je vais juste définir une première valeur facultative de 70 degrés suivie d'une virgule. Cela va compenser nos dégradés être à travers la page à 70 degrés. Ensuite, la border-rayon, qui va s'appliquer à la fois en bas à gauche et aussi en bas à droite sur la vue mobile. Pour cela, nous pouvons appliquer les quatre valeurs et celles-ci vont dans le sens des aiguilles d'une montre à partir du haut à gauche. haut à gauche de zéro, en haut à droite de zéro et puis, la fois en bas à droite et aussi en bas à gauche des valeurs de 3rem. Celles-ci sont maintenant entrées en vigueur au bas de notre section. Juste pour voir cela plus clairement, nous pouvons temporairement supprimer notre image. Commentons ceci. Voici à quoi ressemblera le jeu avant que l'utilisateur clique sur le bouton Play. Retour à nos feuilles de style et toujours dans l'ImageArea, nous allons utiliser le type d'affichage de flex, qui va nous permettre de positionner tout ce texte au centre. Tout d'abord, définissons la direction de flexion pour être colonne. Tout notre contenu est empilé verticalement, puis nous pouvons utiliser le contenu justifié, les espaces dans le centre. Puisque c'est notre axe principal de haut en bas, justifier le contenu enverra à ce verticalement, nous voyons que nous avons un peu d'espace inégal sur le haut et le bas. Cela est dû à certaines valeurs par défaut du navigateur sur l'en-tête de niveau 1. Nous allons jeter un oeil à la solution très bientôt. Juste pour terminer cette zone d'image, ajoutons un peu de rembourrage tout autour avec la valeur de 3rems. Cet espace inégal en haut et en bas est dû à cette rubrique juste ici à l'intérieur de notre page d'index. Si nous allons à cette section juste ici, c'est à l'intérieur de la rubrique de niveau 1. Allons dans les outils de développement et nous pouvons voir cela plus en détail. Cliquez sur la flèche juste ici, puis si nous survolons notre titre de niveau 1, nous pouvons voir par la section orange que nous avons une marge par défaut qui est appliquée à la fois en haut et en bas de notre titre. Maintenant, la marge tout en bas de cette rubrique est bien parce que cela fournit un peu d'espacement à nos textures ci-dessous. Cependant, pour garder les choses plus centrales dans notre conteneur, nous allons supprimer la marge par défaut du haut. Passons à nos feuilles de style et nous pouvons maintenant supprimer les paramètres par défaut du navigateur. Tout d'abord, notre rubrique de niveau 1. Nous pouvons le faire en réinitialisant la marge sur le top 0, et donnons également à cela une nouvelle taille de police de 2.4rems. On peut encore voir qu'il y a plus d'espacement sur le haut que sur le bas. Eh bien, si nous revenons à notre page d'index, c'est parce que toujours dans cette zone d'image, nous avons un titre de niveau 3 avec l'ID du message. Ceci sera utilisé plus tard pour appliquer un message à l'utilisateur une fois le jeu terminé. Mais pour l'instant, cela prend encore de la place à l'intérieur du dôme. On peut faire exactement la même chose. Nous pouvons supprimer la marge par défaut du navigateur en haut, réinitialiser cela, et juste pour plus tard, nous pouvons également définir la taille de la police pour être une valeur de 2rems. Cela laisse maintenant notre espace plus cohérent. Cette section est assez complète, nous pouvons maintenant passer à ces sections transversales. Nous avons déjà ciblé le titre de niveau 3. Allons monter. Le score est également à l'intérieur du titre de niveau 3 que vous venez de prendre en charge. Passons maintenant à nos éléments P avec la classe d'articles. Cela va permettre à l'utilisateur de connaître le nombre à comparer. Tout ce que nous allons faire est de faire ressortir cela un peu plus, en définissant la taille de la police à 2rems. La classe des objets et nous y allons. descendant, nous avons aussi ces deux boutons ici, et aussi le bouton en bas aussi. Tout d'abord, nous allons cibler notre sélecteur de bouton, et nous pouvons ajouter quelques styles de base, commençant par la largeur du bouton et une valeur de 8rems. Nous pouvons supprimer toutes les bordures par défaut qui avaient été appliquées par le navigateur. Mais nous voulons toujours que cela ait des coins arrondis. Nous pouvons le faire avec un rayon de bordure, peu d'espacement pour rendre le bouton un peu plus rembourré à l'intérieur. Donc, une valeur de remplissage de 1 rem. Ensuite, nous devons également faire ces couleurs différentes et également supprimer la couleur de fond. Si nous jetons un oeil au moment où nous avons ce bouton de couleur gris clair un deux font ces boutons juste fondamentalement un contour comme nous le voyons sur la version finale. Nous pouvons le faire en supprimant l'arrière-plan en définissant ceci pour être une couleur de transparence. Pour cette section d'image, cela permettra à la couleur de fond bleu de briller à travers, et aussi la même chose pour la section statistique ovale sur la gauche. Nous pouvons ensuite appliquer cette couleur de bordure ou ce contour, à chacun de nos boutons. A l'intérieur du sélecteur de bouton, nous pouvons supprimer l'arrière-plan en définissant celui-ci pour être transparent. Ensuite, notre frontière. Cela va être de deux pixels de large, une ligne solide, puis la couleur que je vais utiliser sera a1e0e4. Enfin, nous pouvons changer le curseur de la souris pour être un pointeur lorsque nous survolons l'un de ces boutons. Tout ce que nous avons à faire est de définir le curseur pour être un pointeur, et cela changera la souris au fur et à mesure que vous survolez. Juste pour terminer ces boutons, nous allons nous assurer que le bouton croix a la couleur de fond rouge. Tout comme nous le voyons ici, nous avons une couleur différente pour la tique et aussi pour la croix. Une façon de le faire est de cibler le deuxième bouton. notre page d'index, ici, nous avons deux boutons qui sont regroupés côte à côte, et comme ils sont côte à côte, nous pouvons sélectionner soit le premier ou le deuxième enfant. Plus bas, nous avons aussi notre bouton qui se trouve dans la section image juste ici. Puisqu' il s'agit d'une section différente plutôt que côte à côte, le nième enfant n'affectera pas cela. Nous verrons cela plus clair si nous passons à nos feuilles de style, nous pouvons cibler notre bouton et ensuite un deux-points. On peut alors cibler le nième enfant. Ajoutons une valeur de deux puisque nous ciblons le deuxième bouton. Allons de l'avant et changeons la frontière. Nous voulons toujours que ce soit deux pixels et une ligne solide. Mais cette fois, nous voulons utiliser une couleur différente, et je vais opter pour une valeur RVB. Tout d'abord, rouge, une valeur de 241, 152 pour le vert et 152 pour le bleu. Puisque ces boutons sont maintenant côte à côte dans le DOM, cela va cibler le deuxième bouton. Si nous changeons ceci en un, cela ciblera le premier, numéro 3, et cela n'affecte pas notre troisième bouton puisque ce bouton est complètement indépendant et il n'est pas côte à côte avec ces deux ici. Restons ça, nous voulons que ce soit le deuxième bouton. Maintenant, nous allons passer à nos statistiques qui était le wrapper de cette section supérieure. C' est la zone juste ici. Nous allons définir la couleur d'arrière-plan et appliquer également une bordure autour des coins supérieur gauche et supérieur droit, puis centrer tout ce contenu au milieu de cette section. Juste avant d'ajouter un style CSS à cette section, nous voulons découper tout le contenu à l'intérieur des statistiques, et ajouter un deuxième div imbriqué à l'intérieur. Cette div va avoir un ID de contenu de statistiques. Ensuite, nous pouvons coller dans tout le contenu juste à l'intérieur. Maintenant, il y a quelques raisons pour lesquelles nous avons fait ça. Tout d'abord, ce que nous allons faire est de définir cette section stat comme un conteneur flexible. qui signifie que nous pouvons pousser tout ce contenu de statistiques au centre. Deuxièmement, en utilisant JavaScript plus tard, nous allons également masquer ces contenus lorsque le jeu n'est pas en cours d'exécution. Pour revenir à nos feuilles de style, nous pouvons cibler la section stat, puis centrer tout le contenu sous le bouton. Tout d'abord, une couleur de fond, et nous allons aller chercher une valeur de fumée blanche. La bordure, cela va être deux pixels, une couleur unie, et une valeur de 859ede. Cette bordure doit également être arrondie en haut à gauche et en haut à droite. On peut le faire avec le rayon de la frontière. Tout d'abord, la valeur supérieure gauche de trois rems, le haut à droite de trois rems aussi. Ensuite, nous voulons zéro sur le fond. Ensuite, nous pouvons définir le type d'affichage de flex. Cela va maintenant nous permettre de centrer notre nouvelle div au milieu de cette section. Lorsque vous utilisez la flexbox, la direction flex par défaut sera la ligne qui se trouve à travers la page, et nous pouvons centrer sur cet axe en utilisant justifier contenu et en définissant la valeur sur le centre. À côté de prendre soin de l'alignement sur l'axe transversal ou la section verticale, nous pouvons le faire en définissant les éléments d'alignement. Ensuite, le rembourrage. Trois rems en haut et en bas, et zéro à gauche et à droite. Ensuite, nous pouvons définir la ligne de texte pour être au centre de notre section. Nous avons presque fini pour ce mobile pour le style. La prochaine chose que je vais faire est de retourner à notre page d'index. Si vous vous souvenez, lorsque nous avons défini tout ce contenu, nous avons également ajouté une classe d'espace y. Nous avons ajouté ceci à chacune de nos lignes de texte à l'intérieur de l'écran de statistiques. Nous avons fait cela pour que nous puissions ajouter un peu d'espace sur cet axe y. Nous pouvons le faire en définissant une marge sur le haut et le bas. Espace-y, la marge ajoutera deux valeurs. Le premier est trois rems en haut et en bas, et zéro à gauche et à droite. Bien. C'est maintenant la façon dont nous le voulons. Maintenant, si nous revenons à notre page d'index, nous pouvons commencer à travailler avec cette section d'image. Pour ce faire, nous devons décommenter notre image précédemment, et nous pouvons également commenter notre écran de statistiques. Cela simulera à quoi ressemblera notre jeu une fois que le jeu a commencé. Ciblons l'élément image, donc IMG. Tout d'abord, la largeur de 100 pour cent, et aussi, arrondissons les coins avec le rayon de bordure. Notre jeu semble maintenant comment nous le voulons sur la vue mobile, mais maintenant, lorsque nous étirons le navigateur à un écran plus large, nous voulons basculer autour de nos deux sections comme nous le voyons ici sur la version finale. Pour ce faire, nous allons ajouter une requête multimédia à l'intérieur de notre feuille de style. Au média, tous les écrans, ainsi que la largeur minimale de 600 pixels. Tous ces styles ci-dessus seront des valeurs par défaut et appliquées dès le début, puis toutes ces règles de style à l'intérieur de cette requête multimédia ne s'appliqueront qu' une fois que l'écran atteint 600 pixels et plus. La façon dont nous allons le faire est d'utiliser cette flexbox et changer la direction de flexion de ces deux sections en ligne. Nous pouvons le faire à l'intérieur des éléments parents qui est la zone de jeu. Tout d'abord, nous devons définir le type d'affichage pour être flex, et la direction flex par défaut est la ligne, donc nous n'avons pas besoin d'ajouter cela dans. Ensuite, la zone de l'image, ainsi que les statistiques. Pour ces deux zones juste au-dessus, nous définissons la hauteur minimale à 30 % de la hauteur de la fenêtre. Comme nous avons plus d'espace à l'écran disponible, je vais changer cela pour être 50 pour cent. A l'intérieur de cette zone d'image qui est à droite, nous voulons que cela chevauche la section stat qui est à gauche. Tout comme la version finale ici, nous voyons que la bonne section se chevauche juste un peu. Maintenant, la façon dont nous pouvons le faire est d'utiliser une transformation CSS appelée translate. Traduire va déplacer notre section sur l'axe x ou Y. Jetons un coup d'oeil à la façon dont cela fonctionne dans notre CSS en ciblant d'abord la zone d'image. Tout d'abord, le rayon de frontière de trois rems. Vous pouvez voir des coins arrondis sur les quatre côtés, puis nous pouvons définir la transformation CSS. Nous voyons qu'il y a beaucoup de différents types de transformation que nous pouvons utiliser. Il y a des choses telles que l'échelle pour augmenter ou réduire la taille de nos éléments. Nous pouvons également faire tourner nos éléments. Mais celui qui nous intéresse, c'est traduire. A l'intérieur d'ici, nous pouvons définir Alpha, nous voulons déplacer nos éléments sur l'axe x et l'axe Y. Le premier est l'axe des x qui est à travers la page de gauche à droite, donc 50 pixels. Puis l'axe y qui est de haut en bas, 500 pixels. Ceci est maintenant poussé nos éléments sur 50 pixels et aussi vers le bas de 500 pixels. Nous sommes seulement intéressés à déplacer notre élément vers la gauche, donc nous ne sommes intéressés que par l'axe des x. Utilisons simplement l'une de ces valeurs, et au lieu de cela, nous pouvons utiliser une valeur négative. Ce serait trois rems. Cela tire maintenant notre section d'image vers la gauche de trois rems, donc il chevauche légèrement la section stat. Maintenant, nous allons cibler la section des statistiques. Tout d'abord, nous faisons un peu d'espacement, nous pouvons utiliser la propriété flex et une valeur d'un. Si nous définissons ensuite la valeur à l'intérieur de la zone d'image à deux, notre zone d'image essaiera alors de prendre deux fois l'espace disponible en tant que section stat. Pour cette zone, nous devons également ajuster le rayon de bordereau, donc nous avons juste cela en haut à gauche et en bas à gauche aussi. Le rayon de bordure, trois rems en haut à gauche, zéro, zéro, et trois rems en bas à gauche aussi. La dernière chose que nous allons faire à l'intérieur de cette requête multimédia est de rendre compte de cette traduction. Nous avons parcouru cette section d'image vers la gauche par trois rems. Cela signifie que nous avons maintenant un espacement inégal sur la gauche et aussi sur la droite. Pour compenser cela, nous allons ajouter trois rems de marge sur le côté gauche. Cela devrait prendre soin de notre espacement à l'extérieur du jeu, mais nous devons également nous occuper de l'espacement à l'intérieur de la section stat. Nous pouvons le faire en ajoutant trois rems de rembourrage sur le côté droit. C' est maintenant pour le style de ce projet. Ensuite, nous allons introduire du JavaScript en générant des images aléatoires. 5. Générer des images aléatoires: Une seule image sur notre écran, comme nous le voyons ici ne sera pas bon pour notre projet. Donc, ce que nous allons faire à la place est de sélectionner une image aléatoire à partir d'un tableau, et la façon dont nous allons le faire est avec JavaScript, afin que nous puissions aller dans notre dossier de projet, créer un nouveau fichier, et ce sera le script.js, que nous devons ensuite lier dans notre index. Juste au-dessus de la balise de corps de fermeture, créez le script avec la source, et c'est simplement script.js. Essayons. Ceci est lié à l'intérieur du script avec une alerte simple, et nous allons juste dire, n'importe quel message à l'intérieur ici si haut. Si nous rechargeons le navigateur, nous devrions voir le message, si cela est lié avec succès. Maintenant, on va bouger ça. Maintenant, la prochaine chose que nous devons faire est de créer un tableau qui va inclure le nom de l'image et aussi le nombre d'éléments. Cela doit également correspondre à toutes les images à l'intérieur de ce dossier. Pour gagner un peu de temps, si nous allons sur GitHub et utilisons le même lien que nous avons utilisé précédemment. À l'intérieur du jeu de match de numéros, jetez un oeil pour le fichier appelé array.js. Ensuite, à l'intérieur d'ici, nous devons copier le contenu de ce tableau. Je vais saisir tous ces éléments, en veillant à saisir les crochets en haut et en bas, coller ceci dans nos scripts, et ces noms correspondent tous aux mêmes images qui sont à l'intérieur du dossier. Donc, sachez que si vous avez utilisé vos propres images, vous devrez changer le nom de l'image pour correspondre à chacune d'elles. Vous devrez également modifier le nombre d'articles. Par exemple, nous utilisons bananas.jpg comme six bananes, et ceci est défini sur les lignes ci-dessous. Comme il s'agit d'un tableau, nous pouvons sélectionner chacun de ces objets à l'intérieur ici par le numéro d'index. Le numéro d'index est la position à l'intérieur du tableau, sorte que le premier élément est la position 0. C' est la position 1, position 2, et c'est ainsi que nous allons sélectionner une image à afficher dans notre projet. Donc, tout en bas et juste après notre tableau, nous pouvons sélectionner chacune de ces images au hasard. Nous devons générer un nombre aléatoire. Commençons cela à l'intérieur d'un appel constant numéro aléatoire, et nous pouvons utiliser une fonction de mathématiques JavaScript, l'appeler aléatoire. Donc math.aléatoire. Cela générera un nombre aléatoire entre 0 et un. Zéro est inclus, mais le numéro 1 ne l'est pas. Cela passera à 0.999 par exemple. Nous pouvons enregistrer ceci à l'intérieur de la console pour vérifier notre sortie. Déconnectez-vous notre constante dans notre projet, et nous pouvons recharger, cliquer avec le bouton droit de la souris et inspecter. Chaque fois que nous rechargeons, nous obtenons un nombre aléatoire différent. A l'intérieur de ce tableau, nous avons 20 images séparées. La façon dont nous pouvons vérifier combien d'éléments est à l'intérieur d'un tableau est en sélectionnant le nom du tableau, qui est des images, puis vous dites propriété qui est longueur. Si nous rechargeons cela, nous voyons maintenant que nous avons les 20 éléments à l'intérieur de notre tableau, donc nous pouvons maintenant l'utiliser pour multiplier notre nombre aléatoire. Essayons cela à l'intérieur de la console et actualisons. Cela va maintenant nous donner 20 options différentes. Donc notre numéro commencera soit par un droit 0 à 19. Nous pouvons également exécuter cela si nous découpons cette section, nous pouvons utiliser une fonction JavaScript différente appelée math.floor, et cela va arrondir au nombre entier le plus proche. Essayons ça dans la console. Il nous reste maintenant avec un nombre aléatoire entre 0 et 19, ce qui nous donne 20 options différentes. La façon dont nous pouvons maintenant utiliser ce nombre aléatoire, si nous supprimons le journal de la console est en sélectionnant notre tableau d'images, et nous pouvons sélectionner l'une de ces images par le numéro d'index. Numéro 2 comme nous l'avons mentionné précédemment, il devrait être 0,1, et 2. Cela sélectionnerait les blocs. Mais au lieu de coder en dur cette valeur, nous pouvons taper le nombre aléatoire. Après cela, nous pouvons utiliser la notation de points pour sélectionner soit le nom de l'image, soit le nombre d'éléments. Nous voulons le nom de l'image et nous pouvons également stocker cela à l'intérieur d'une constante appelée nom d'image aléatoire. Essayons de journaliser ceci sur la console. Prenez ceci et collez-le dans, en sélectionnant aléatoirement l'un de nos noms d'image. Donc maintenant, nous savons que cela fonctionne, nous pouvons maintenant l'utiliser pour définir notre source d'image. Tout d'abord, créons un élément d'image, stockons cela à l'intérieur de la constante d'image, et nous pouvons créer un élément avec document.CreateElements. Le type d'élément que nous voulons créer est une image qui est IMG. Ensuite, nous pouvons saisir notre variable d'image et définir les attributs source, et cette source d'image doit pointer vers notre dossier d'images. Donc, nous pouvons définir cela comme une chaîne de modèle avec les ticks arrière. Cela nous permettra d'insérer notre nom d'image aléatoire en tant que variable. Notre dossier d'images, barre oblique. Tout comme précédemment, nous avons utilisé le symbole $ et les accolades pour insérer notre variable. Cela nous laisse maintenant avec un élément image créé, et la prochaine chose que nous devons faire, si nous allons à la page d'index est d'ajouter cela à l'intérieur de notre conteneur d'image. Donc juste au-dessus, créons une constante appelée conteneur d'image, et nous allons sélectionner cela avec document.getElementById, l'ID du conteneur d'image. Maintenant, nous avons cette référence, nous pouvons sélectionner notre conteneur d'image, puis appendChild. Les éléments enfants que nous voulons ajouter est cette image juste au-dessus. Nous devrions maintenant être en mesure de sauvegarder cela et de le voir dans notre projet. Donc, chaque fois que nous chargeons maintenant, nous voyons une image qui s'affiche à l'intérieur du navigateur, et ceci est sélectionné au hasard dans notre tableau. Nous voyons toujours cette image juste au-dessus parce que c'est à remplacer dans notre index.html. Nous pouvons maintenant supprimer cet élément et maintenant si nous actualisons le navigateur, nous voyons juste une seule image aléatoire. C' est une étape importante, mais nous ne voulons pas actualiser le navigateur pour obtenir une nouvelle image à chaque fois. Donc, dans la prochaine vidéo, nous allons jeter un oeil sur la façon dont nous pouvons faire cela avec une minuterie. 6. Travailler avec des minuteurs: Notre projet est maintenant à un stade où il va générer une image aléatoire différente chaque fois que nous rechargeons le navigateur. Bien sûr, ce n'est pas la façon dont nous voulons que notre application fonctionne. Nous voulons appeler une image aléatoire après un certain délai. La façon dont nous allons le faire est en saisissant notre code qui génère l'image aléatoire. Nous allons placer cela à l'intérieur d'une fonction, puis appeler cette fonction après un certain délai. Créons une nouvelle fonction juste au-dessus de cela. Je vais créer cette fonction en utilisant une syntaxe légèrement différente de celle du projet précédent. Nous allons créer ce qu'on appelle une fonction flèche ES6. Une fonction flèche est fondamentalement une syntaxe différente des fonctions régulières que nous avons utilisées précédemment. Il y a aussi quelques différences techniques entre les deux syntaxes de fonction. Bien que nous ne les couvrirons pas dans ce cours, cette fonction va contenir toute la syntaxe juste ici. La façon dont nous écrivons une fonction de flèche ES6, nous allons stocker un nom de fonction appelé generate à l'intérieur d'une constante, puis nous allons définir cela égal à notre fonction. Nous définissons la fonction de flèche juste comme ça, puis les accolades. A l'intérieur de ces parenthèses juste ici, tout comme quand nous avons regardé les fonctions irrégulières dans les projets précédents, nous pouvons également passer des arguments à l'intérieur ici aussi. Par exemple, si nous avions une valeur, nous pourrions la passer comme ça et ensuite accéder à notre valeur à l'intérieur de la fonction. Mais tout ce que nous voulons faire est d'attraper ces lignes de code, puis de les coller dans. Nous avons maintenant cette fonction que nous pouvons maintenant appeler, et nous voulons appeler cette fonction après un certain délai. Faisons ceci juste en dessous, nous pouvons créer une deuxième fonction que je vais appeler une minuterie. La façon dont nous pouvons exécuter du code à l'intérieur d'un JavaScript est de profiter de setInterval. setInterval est une fonction qui prend en deux arguments. Le premier est le code que vous voulez exécuter. Nous avons déjà le code disponible dans cette fonction de génération. Nous pouvons passer générer comme premier argument. Ensuite, le second est un retard dans le temps. Ce délai est en millisecondes, une seconde sera égale à 1 000, deux secondes seront 2 000, et ainsi de suite. La façon dont nous pouvons appeler cette fonction est en utilisant le bouton Play. Si nous revenons à notre page d'index, nous avons le bouton Lecture à l'intérieur de cette section commentée. Réinstaure ça. Ensuite, nous pouvons appeler ça à partir de notre bouton Play. Nous allons le faire en un clic, alors définissons le clic sur égal à notre minuterie. Au-dessus du navigateur, rechargeons ceci et cliquez sur le bouton « Play ». Après notre délai de deux secondes, nous voyons une nouvelle image a été générée au hasard et placée à la fin de notre div. Juste pour récapituler, lorsque nous cliquons sur « Play », nous appelons notre fonction de minuterie. Cette fonction de minuterie fonctionnera toutes les deux secondes, puis appellera notre fonction de génération qui génère une nouvelle image aléatoire. Comme nous venons de le voir, ce n'est pas idéal parce que nous voulons remplacer l'image existante plutôt que l'ajouter à la fin de notre conteneur d'image. Une des façons que nous pouvons corriger cela est d'ajouter une instruction if et de vérifier si une image existe déjà avant d'aller de l'avant et d'en ajouter une nouvelle. Juste avant d'ajouter cette image, nous pouvons créer une déclaration if, cela va vérifier si notre conteneur d'image. Rappelez-vous, ce conteneur d'image était le wrapper juste ici qui va contenir toutes nos images à l'intérieur. Si notre conteneur d'image et alors nous pouvons dire .hasChildNodes. C' est une méthode qui va vérifier si notre conteneur d'image contient des éléments enfants. Actuellement, ce n'est pas parce que c'est vide, il n'y a rien entre notre div. Mais s'il y a une image là en place, nous allons exécuter du code qui supprimera cela. Tout d'abord, nous allons sélectionner notre conteneur d'image, puis nous pouvons appeler une méthode appelée removeChild. La façon dont nous pouvons sélectionner l'élément enfant que nous voulons supprimer est en utilisant une méthode appelée firsTelementChild. Nous appelons cela sur notre conteneur, donc notre ImageContainer, puis sélectionnez le FirsTelementChild. Nous avons vu ici que si notre ImageContainer a quelque chose imbriqué à l'intérieur, nous allons ensuite supprimer ceci, et l'élément que nous voulons supprimer est le tout premier élément à l'intérieur. Le premier élément sera toujours notre image puisqu'il n'y a rien d'autre à l'intérieur de notre div. Sauvegardons cela et essayons cela, cliquez sur « Jouer ». Maintenant, nous ne voyons qu'une image à la fois. La prochaine question que nous devons traiter, si vous remarquez lorsque nous cliquons sur « Play », il y a un délai avant que notre première image apparaisse. Ce délai est les deux secondes que nous avons réglées ici. Cela causera comme un petit problème parce que nous voulons démarrer le jeu dès que l'utilisateur a cliqué sur « Play ». La façon de résoudre ce problème est d'appeler notre fonction de génération dès que le jeu commence, puis dès que cela est en cours d'exécution, nous pouvons alors compter sur notre minuteur pour continuer avec le reste des images. Créons une nouvelle constante juste en dessous de laquelle va gérer cela. Cela va être une fonction appelée play. Encore une fois, nous allons configurer notre fonction flèche. Nous allons alors appeler cette fonction de jeu dès que le jeu commence. Plutôt que notre minuteur, nous allons changer ça pour jouer. Dès que le jeu commence, nous allons appeler notre fonction de génération. Cela sera appelé une fois, nous appellerons ensuite notre fonction minuterie. Essayons ça. Dès que nous cliquons sur « Play » dans le navigateur, nous devrions voir notre première image que nous faisons. Ensuite, après notre retard de temps, le reste des images commence à générer. La prochaine chose à prendre en charge est de mettre fin à notre jeu. Si nous réduisons notre minuterie à un nombre vraiment petit, disons 300 millisecondes, puis cliquez sur « Jouer », cela va ensuite parcourir toutes nos 20 images mais il va continuer et ne sait pas quand arrêter. Nous voyons ici que nous avons passé plus de 20 images mais le jeu continue à fonctionner. L' une des façons de résoudre ce problème est de réduire le nombre d' images ou de supprimer une image après qu'une image a été générée. Actuellement, nous générons un nombre aléatoire. Ce qui signifie que notre nombre aléatoire peut générer 20 images différentes une fois que cette fonction a fonctionné. Si nous supprimerions alors une image de notre tableau, cela nous laissera alors avec 19 options, et 18, et 17, et ainsi de suite. La façon dont nous pouvons supprimer une image est de sélectionner notre tableau d'images. Nous pouvons utiliser une méthode d'épissure JavaScript qui va supprimer une valeur de notre tableau. Splice va prendre deux valeurs distinctes. La première que vous transmettez sera l'image que nous voulons supprimer. Si nous voulons supprimer la première image, ce serait la position 0, position 1, et ainsi de suite. Nous savons déjà quelle image nous traitons actuellement parce que nous avons ceci stocké à l'intérieur du nombre aléatoire. Passons ça. Ensuite, la deuxième valeur est le nombre d'éléments que vous souhaitez supprimer. Nous n'allons supprimer qu'une seule valeur. Laissons ça comme un seul. Juste pour récapituler, nous sélectionnons au hasard l'une de nos images dans le tableau. Nous poussons ensuite ceci au DOM et l'affichons à l'intérieur de notre projet, puis finalement, nous allons supprimer cette image de notre tableau afin qu'elle puisse être sélectionnée plus d'une fois. Cela signifie maintenant que si nous retournons au navigateur et commençons notre jeu, nous ne devrions maintenant voir que 20 images apparaissent dans le navigateur. Essayons ça. On y va. Le jeu s'arrête maintenant parce que nous n'avons plus d'images à parcourir. Cela signifie maintenant que notre tableau d'images est maintenant réduit à zéro, et nous avons maintenant un moyen de mettre fin à la partie. Mais une chose que nous devons faire est d'arrêter notre temps à deux heures. Pour le moment, ce temps d'intervalle défini n'a aucun moyen de savoir quand il devrait s'arrêter. Par conséquent, nous devons indiquer à un intervalle défini d'arrêter manuellement afin qu'il ne continue pas à utiliser les ressources du navigateur. On avait mis un intervalle à l'intérieur ici. La façon d'arrêter cela est d'appeler un intervalle clair. Je vais également stocker cela à l'intérieur d'une fonction appelée StOptimer. Tout ce que cette fonction va faire est d'appeler notre fonction d'intervalle clair. Ensuite, il passe dans une référence à notre minuterie à l'intérieur de l'intervalle clair. Nous pouvons le faire en le passant intervalle défini à une variable. Appelons cette variable TimerRef. Ensuite, nous pouvons définir TimerRef pour être égal à notre intervalle défini. Maintenant, nous aurons cette référence. Nous pouvons maintenant passer cela à l'intervalle de dégagement afin qu'il sache à quel moment nous devons éclaircir. La raison pour laquelle nous avons déclaré cette variable en dehors d'une fonction plutôt qu' à l'intérieur est parce que nous pouvons alors accéder à cette variable dans n'importe quelle des fonctions. Si nous avons déclaré notre variable à l'intérieur de cette fonction, nous ne pourrions y accéder qu'à l'intérieur de cette minuterie qui provoquera alors une erreur lorsque nous essayons de la référencer dans notre intervalle clair. Ramenons ça à l'extérieur. Maintenant, nous devons appeler notre fonction StOptimer à la fin de notre jeu. Notre jeu est terminé une fois que nous n'avons plus d'images dans le tableau, parce que nous les supprimons à chaque génération. À l'intérieur de notre fonction de génération, nous pouvons vérifier si la longueur de nos images est égale à zéro. Nous pouvons alors appeler notre fonction StOptimer, et aussi utiliser le mot clé de retour, ce qui signifie que cela va alors éclater dans notre fonction et le code ci-dessous ne fonctionnera plus. Sauvegardons cela et testez cela dans le navigateur, nous pouvons cliquer sur « Play », et devrait maintenant parcourir 20 de nos images, puis arrêter la minuterie. Bien. Avec cela maintenant en place, nous passons à la prochaine vidéo où nous nous occuperons de générer un numéro à afficher à l'utilisateur. 7. Générer un nombre à comparer: Nous allons maintenant créer notre nombre aléatoire qui va s'afficher au joueur, afin qu'ils puissent comparer le nombre d'éléments à l'intérieur de l'image. Ce chiffre va être l'une des trois choses. Ce sera si la quantité correcte d'éléments qui est affiché dans l'image est un plus haut ou un plus bas, ce qui est donc le jeu est un peu plus difficile, et nous allons le faire dans notre fonction de génération. Pour le moment, notre fonction de génération commence à être assez bondée. Nous pouvons externaliser tout le code qui est responsable de la mise en place de notre image. C' est saisir notre conteneur d'images jusqu'à AppendChild. Éliminons cela, en laissant dans notre épissure. Je vais remplacer cela par une fonction. La fonction que je vais donner à cela un nom de setImagesRC, puis créer ceci juste au-dessus du dessus. Ici, nous pouvons coller dans le contenu d'une citation de notre fonction de génération, mais pour que cette fonction fonctionne, nous devons également recevoir le nom de l'image aléatoire. Revenons à notre fonction de génération, nous avons notre nom d'image aléatoire ici. Nous pouvons copier ceci comme ceci dans notre fonction et puis si nous recevons cela comme un argument, ceci est maintenant disponible à l'intérieur de cette fonction à utiliser. Avant d'aller plus loin, sauvegardons notre code et essayons cela dans le navigateur, et tout fonctionne toujours comme prévu. Nous pouvons maintenant passer à la génération de ce nombre aléatoire. Passons à notre fonction de génération. Juste en dessous où nous définissons la source de l'image, nous pouvons également créer une nouvelle fonction qui va être responsable de la création de ce nombre. Appelons cela générer plus ou moins. Tout ce que cette fonction va faire est de retourner une valeur positive ou négative. Nous pouvons ensuite utiliser ce nombre pour l'ajouter à un nombre réel pour le rendre plus difficile. Créons ceci juste au-dessus à l'intérieur d'une fonction, donc générer plus ou moins. Cela a juste besoin d'un égal juste après ici. Pour que cette fonction renvoie une valeur positive ou négative, nous devons générer deux options aléatoires. La façon dont nous pouvons le faire comme nous l'avons regardé plus tôt est d'utiliser math.random. Pour nous donner deux options distinctes ou deux valeurs, nous pouvons le multiplier par deux, puis l'envelopper à l'intérieur de math.floor. Rappelez-vous que math.floor va descendre notre nombre aléatoire. Cela retournera une valeur de zéro ou un. On a vu ça à l'intérieur d'une constante que je vais appeler le numéro zéro à un. Nous voulons maintenant retourner une valeur de cette fonction. Comme nous venons de le mentionner, le nombre zéro à un sera soit un zéro, soit un. La façon dont nous pouvons le convertir en positif ou négatif est de faire usage de l'opérateur ternaire JavaScript. Nous pouvons sélectionner notre constante de nombres zéro à un, et nous pouvons dire que si cela est égal à zéro, nous voulons maintenant fournir une option. L' opérateur ternaire JavaScript nous permettra de fournir deux options que la valeur soit vraie ou fausse. Cela fonctionne comme une déclaration if else. Si cette expression est vraie, donc si elle est égale à zéro après le point d'interrogation, nous allons retourner une valeur négative. Nous ajoutons ensuite un deux-points et fournissons l'option si cela va être faux. Si c'est faux, nous ajouterons plus un, et retournerons cela à partir de notre fonction. Puisque cela est généré de manière aléatoire, nous aurons une chance 50/50, mais cette fonction retournera soit négatif, soit positif. Nous pouvons maintenant faire défiler vers le bas et stocker cette valeur de retour à l'intérieur d'une constante. Disons plus ou moins et définissons ceci à la valeur de retour. Maintenant, nous avons ce nombre positif ou négatif. Nous devons également saisir la valeur réelle des éléments que chaque image contient. La façon dont nous pouvons le faire si nous faisons défiler vers le haut, est de sélectionner la propriété appelée nombre d'éléments. Nous faisons quelque chose de très similaire dans cette fonction où nous saisissons le nom de l'image aléatoire. Jetons un coup d'oeil à ça. Juste ici, nous saisissons le nom de notre image à partir d'une image aléatoire. Copions cette ligne ici, collez-la et plutôt que de saisir notre nom d'image aléatoire, nous pouvons maintenant saisir le nombre d'éléments, et aussi changer ce nom constant pour refléter cela, donc le nombre d'éléments. Cela nous laisse maintenant avec toutes les informations dont nous avons besoin pour générer notre numéro d'affichage comme nous le voyons ici. Nous avons une valeur négative ou positive, et nous avons aussi le numéro deux correct. Nous allons maintenant utiliser ces deux valeurs pour passer à notre fonction qui va générer ce numéro d' affichage, afficher notre fonction, où nous allons passer dans nos deux constantes ou nos deux valeurs d' haut est plus ou moins et le nombre d'éléments. Faites défiler vers le haut et créez notre fonction appelée générer un numéro d'affichage. Cette fois, nous recevons en deux valeurs et la première est le nombre d' éléments et la seconde est plus ou moins. À l'intérieur de notre fonction, nous voulons faire l'une des deux choses. Nous voulons soit afficher le nombre réel, soit nous voulons afficher un nombre qui est soit un plus haut ou un plus bas. Pour choisir l'une de ces options que cette fonction va prendre, nous devons générer un nombre aléatoire. Tout comme ci-dessous, nous allons générer deux nombres aléatoires donc entre zéro ou un. A l'intérieur d'une constante, je vais appeler ce scission. Ce nombre aléatoire nous permettra maintenant de créer une instruction if pour vérifier s'il s'agit de zéro ou d'un. Nous dirons que si la scission est égale à zéro, cela va afficher notre nombre réel. La façon dont nous pouvons le faire à l'intérieur de notre page d'index est de trouver nos éléments, quelle que soit la valeur stockée à l'intérieur. Nous voyons cette valeur juste ici afin que nous puissions supprimer cela, et ensuite nous pouvons cibler notre élément avec l'id du nombre. Nous le faisons avec document.getelementbyid. Je vais sélectionner il y avait nombre, puis définir le innerHTML et définir ceci à notre nombre d'éléments qui est passé à notre fonction juste au-dessus. C' est notre numéro correct donc maintenant nous pouvons créer un faux nombre. On peut dire autre. Ce sera si la scission est égale à un. Tout comme ci-dessus, nous allons également définir le document.getelementbyid, sélectionner notre nombre et ceci est égal à notre nombre réel qui est le nombre d'éléments. Ensuite, nous voulons ajouter un positif ou un négatif à cela, qui est stocké dans une valeur appelée plus ou moins. Essayons cela dans le navigateur. Si je dois être plus clair, si nous venons de ralentir ce jeu, donc trois secondes et recharger, nous voyons la valeur d'un. On semble avoir un problème quelque part, alors revenons à notre fonction. Nous avons un nombre aléatoire entre zéro et un. Si c'est zéro, nous définirons la valeur du nombre comme étant notre nombre d'articles. Si ce n'est pas le cas, nous définirons ce nombre d'éléments, positifs ou négatifs. Ça semble être correct, alors descendons pour générer, afficher le numéro. Je pense qu'on a juste besoin de passer ça dans le bon ordre. Essayons ça maintenant. Cliquez sur jouer. Il y a six personnes à l'intérieur d'ici et on a la valeur de sept, c'est une plus grande. C' est le nombre correct de huit. C' est un plus haut. On a juste besoin d'attendre un plus bas, sept, qui est celui-là. Maintenant, nous voyons le nombre correct d'éléments. Nous voyons une valeur plus élevée et aussi une valeur inférieure. Cela fonctionne maintenant, nous allons maintenant passer à la vidéo suivante et nous allons remplacer le nom de l'image. 8. Régler le nom de l'image: Lorsque l'utilisateur joue sur le jeu, nous avons maintenant géré un chemin de cette section d'affichage. Nous avons maintenant lié l'image au nombre d'éléments. La prochaine chose que je veux faire est d'afficher également le nom de l'image, donc par exemple, dire huit oeufs, et ce qui change pour chaque image. Si nous revenons à notre code dans le script.js, à l'intérieur de notre fonction de génération, nous avons déjà accès à notre nom d'image aléatoire, et nous stockons à l'intérieur de cette constante. Ici, il est dit, recadrer dans notre tableau d'images, comme dans notre nombre aléatoire, puis sélectionnez la nouvelle propriété de nom d'image comme nous pouvons le voir juste ici. Ce que je vais faire maintenant, nous pourrions, s'il utilise un nom d'image aléatoire pour ajouter la fonctionnalité à cette fonction de génération, mais au lieu de garder les choses plus séparées, je vais créer une nouvelle fonction. Ajoutons ceci dans notre fonction de génération et appelons celui-ci un nom d'image. Cette fonction va prendre dans notre nom d'image aléatoire, alors attrapons ceci et collez-le dans et nous pouvons l'utiliser en dehors de notre fonction de génération. Disons des colonnes. Le nom de la fonction des ensembles, le nom de l'image et ceci prend dans notre variable de nom d'image aléatoire. Il s'agit d'une fonction de flèche. Avant d'écrire notre code dans cette fonction, faisons un journal de console et vérifions que nous recevons le nom de l'image aléatoire. Ouvrez la console, et nous « Cliquez sur jouer » pour voir les oeufs point jpg, parce que point jpg. Ce que nous voulons maintenant faire est de prendre ce nom et de l'afficher dans notre interface utilisateur. Avant de faire cela, cependant, nous devons couper l'extension jpg point de la fin de cette image. La façon dont nous pouvons le faire est d'utiliser une méthode JavaScript appelée Slice. Slice va prendre une chaîne de texte et nous avons déjà un nom d'image aléatoire pour notre chaîne, puis nous appellerons cette méthode de tranche, et cela retournera une nouvelle chaîne avec une certaine partie supprimée. Supprimons donc notre journal de console. Nous pouvons accéder à notre nom d'image aléatoire appelé la méthode Slice. Slice va prendre deux valeurs, qui va être le début l'imposition des caractères que vous voulez supprimer. Si nous avions oeufs dot jpg, nous voulons supprimer le mot qui est oeufs, donc nous allons commencer au tout premier caractère, qui est la position de zéro, puis la deuxième valeur, qui est facultative. Si nous devions laisser ça dehors, cela irait jusqu'à la fin de notre chaîne, mais au lieu de cela, nous voulons revenir en arrière à quatre endroits. La façon dont nous pouvons le faire est d'obtenir toute la longueur de notre chaîne et ensuite revenir à quatre endroits. Tout d'abord, nous pouvons obtenir toute la longueur de la chaîne en utilisant le nom de l'image aléatoire, longueur de point. Actuellement, cela va du début de la lettre E jusqu'à la fin de notre chaîne, qui est la lettre G. Nous voulons revenir en arrière quatre endroits, donc nous allons utiliser quatre points négatifs. Nous pouvons vérifier que c'est du travail dans une liste de spectateurs à l'intérieur d'une constante. Appelons cela le nom de l'image, donc ceci est égal à la nouvelle valeur qui est renvoyée par notre méthode d'épissure, et ensuite nous pouvons faire un journal de console avec notre nouveau nom d'image. Revenez sur la console et inspectez. Cliquez sur jouer. Nous voyons maintenant point jpg a été supprimé de chacun de nos noms. C' est bon et c'est tout ce qui fonctionne maintenant. La prochaine chose que nous devons faire est d'obtenir l'interface utilisateur à l'intérieur de notre index. Allons à notre espace réservé et supprimons ceci. Ensuite, nous pouvons cibler la plage avec l'ID du nom de l'élément, donc document.getElementById. L' ID qui était le nom de l'élément, puis nous pouvons dire au HTML interne, qui est égal à notre variable de nom d'image. Juste après cela, je vais aussi ajouter à la fin d'une chaîne, qui est un point d'interrogation. Faites simplement savoir à l'utilisateur qu'il s'agit d'une question, donc cela dira sept canards, puis un point d'interrogation, afin que l'utilisateur sache qu'il s'agit d'une réponse à une question. Essayons cela à l'intérieur du navigateur. Cliquez sur jouer, voir deux voitures, c'est bien, bananes, canards. Tout fonctionne maintenant bien. Avec cela maintenant pris en charge, passons maintenant à la vidéo suivante, où nous allons gérer les devis de l'utilisateur. 9. Vérifier une correspondance: La prochaine étape à l'intérieur de notre jeu est de gérer la fonctionnalité si l'utilisateur clique sur la tique ou la croix. Nous allons fournir deux fonctions qui va vérifier si la supposition de l'utilisateur est correcte ou incorrecte et mettre à jour le score. Pour ce faire à l'intérieur de notre index.html, nous devons ajouter un gestionnaire de clics à nos boutons. Ce sont nos deux boutons à l'intérieur de la zone de match. Pour le bouton correct, nous allons configurer une fonction qui est déclenchée avec un gestionnaire d'événements onclick appelé match. Ensuite, juste en dessous de cela, nous ferons aussi la même chose, mais cette fois la fonction va s'appeler NoMatch, et nous allons gérer ce qu'il faut faire si l'utilisateur pense que son choix est incorrect. Je vais à notre transcription, enregistrer ce fichier, et avant de travailler avec l'ajout de ces deux fonctions, je vais créer des variables tout en haut. Nous devons stocker à la fois le nombre correct d'éléments dans l'image et aussi le nombre qui est affiché. C' est pourquoi nous allons comparer ces deux valeurs pour voir si le choix de l'utilisateur était correct. La première variable va s'appeler CurrentMageValue. Nous pouvons définir ceci pour être égal à une valeur initiale de zéro, puis les mettre à jour une fois qu'une nouvelle image a été générée. Séparé par une virgule, nous pouvons créer une deuxième variable appelée DisplayNumber, et encore une fois, initialiser ceci comme une valeur de zéro. Juste comme une note de côté rapide ici, nous n'utilisons pas le mot-clé let dans les deux occurrences ici parce que nous les avons séparés par une virgule, donc c'est bien de le faire de cette façon. Ajoutez une nouvelle virgule juste après notre numéro d'affichage, et nous définissons une variable pour définir le score actuel qui va être initialisé comme zéro. Maintenant, nous avons ces valeurs, nous avons réellement besoin de les mettre à jour avec les nombres corrects. Commençons par notre valeur d'image actuelle. La façon dont nous pouvons saisir cela si nous descendons à notre fonction, qui est de générer le numéro d'affichage, à l'intérieur d'ici, nous avons la variable appelée nombreOfItems. Par conséquent, nous pouvons saisir ce nombre et définir notre valeur d'image actuelle. Faisons cela au bas de notre fonction. Nous pouvons définir notre valeur d'image actuelle pour être égale à notre nombre d'éléments. Maintenant, nous avons notre valeur actuelle de l'image, qui est le nombre correct d'éléments dans l'image, mais maintenant nous devons également mettre à jour notre numéro d'affichage, qui est le même numéro que celui que l'utilisateur voit dans le jeu. Rappelez-vous, c'est soit le nombre correct, que nous définissons à l'intérieur de la section if, soit une valeur fausse qui est supérieure ou inférieure, et nous allons définir cela dans la section else. Tout d'abord, à l'intérieur de la section si qui était le bon numéro. Avec cela, notre numéro d'affichage est égal au nombre d'articles. Tout comme ci-dessus où nous définissons cela à l'interface utilisateur. Juste en dessous de cela à l'intérieur de la section else, nous affichons le nombre d'éléments, qui est soit un plus haut ou un plus bas. Dans cette section, nous pouvons également définir notre numéro d'affichage pour être exactement le même qui est le nombre d'éléments, puis soit un plus haut ou un plus bas. Juste avant de créer nos fonctions qui sont liées à nos boutons, vérifions que nos variables fonctionnent actuellement. À l'intérieur de la fonction de génération, nous pouvons faire deux journaux de console. Le premier est la valeur de l'image actuelle, qui est le nombre correct d'éléments, puis le second est le numéro d'affichage, qui est le nombre auquel l'utilisateur comparera. À l'intérieur de la console, cliquez avec le bouton droit sur « Inspecter », puis cliquez sur « Play ». Pour commencer, nous voyons la valeur de zéro, zéro puisque nous n'avons pas encore généré une image, donc avoir une correspondance correcte, une correspondance correcte, neuf et 10 est incorrect, incorrect, incorrect, et ainsi de suite. Maintenant, nous avons ces deux valeurs à comparer. Nous allons créer nos deux fonctions pour vérifier si l'utilisateur est correct ou incorrect. Supprimons cela, et nous pouvons créer nos deux fonctions. Le premier bouton déclenche une fonction appelée match. La fonction de correspondance va être chargée de vérifier si la valeur de l'image actuelle est égale à notre numéro d'affichage. Si c'est le cas, l'utilisateur est correct et nous mettrons à jour notre score. Nous pouvons mettre à jour le score en utilisant un opérateur ternaire JavaScript afin que nous puissions vérifier si la valeur de l'image actuelle est égale au numéro d'affichage. Après le point d'interrogation, cela signifie que la section est vraie. Nous voulons mettre à jour le score avec score plus plus. Sinon, nous ajoutons un deux-points et la deuxième condition. Nous voulons déduire le score de la valeur d'un. Si l'utilisateur a obtenu ceci correct, le score augmentera. Si ce n'est pas le cas, le score diminuera de un, deux. Ensuite, nous pouvons également mettre à jour le DOM avec document.getElementById, et c'est la section juste ici que nous voulons mettre à jour. Passons à notre index.html, nous pouvons mettre à jour cette plage avec l'ID du score actuel, alors saisissons ceci. Nous pouvons également supprimer la valeur par défaut à cette fin, puis nous pouvons définir l'innerHTML pour être égal à notre variable de score. Ensuite, nous avons le deuxième bouton qui a le nom de la fonction appelée NoMatch. Cela va être assez similaire, alors copions ceci, collez ceci juste en dessous. Cela va s'appeler NoMatch, et nous voulons à peu près faire l'inverse de ce que nous avons fait ici. Nous voulons vérifier si l'utilisateur croit que la valeur de l'image actuelle n'est pas égale au nombre affiché. Nous pouvons le faire plutôt que le triple égal. Nous allons utiliser le point d'exclamation, et cela vérifiera si la valeur de l'image actuelle n'est pas égale à notre numéro d'affichage. Si cela est correct, cela signifie que l'utilisateur a obtenu ces droits et il mettra à jour le score. S' ils se trompent, il déduira un point, puis mettra à jour le DOM. Essayons ça. Nous pouvons cliquer sur « Jouer ». En fait, nous allons juste mettre à jour notre minuterie pour nous donner un peu plus de temps, afin qu'ils puissent jouer cinq secondes. Il y a six documents, alors cliquez sur la coche. C' est correct, et nous obtenons un score. Douze crayons, celui-là va bien. Il y a sept gâteaux, mais si vous cliquez sur le x, nous devrions voir qu'un score a été déduit. Bien. Maintenant c'est notre travail et nous pouvons mettre à jour le score. Dans la vidéo suivante, nous allons revenir à la partition et l'afficher à l'utilisateur à la fin de la partie. 10. Gérer la fin de partie: Salut, bienvenue. Nous allons maintenant gérer exactement ce que l'utilisateur voit quand le jeu est terminé. Actuellement, lorsque nous parcourons toutes nos images et que nous arrivons à la toute dernière, nous arrêtons actuellement notre minuterie et aussi, nous ne générons plus d'images. Pendant le jeu a commencé et l'état terminé du jeu, nous avons également besoin de montrer et de cacher divers éléments sur l'écran, et aussi à la toute fin, nous devons afficher un message à l'utilisateur avec leur score total. Tout d'abord, nous allons travailler à l'intérieur de cette fonction de jeu et nous allons commencer par cacher quelques éléments que nous ne voulons pas voir quand le jeu est en cours d'exécution. Par exemple, si nous cliquons sur « Jouer », nous ne voulons pas voir toute cette section d'accueil. Nous n'avons pas besoin de voir le bouton Lecture. Nous avons juste besoin de voir la zone de statistiques et aussi l'image. C' est parce qu'à l'intérieur de notre index.html, nous avons cette zone d'image, et une fois que le jeu est en jeu, nous voulons seulement afficher ce conteneur d'image. On va cacher notre zone de message. On va cacher notre écran de démarrage. Nous allons également cacher le bouton Play, puisque le jeu est déjà en jeu. On va sortir de tout ça dans notre fonction de jeu. Cette fonction est appelée dès le début de notre jeu, donc c'est un bon endroit pour cacher tout notre contenu. Tout d'abord, nous allons sélectionner la zone de message avec getElementByID. Je vais utiliser JavaScript pour définir le style et définir la propriété display pour être égale à none. C' est exactement la même chose que d'ajouter le type d'affichage dans nos feuilles de style, mais cela est ajouté dynamiquement avec JavaScript. Nous allons également copier ceci et coller ceci dans deux fois de plus. Nous pouvons utiliser ce second à l'intérieur de notre page d'index pour saisir notre section d'écran de démarrage qui contient tout le texte. Numéro 2 est l'écran de démarrage. Ensuite, enfin, nous devons également supprimer le bouton Play une fois que le jeu a commencé. Il s'agit de l'ID du bouton Play. On dirait que tout ça fonctionne. Une fois que nous cliquons sur « Jouer », nous ne voyons plus tout notre texte en haut. Nous ne voyons plus l'écran de démarrage. Nous ne voyons plus le bouton Lecture. Nous avons également masqué la zone de message pour plus tard aussi. Ceci est de gérer la condition lorsque le jeu est démarré, et nous devons également gérer ce qui se passe quand c'est la fin de la partie. Avec cela, nous allons également créer une fonction personnalisée que nous appellerons à la toute fin. Donc constante, et cette fonction va être appelée EndOfGame, et cette section veut également montrer et cacher certaines zones. Une fois que nous avons atteint la fin de la partie, nous voulons nous assurer que notre message a été affiché car nous allons ajouter un message à l'utilisateur avec son score. Copions ceci et collez dans la section du message. Pour rendre cela visible à l'écran, nous allons changer le type d'affichage pour être bloqué. Le deuxième que nous allons modifier sera notre conteneur d'images. C' est parce qu'une fois le jeu terminé, nous voulons supprimer la dernière image de notre écran et nous pouvons le faire en gardant ce type d'affichage pour être égal à zéro. Une fois que nous avons supprimé cette image, nous voulons ensuite remplir notre message avec le score des utilisateurs. Si nous allons jusqu'au sommet où nous avons créé nos variables, nous avons le score utilisateur à l'intérieur de cette variable. Nous devons également créer une deuxième variable, qui est le total des points disponibles. Cela sera égal au nombre d'images à l'intérieur de notre tableau. Nous pouvons créer une variable juste en dessous, séparer par une virgule. Je veux appeler ceci le TotalAvailable. Définissez cette valeur égale à la longueur de nos images avec images.length. Nous pouvons maintenant utiliser ces deux variables pour afficher un message à l'utilisateur à la fin de notre jeu. Revenons à notre fonction EndOfGame, saisissons notre zone de message avec document.getElementById, l'ID du message. Ensuite, nous pouvons définir le message avec un innerHTML et nous allons définir cela égal à une chaîne de modèle. Nous sommes à l'arrière [inaudible] donc nous pouvons inclure nos deux variables. Le message que je vais afficher sera  : « Game over, ton score était. » Nous pouvons ensuite utiliser le symbole $ et les accolades pour produire notre variable/, puis nous utilisons notre variable disponible totale, que nous venons de créer ci-dessus. Ceci va afficher notre message à l'utilisateur. Réduisons notre minuterie. Allons pendant 300 millisecondes et vérifions que tout fonctionne. Cliquez sur « Jouer ». Le score n'a pas vraiment d'importance. Nous arrivons à la fin de la partie et rien ne se passe. C' est parce que nous avons créé notre fonction de fin de gain, mais nous ne l'avons pas encore appelée. L' endroit où nous voulons appeler cette fonction est de regarder à l'intérieur de notre fonction Générer. C' est le même emplacement à l'intérieur de l'instruction if, où nous vérifions si nos images.length est égal à 0, puis nous nous arrêtons dans notre minuterie. A l'intérieur, il y a aussi le même endroit que nous appelons notre fonction EndOfGame. Ajoutons ceci, puis revenons à travers nos images. Notre fonction EndOfGame a maintenant été appelée. Nous avons supprimé le conteneur d'image, puis défini le message à l'utilisateur avec le score total. Donc, c'est bien. Tout cela fonctionne, mais que voulons-nous faire maintenant ? Eh bien, nous avons quelques options. Nous pouvons ajouter notre bouton Play à l'écran, ce qui nous ramènera au début du jeu. Ou nous pouvons simplement faire quelque chose comme définir ce message trois secondes, puis recharger le navigateur. Ramenez l'utilisateur à l'écran de démarrage. La façon dont nous pouvons le faire est d'utiliser un délai d'attente. Ici, nous avons utilisé le setInterval, qui va appeler une fonction après un certain délai de temps. SetInterval continuera également à répéter cela jusqu'à ce que nous lui disions le contraire. Cependant, à l'intérieur ici, nous ne voulons exécuter un code génial de fonction qu'une seule fois. Pour ce faire, nous pouvons utiliser setTimeout. À l'intérieur, nous allons aussi passer dans une fonction de flèche. Ici, tout ce que nous voulons faire est de rafraîchir le navigateur et la façon dont nous pouvons le faire à l'intérieur de notre code est en utilisant location.reload. C' est exactement la même chose que d'appuyer sur le bouton Reload sur notre navigateur, mais au lieu cela, nous le faisons après un délai, que je vais définir comme trois secondes. Essayons ça. Cliquez sur « Jouer ». Voilà notre score, et après trois secondes, on devrait voir un rechargement. Bien que nous soyons également confrontés à la condition de fin de jeu, nous pouvons également masquer cette section Stats sur la gauche. Nous allons cacher cela à la fin de la partie , puis le rétablir une fois que le jeu a commencé. La façon dont nous pouvons le faire est tout comme nous l'avons fait ci-dessus avec getElementByID, et l'ID que nous voulons saisir. Si nous faisons défiler un peu vers notre section de départ, rappelez-vous quand nous utilisons ces CSS tôt, nous avons entouré tout ce contenu de texte à l'intérieur d'un div avec l'ID du contenu de statistiques. Nous pouvons maintenant l'utiliser pour afficher et masquer cette zone dans le script. Tout d'abord, copions et collez cette ligne. Nous devons sélectionner notre StatsContent. Ensuite, à la fin de la partie, nous allons supprimer ceci avec l'affichage de rien. On peut saisir ça et on verra que le jeu est commencé. Nous voulons rétablir cela en définissant ceci comme un type d'affichage de bloc. Passons en revue nos images et vérifions que tout fonctionne dans le navigateur. Lorsque le jeu est lancé, nous voyons notre section apparaît. Ensuite, cela disparaît à la fin de la partie. En fait, nous n'avons probablement même pas besoin de rétablir cela lorsque le jeu commence, parce que rappelez-vous, nous rafraîchissons le navigateur, ce qui nous remettra immédiatement dans le DOM. Allons à travers le cycle. Nos statistiques sont toutes affichées. Ils sont retirés à nouveau à la fin de la partie. Avec cela maintenant pris en charge, dans la prochaine vidéo, nous allons gérer ces deux boutons ici, mais assurez-vous que l'utilisateur ne peut avoir qu'une seule sélection chaque fois qu'une image est affichée. 11. Éviter les sélections multiples et les mises à jour de l'interface utilisateur: Notre jeu est presque terminé et maintenant nous avons juste besoin de faire quelques touches finales. L' une des principales choses que nous allons faire dans cette vidéo est de nous assurer que l'utilisateur ne peut cliquer sur l'un de ces boutons de sélection qu'une fois par image. Actuellement, si nous commençons une partie, nous pouvons cliquer sur l'un de ces boutons autant de fois que nous le voulons pour chaque image. Nous voulons également nous assurer que cette section de score et les boutons ne sont pas disponibles avant même le début du jeu. Tout d'abord, nous allons commencer par cacher cette section de démarrage dans notre script.js. Je veux le faire juste en dessous de nos variables, donc sous le total disponible. Prenons notre section de contenu de statistiques, qui est le wrapper juste ici qui contient tous nos scores et boutons. document.getElementById, le nom de l'ID est statsContent. Nous pouvons ensuite masquer cela en définissant la propriété de style de visibilité pour être égale à masqué. Puisque cela est maintenant parti, nous voulons rétablir cela une fois que le jeu commence. Copions ceci et si nous descendons à notre fonction de jeu, nous pouvons ajouter ceci à l'intérieur ici, mais cette fois nous voulons que la visibilité soit égale à visible. Enfin, à la fin de la partie, nous allons également manipuler ceci, afin que nous puissions l'ajouter. Une fois de plus, définir ceci pour être caché une fois le jeu terminé. Sauvegardons ceci et essayons ceci dans le navigateur, vous pouvez jouer et maintenant nos statistiques montrent maintenant [inaudible] la fin du jeu. Ceci est maintenant caché prêt pour le début de la partie. Ensuite, nous pouvons également rendre ces deux valeurs dynamiques. Actuellement, nous n'avons pas de valeur pour commencer par notre score, et nous aurons cette valeur codée en dur de 20 à l'intérieur de notre index.html. Supprimons cela, et maintenant nous pouvons les mettre à jour avec l'ID du score actuel, et aussi le total disponible. Nous avons déjà ces valeurs. Si nous faisons défiler jusqu'à nos variables en haut, nous avons notre score et aussi le total disponible, alors ajoutons ceci ici maintenant. Prenez les éléments par notre ID, qui est le score actuel. Ensuite, définissez l'innerHTML pour être égal à notre variable de score. Je vais dupliquer ceci, et le prochain du total avait l'ID du total disponible. La variable est stockée juste au-dessus, et ce n'est qu'une ici, alors revenons-en. Plus sur le navigateur, nous pouvons maintenant tester cela si nous cliquons sur le jeu. Toutes les valeurs sont maintenant mises à jour et nous voyons toujours le nombre dynamique d'images de 20. Si vous vous souvenez dès le début dans le HTML, nous définissons également la section juste ici. Nous dirons combien de secondes l'utilisateur doit décider. Cela restera juste la valeur codée en dur de trois, ce qui est terminé dans notre page d'index, nous avons également entouré cette valeur à l'intérieur d'une plage avec l'ID de TimeSetting. Maintenant, supprimons ceci, c'est une valeur codée en dur, nous pouvons maintenant définir ceci comme une variable. En haut, je vais créer une constante, le nom du délai de temps que je vais initialement définir sur une valeur de trois secondes. Nous pouvons maintenant utiliser ce délai à deux endroits. Tout d'abord, nous allons mettre à jour notre DOM juste ici, et nous pouvons également l'utiliser ci-dessous. A l'intérieur de notre fonction de minuterie, nous pouvons donc remplacer notre valeur codée en dur par notre variable. Nous pouvons ensuite mettre à jour le DOM. Nous allons donc dupliquer cette ligne et l'ID que nous voulons cibler est le réglage de l'heure. Donnons ceci une sauvegarde et vérifions si cela fonctionne. Ça marche, mais ça ne ressemble pas exactement à ce que nous voulons, c' est une valeur de 3 000. Puisque c'est en millisecondes, tout ce que nous avons à faire est de diviser cela par 1000, ce qui nous donne la valeur de trois secondes. Vérifions également que la minuterie fonctionne et voyons que nous avons trois secondes entre chaque image. Ça a l'air bien. La prochaine chose que nous devons corriger est le fait qu'ils utilisent un clic sur ces boutons, plusieurs fois pour chaque image. La façon dont nous allons résoudre ce problème est de créer une variable appelée chosen, et nous allons définir cela pour être vrai une fois qu'un utilisateur clique sur le bouton. Ajoutons une virgule juste après cela, puis nous pouvons ajouter une nouvelle variable appelée chosen, et nous allons définir ceci à une valeur initiale de false. Maintenant, si nous faisons défiler vers le bas jusqu'aux fonctions qui sont activées une fois que l'utilisateur clique sur les boutons, c'est la correspondance et aucune fonction de correspondance. Nous voulons seulement exécuter le code à l'intérieur ici, si la valeur choisie est égale à false. Donc on coupe ça, je cherche à écrire une déclaration if. Nous pouvons dire que si ce n'est pas choisi, nous pouvons alors ajouter nos accolades et exécuter le code à l'intérieur. Faîtrait exactement la même chose pour notre fonction NoMatch juste ci-dessous, alors découpez ceci, créez notre instruction if, puis exécutez ce code à l'intérieur. Initialement, ces deux fonctions s'exécuteront si vous cliquez sur un bouton parce que nous avons défini la valeur de notre choix sur false. Donc, l'une ou l'autre de ces options fonctionnera au tout début. Mais une fois que l'utilisateur a cliqué sur l'un de ces éléments, nous voulons alors inverser cela et définir notre valeur choisie pour être égale à true. Nous ferons exactement la même chose dans notre fonction NoMatch. Une fois qu'un utilisateur a fait une sélection, le choix sera égal à vrai. Ensuite, nous voulons faire ce faux à nouveau, afin que l'utilisateur puisse faire une nouvelle option, et la façon dont nous pouvons le faire est de sauvegarder dans notre fonction de génération. Disons que choisi soit égal à faux, donc la valeur de choisi ne sera jamais égale à false une fois le jeu démarré ou une fois que nous générons une nouvelle image. Cela signifie que l'utilisateur peut alors faire son choix parce que ce sera faux, et ensuite nous allons définir ceci pour être vrai, donc aucun autre choix ne peut être fait. Donnez cette sauvegarde supplémentaire et testons cela dans le navigateur. Nous ne pouvons maintenant cliquer sur l'un de ces boutons qu'une seule fois pour cette image, une fois pour cette image et tout fonctionne bien. C' est maintenant toutes les fonctionnalités maintenant prises en charge pour notre nombre beaucoup de jeu. Ensuite, nous allons terminer ce projet en ajoutant un effet de fondu à notre image. 12. Animations de fondu enchaîné: Vous finissez ce projet, nous allons rendre les transitions entre chacune de nos images un peu plus fluides. Actuellement, chacune de nos images est juste placée à l'intérieur du DOM. Mais nous allons rendre cela plus lisse en ajoutant un effet de fondu. La façon dont nous pouvons le faire est d'ajouter une classe à notre image. Une fois que cela a été généré. Nous pouvons maintenant passer à notre CSS et ajouter ceci comme une animation. Si nous nous dirigeons vers notre fonction setImageSource, ici est où nous générons un nouvel élément d'image à afficher à l'intérieur du navigateur. Nous pouvons accéder à notre variable d'image et je vais le faire juste après avoir défini la source. Nous pouvons le faire en sélectionnant la propriété ClassList, qui a une méthode appelée add. Cela nous permettra d'ajouter un nouveau nom de classe à nos éléments d'image et nous allons opter pour un nom de fondu. Nous pouvons maintenant l'utiliser dans nos feuilles de style, alors dirigez-vous vers notre Styles.css. Nous pouvons ajouter cela n'importe où à l'intérieur de nos feuilles de style, je vais aller juste au-dessus de notre requête média. Nous pourrions commencer à cibler notre élément fondu. Mais juste avant de le faire, nous devons créer notre animation et nous pourrions le faire avec la règle des images clés. Nous donnons ensuite un nom à notre animation et je vais aller pour fondu. Ici, nous avons dit, quelle propriété CSS nous voulons changer au cours de cette animation. De cela, nous pouvons utiliser à partir de et vers où nous spécifions quelles propriétés CSS nous voulons commencer et ensuite celles que nous voulons terminer avec. Donc, pour créer un effet de fondu, nous allons définir la propriété CSS, de l'opacité à être égale à zéro. Cela signifie que c'est complètement transparent et que nous ne verrons rien à l'écran. Dans notre cas, nous ne verrons pas l'image à l'intérieur du navigateur. A la fin de ce fondu ou de cette animation, nous voulons que l'opacité soit une valeur de 1. Cela signifie que notre image sera complètement visible ou opaque une fois notre animation terminée. La façon dont nous pouvons l'utiliser est à l'intérieur de notre classe de fondu. Rappelez-vous fondu est la classe que nous avons ajoutée à notre élément image et nous pouvons ajouter nos images clés avec le nom de l'animation. Le nom de l'animation est fondu. C' est son nom juste ici et maintenant nous avons une animation qui va passer de l'opacité zéro, pour être complètement opaque ou complètement visible sur l'écran. Mais pour le moment, cela ne va probablement pas créer d'effet. Vérifions ça et rechargeons. Nous ne voyons rien de différent à l'intérieur du navigateur. C' est parce que cela se produit presque tout de suite et qu'il n'y a pas de délai entre le début et la fin de notre animation. Pour ce faire, nous pouvons définir la durée de l'animation et c'est le nombre de secondes que nous voulons que cela se produise. Nous voulons définir cette animation pour qu'elle se produise sur une seconde. Maintenant, si nous essayons dans le navigateur et cliquez sur Play, nous voyons que chaque image qui est chargée a une animation, qui est plus d'une seconde. Cela rend juste le jeu un peu plus lisse pour l'utilisateur final et bien sûr, vous pouvez jouer avec ceux-ci et rendre ces animations plus personnalisées et faire de ce projet votre propre. C' est maintenant la fin de notre jeu Number Match, j'espère que vous l'avez apprécié. Merci d'avoir regardé. 13. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis une certaine connaissance. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur le partage de compétences, et aussi de me suivre pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je vous reverrai dans un futur cours.