Jouer avec Javascript : Créer un jeu pour deviner un nombre !

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, plateaux, de bibliothèques, ou de modèles, à la place, nous allons tout construire complètement à partir de zéro, étape par étape, pour vous montrer comment ces trois technologies travaillent tous ensemble. Le projet de cette classe va être une deviner le jeu de numéros. Un ordinateur va générer un nombre aléatoire entre un et 100, puis nous pouvons sélectionner si nous voulons essayer de deviner cela en cinq ou 10 tentatives. Lorsque nous sélectionnons l'une de ces options, cette [inaudible] notre vue de jeu où nous pouvons ajouter n'importe quelle estimation dans cette entrée qui remplacera une valeur telle que 50 à l'intérieur ici. Nous voyons que notre supposition est trop élevée. Cela signifie maintenant que puisque notre estimation est trop élevée, le nombre correct est maintenant dans la plage actuelle de 1-50. Nous pouvons ensuite ajouter une seconde estimation. C' est aussi trop élevé, donc cela signifie maintenant que notre gamme est comprise entre un et 25. Allons-y pour cinq, c'est juste trop bas, 12, et nous allons commencer à réduire cette plage entre 12-25. Au fur et à mesure que nous faisons ces suppositions, nous enregistrons également le nombre, les tentatives précédentes, ainsi que les suppositions précédentes afin que nous puissions garder une trace des choses au fur et à mesure. Nous avons maintenant six autres tentatives pour faire ce qui est correct. Allons pour 20, 22, et à cette occasion, la bonne supposition était 23. Vous voyez que c'est correct en huit tentatives. Nous avons ensuite la possibilité de commencer un nouveau jeu qui nous ramènera à notre écran de démarrage. Ce jeu est construit complètement à partir de zéro. Nous utilisons le HTML régulier pour construire l'ensemble de l'interface utilisateur. Après cela, nous tirons parti de CSS pour le style, le positionnement et la mise en page. Ensuite, nous introduisons JavaScript pour rendre notre jeu entièrement interactif. Nous gérons toutes les fonctionnalités avec JavaScript régulier. Nous devons capturer l'entrée de l'utilisateur. Nous devons générer un nombre aléatoire entre un et 100, puis comparer cela à la supposition de l'utilisateur. Nous devons enregistrer toutes les tentatives précédentes. Nous devons ajouter des paramètres de difficulté. Nous devons gérer ce qu'il faut faire lorsque le jeu est terminé et aussi mettre à jour le curseur de plage aussi, bien que l'utilisateur puisse le réduire après chacune de ses suppositions. Donc c'est ce que nous allons construire. Je suis excité de t'apprendre celui-là. Allons-y à 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 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 éloigner de la classe . Vous pouvez même prendre du recul une fois que vous avez terminé le cours et 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 je suis le seul à y jeter un coup d'œ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: Bienvenue au début de ce nouveau jeu et de cette nouvelle section. C' est un premier regard sur ce que nous allons construire. Il s'agit d'un jeu de nombres aléatoires, où l'utilisateur va générer un nombre aléatoire entre 1-100, puis soit à 10 tentatives ou cinq tentatives, selon celle que l'utilisateur choisit. Nous aurons alors une chance de deviner quel numéro l'ordinateur a généré. Donc 1-100 est une gamme assez large, donc pendant le jeu, nous obtenons aussi quelques pointeurs, faites-nous savoir si nous sommes trop haut ou trop bas. Notre estimation de 50 est trop élevée, ce qui signifie que notre plage actuelle est maintenant de 0 à 50, et le nombre est quelque part dans cette section. Nous voyons également le nombre de tentatives précédentes en bas et nous faisons également un journal des suppositions précédentes afin que l'utilisateur sache celles qu'il a sélectionnées dans le passé. Allons-y pour 20, 10 et 1. Maintenant, notre numéro est compris entre un et 10. Allons-y pour 5, 2, et maintenant on a ça en 6 tentatives. Le numéro était deux. Ensuite, nous avons la possibilité de sélectionner un nouveau jeu et de recommencer avec le mode facile ou dur. Comme toujours, nous allons commencer par créer l'interface utilisateur avec HTML. Nous allons créer cette section ici, qui est un wrapper, puis à l'intérieur, nous allons créer deux sections. Le premier sera le wrapper pour tout ce que nous voyons sur l'écran de démarrage juste ici, y compris le texte et aussi les deux boutons. La deuxième section sera la zone de jeu que vous voyez ici. Commençons sur le bureau en créant un nouveau dossier de projet. On veut appeler ça Devinez un numéro. Ensuite, faites glisser ceci dans l'éditeur de texte pour l'ouvrir. Nous pouvons soit créer un nouveau fichier en cliquant sur cette icône juste ici, utiliser Command ou Control N pour créer un nouveau fichier, qui va être le index.html. Ajoutons une structure HTML à ce document. Je vais utiliser la commande Emmet, qui est HTML:5. Le titre du document de deviner un jeu de numéros. Ensuite, dans le corps, nous allons créer notre section principale, qui est le wrapper pour notre écran de démarrage et aussi pour la zone de jeu. Nous allons créer notre div, qui va être l'écran de bienvenue. Donnons à cela un ID de l'écran de bienvenue, et aussi juste après cela, nous allons créer notre deuxième section. Celui-ci aura un ID de zone de jeu. Commençons dans la toute première section, qui est l'écran de bienvenue, et voici la section que vous voyez juste ici. Nous commencerons tout en haut par un cap. Ajoutons ceci à l'intérieur de notre premier div. Le texte est, devinez le nombre aléatoire. Ensuite, nous allons ajouter une balise de pause, juste pour placer la ligne suivante juste en dessous, donc entre un et 100. Ensuite, juste après cela, je vais créer une section qui va avoir le titre de difficulté et aussi les deux boutons. Le premier va avoir le texte de sélection de difficulté à l'intérieur de l'élément P. Suivi par un div qui va être le wrapper pour nos deux boutons. A l'intérieur de cela dans le CSS, nous allons donner à cela une classe, qui est égale à bouton-wrapper, puis à l'intérieur nous pouvons placer nos deux boutons. Le bouton supérieur est pour notre réglage facile. Nous pouvons ajouter le texte de facile et aussi 10 tentatives. Suivi d'un second bouton, et celui-ci est pour le mode dur, et c'est cinq tentatives. Ouvrons cela dans le navigateur et voyons à quoi cela ressemble. Copions le chemin de notre index, puis collez-le dans un nouvel onglet. Un écran de démarrage assez simple. Nous avons juste notre texte et nos boutons, puis nous allons passer à notre zone de jeu juste en dessous. Si nous cliquons sur l'un de ces boutons, nous sommes alors amenés à notre zone de jeu, que nous allons commencer à construire maintenant. Mais en haut, nous allons commencer par le texte de votre supposition. Mais si vous vous souvenez de la démo tôt, nous avons aussi un bouton en haut, qui va être caché pendant le jeu. Cela va nous permettre de commencer une nouvelle partie une fois le jeu terminé. Le tout premier élément que nous allons avoir à l'intérieur de notre zone de jeu sera un bouton, et nous allons montrer et cacher cela à l'intérieur de notre JavaScript. Nous allons créer un identifiant de nouveau bouton de jeu. Ce bouton avait le texte du nouveau jeu. Après cela, nous allons ajouter une section qui va être le wrapper pour le texte en haut de votre devis et aussi l'entrée. Un titre de niveau 3 avec le texte de votre estimation. Ce titre de niveau 3 va également être remplacé pendant le jeu pour faire savoir à l'utilisateur si sa supposition était trop élevée ou trop basse. Pour ce faire, nous pouvons également ajouter un ID, afin que nous puissions marquer ceci avec JavaScript, et l'ID que je vais donner ceci est une sortie de texte. Suivi par notre entrée juste en dessous, avec le type de nombre. L' ID qui va être égal à la boîte de saisie, que nous utiliserons plus tard pour saisir l'entrée de l'utilisateur. Ensuite, puisque notre jeu se situe entre un et 100, nous allons ajouter les attributs min et max. Donc, le minimum d'un et la valeur maximale est 100. Jetons un coup d'oeil. Mais maintenant, cela va aussi être sur la même page puisque nous n'avons pas utilisé JavaScript pour afficher et cacher l'une de ces sections pour l'instant, mais c'est tout à fait bien pour l'instant. Retour à notre zone de jeu, et juste après la section ici, nous allons passer à notre section de gamme. Nous avons le texte de la plage actuelle. Nous allons ensuite mettre à jour notre section juste ici car l'utilisateur ajoute des suppositions, puis aussi une section pour la barre de progression. Enveloppons cela dans une nouvelle section, et l'élément P de la plage actuelle, suivi d'un élément span qui va être pour notre texte, qui est actuellement 1-100. Ce texte est également mis à jour pendant le jeu afin que nous puissions ajouter un ID à cette plage. Nous pouvons changer cela avec JavaScript, et l'ID que je vais chercher est la sortie de plage. Après cela, nous allons créer notre aire de répartition. Maintenant, cela va être créé en utilisant un div comme wrapper, puis imbriqué à l'intérieur, nous allons créer trois sections. Ajoutons quelques suppositions à l'intérieur d'ici. Alors allons-y pour 50 et 90. Nous allons avoir cette section verte au milieu, qui est la plage actuelle, entre les deux. Actuellement, notre nombre est compris entre 50 et 90, donc nous voulons avoir cette section d'espace juste ici. Ensuite, de chaque côté, nous allons avoir une section haute et basse pour remplir le reste de l'espace. Ce div ici est pour notre wrapper et nous allons lui donner un ID de plage. Ensuite, imbriqués à l'intérieur, nous allons créer trois éléments de span séparés. Le premier sera pour notre section basse, et nous allons dupliquer ça deux fois de plus. Le milieu est notre section verte et nous appellerons cet espace, et à la fin, c'est haut. Ce sera notre première section rouge sur la gauche, la section verte au milieu, puis la section rouge sur la droite. Notre dernière section tout en bas sera consacrée à nos statistiques. Cela va enregistrer notre nombre précédent de tentatives et aussi les suppositions précédentes. La première de cette section va être des statistiques, puis imbriquée à l'intérieur, cela aura deux divs. Le premier div sera pour le nombre de tentatives précédentes et nous allons donner à cela une classe d'info, avec le texte du nombre de tentatives précédentes. Nous aurons alors une travée juste après et ce sera pour ce numéro que nous voyons ici. Pour l'instant, nous allons simplement ajouter une valeur de zéro, puis nous allons mettre à jour ceci en JavaScript plus tard en sélectionnant l'ID des tentatives. La section ci-dessous va juste être à peu près la même, donc nous pouvons copier cette section div, coller ceci dans. Cela a également la même classe d'info, donc il a CSS cohérent. Mais cette fois, le texte est vos suppositions précédentes. L' ID va également être des devinettes, puis afficher un tiret dans le navigateur. Regardons cela en rechargeant, et cela laisse tout notre contenu HTML en place, prêt pour notre style dans la prochaine vidéo. 4. Styliser avec CSS: Commençons maintenant à travailler en créant nos feuilles de style à l'intérieur de la barre latérale. Un nouveau fichier à côté de notre index.html, que nous allons appeler le styles.css. Fermez ça. Nous pouvons également relier cela dans notre index à l'intérieur de notre section tête. Créez un lien avec le href de styles.css. Commençons par le HTML à l'intérieur de notre feuille de style. A l'intérieur d'ici, nous allons introduire notre taille de police. Je vais définir le mien à 10 pixels, et aussi une valeur par défaut sur le poids, et je vais utiliser 300. Juste avant d'aller de l'avant et de créer le reste de nos styles pour ce projet, je vais vous présenter quelque chose qui pourrait gagner un peu de temps. Eh bien, cela va être un plugin appelé Live Server, et cela va nous sauver rafraîchir le navigateur chaque fois que nous faisons des changements. Nous pouvons apporter des modifications à notre code, enregistrer le fichier, et cela sera instantanément mis à jour. C' est totalement facultatif. Vous n'avez pas besoin d'installer ce plugin, et si vous utilisez un éditeur de texte différent, vous n'avez peut-être pas le même disponible. Pour introduire cela, nous devons passer à la barre latérale. Si vous utilisez un code Visual Studio, cliquez sur « Extensions », puis utilisez la recherche tout en haut. Nous donnons une recherche pour le Live Server, puis à l'intérieur ici vous pouvez avoir plusieurs options. Celui que j'utilise actuellement est celui-ci juste ici, et vous devrez installer et activer. Une fois cette option activée, vous devriez voir un bouton en bas qui indique « Go Live ». Vous pouvez ensuite cliquer dessus pour démarrer le Live Server, et cela ouvrira ensuite cela dans le navigateur. Si vous ne voyez pas cette icône tout en bas, vous pouvez aller à Affichage, Palette de commandes, puis effectuer une recherche pour Live Server où nous aurons les options pour ouvrir cette option avec notre Live Server. Ceci est complètement facultatif et vous pouvez continuer avec la même façon que nous l'avons utilisée précédemment. Mais maintenant, si nous allons dans notre prochain [inaudible], qui est le corps, je vais mettre quelques propriétés à l'intérieur ici. Réglons la largeur de notre corps à 90 pour cent de la fenêtre d'affichage. Nous pouvons centrer cela avec marge zéro auto. Ensuite, je vais définir un fond qui sera un gradient radial. Nous allons l'utiliser pour se fondre entre deux couleurs différentes. Cela va se fondre dans un mouvement circulaire du centre à la fin de la page. Le gradient radial va prendre deux valeurs. Le premier, je vais utiliser 343e63, puis séparé par une virgule, le second sera 2a3352. Donnez ceci une sauvegarde et nous voyons instantanément les changements à l'intérieur du navigateur. Après cela, passons à notre section principale qui est le wrapper pour tout notre jeu. Nous pouvons créer un wrapper qui va définir l'alignement du texte pour être au centre, une couleur d'arrière-plan f8f1e9, une bordure qui va envelopper notre jeu à gauche, en bas, et aussi à droite. Tout d'abord, nous devons définir la couleur de la bordure et aussi définir cela comme une ligne solide. Nous pouvons alors définir cela pour aller sur trois côtés différents. Notre frontière va être une ligne solide, et notre couleur, qui va être égale à ef7b54. Si nous sauvegardons cela, actuellement, nous voyons la frontière est placée sur les quatre côtés. Pour le sélectionner sur plusieurs côtés, nous pouvons utiliser la propriété border-width , puis entrer la largeur que nous voulons la bordure sur quatre côtés différents. Le premier est le sommet. Nous voulons zéro en haut, huit pixels à droite, huit pixels en bas, et aussi pour la gauche aussi. Rendons cette section un peu plus grande avec la hauteur minimale de 80 pour cent de la hauteur de la fenêtre. Nous pouvons également contourner ces frontières en bas à gauche et à droite avec notre rayon de frontière. Le haut à gauche en haut à droite est zéro, puis trois rems en bas à droite, et aussi en bas à gauche. En outre, un rem de rembourrage pour lui donner un peu d'espacement à l'intérieur de la section. La valeur de couleur de texte que je vais utiliser sera 1f2933. C' est donc notre section principale et maintenant nous allons cibler certains des éléments qui sont imbriqués à l'intérieur. En commençant en haut de notre écran d'accueil, nous avons cette rubrique de niveau 2. Ensuite, nous pouvons également sélectionner nos éléments de texte aussi. Tout d'abord, allons-y pour notre h2. Nous pouvons définir la taille de la police pour être un peu plus grande, donc 2.2 rems. En outre, nous pouvons créer un espacement sur le haut et le bas. Je vais donner à cela un peu d'espacement sur le haut et le bas, puis zéro sur la gauche et la droite, puis notre texte qui est à l'intérieur des éléments p. Nous pouvons également augmenter la taille de la police à 1,8 rems. En adhérant à cette section de l'écran de bienvenue, nous avons ensuite cette zone de bouton qui a une classe de bouton-wrapper. Actuellement, ces deux boutons sont placés côte à côte, sorte que nous pouvons changer cela en définissant le type d'affichage sur flex, la flex-direction pour être colonne. Ensuite, nous pouvons cibler les boutons individuels avec l'élément bouton. Je dois déplacer la bordure par défaut avec aucun. Nous pouvons également définir le curseur pour être un pointeur une fois que vous utilisez un survol de ce bouton. Puis la couleur de fond pour nos boutons. Allons pour une valeur hexadécimale. Ce sera une couleur verte avec la nuance de 83e1d0. Un peu de rembourrage à l'intérieur du bouton de deux rems. Ensuite, nous allons appliquer un rayon de bordure en haut de notre premier bouton, puis en bas de notre deuxième bouton. Cela va nous donner cet effet arrondi que nous voyons sur les boutons juste ici. Pour l'instant, nous allons cibler le tout premier bouton à l'intérieur de ce sélecteur. Nous pouvons définir le rayon de la bordure sur le dessus. Donc, un rem en haut à gauche, un rem en haut à droite, puis zéro en bas. Actuellement, cela va s'appliquer à tous nos boutons. Maintenant, nous pouvons remplacer cela en sélectionnant le dernier enfant. dernier enfant va cibler le dernier de tous les types de boutons, qui se trouve à l'intérieur de ce wrapper. Si nous avions un troisième bouton, cela ciblerait le troisième, si nous avions un quatrième bouton, cela ciblerait le quatrième, et ainsi de suite. Nous n'avons que nos deux boutons, donc le dernier enfant va s'appliquer à ce bouton dur juste ici. Nous pouvons remplacer l'arrière-plan, et je vais utiliser la même couleur rouge que nous avons pour cette bordure. Nous utiliserons également la même couleur rouge pour notre curseur de gamme pendant le jeu. Cela signifie que nous utilisons maintenant une même couleur plusieurs fois. Nous pourrions aller de l'avant et inclure la même couleur, mais nous pouvons également utiliser quelque chose qui est appelé variables CSS également connu sous le nom de propriétés personnalisées. Tout comme lors de l'utilisation de JavaScript, nous pouvons utiliser des propriétés personnalisées CSS pour créer une variable et l'utiliser plusieurs fois à l'intérieur de tous les fichiers. La façon dont nous pouvons le faire, si nous allons au sommet, je vais créer une section qui va contenir toutes nos variables. La première chose que je vais faire est de cibler la racine. Cela va nous permettre de créer nos variables que nous pouvons utiliser sur toute notre page. La façon dont nous créons une variable à l'intérieur de CSS est en utilisant les doubles tirets. Nous utilisons ensuite un nom de variable tel que vert, puis nous pouvons sélectionner notre valeur. La valeur verte que nous utilisons actuellement est celle-ci juste ici pour nos boutons. Nous pouvons copier ceci, coller ceci et ajouter un point-virgule. Nous pouvons également déclarer notre couleur rouge, que nous allons réutiliser, qui a une valeur de ef7b54. Ensuite, nous pouvons également définir la couleur de notre arrière-plan, donc tiret, fond de tiret, et ce sera la couleur de toute la section principale. La section principale, si nous faisons défiler vers le bas, il y en a un qui est juste ici, nous pouvons saisir ceci et définir ceci comme une variable. Si nous le voulions, nous pourrions également définir les couleurs de nos dégradés radiaux. Copions ceux-ci, gradient-1 et aussi le gradient-2. Maintenant, nous avons nos variables déclarées en haut. Comment les utilisons-nous maintenant dans notre projet ? Nous les utilisons à la place de nos couleurs, allons donc supprimer ces premiers dégradés radiaux. Nous les mettons ensuite à l'intérieur d'une fonction var et ensuite nous déclarons le nom que nous lui avons donné juste au-dessus. Celui-ci était gradient-1, puis la deuxième valeur va être gradient-2. Encore une fois, à l'intérieur de notre fonction var. Sauvegardez ceci, et maintenant notre gradient, en cours de réintégration. Jusqu' à la section principale, nous pouvons également remplacer notre arrière-plan par notre variable. Vous êtes à la frontière. Nous avons également ceci stocké à l'intérieur d'une variable, et celui-ci est de couleur rouge. Cela fonctionne toujours bien à l'intérieur du navigateur. Maintenant, si nous faisons défiler jusqu'à nos boutons, nous avons la variable verte, donc tiret, tiret vert. La couleur de fond de notre dernier enfant ou notre deuxième bouton sera la variable rouge, que nous avons également définie juste au-dessus. Le rayon de la frontière pour cela va être différent aussi. Nous pouvons remplacer cela avec le rayon border-en définissant le haut sur zéro et zéro, puis le bas à droite, et aussi le bas à gauche pour être égal à 1rem. Nous avons aussi le nouveau bouton de jeu juste ici, mais nous allons le cacher avec JavaScript très bientôt. Maintenant, en bas de la section jeu, passons à notre titre de niveau 3, qui est le texte de votre supposition. Ce message sera également remplacé ultérieurement pour être un message à l'utilisateur. Tout ce que nous allons faire pour notre titre de niveau 3 est de définir la taille de la police à 2rems. Ensuite, nous avons notre entrée de numéro. C' est la seule entrée que nous aurons à l'écran, donc nous n'avons pas besoin d'être plus précis sur la sélection du type. Tout ce qu'on va faire, c'est définir la bordure à un pixel. Une ligne solide, qui va être gris clair. Nous allons le faire fondre avec le reste de l'arrière-plan en définissant ceci pour être transparent. Les marges donnent un peu d'espace en dehors de nos éléments de 2rems en haut et en bas, puis zéro à gauche et à droite. Rembourrage pour un espacement interne de 1rem, c'est le haut et le bas, puis zéro sur la gauche et la droite. Votre largeur, 16rems. Ensuite, nous pouvons également définir l'alignement du texte pour être au centre. Ce sera le texte que l'utilisateur saisit à l'intérieur de ce champ. Cela va pousser cela au centre de nos éléments. Ci-dessous, nous avons notre section de gamme, qui est le wrapper, en bas ici, qui contient nos trois travées. Nous ne ferons pas grand-chose avec ces éléments de span dans le CSS. Nous les laisserons jusqu'à la section JavaScript plus tard, mais pour l'instant, nous pouvons définir la section de plage pour avoir une certaine hauteur et aussi la couleur de fond. C' était une pièce d'identité. Le type d'affichage sera la flexbox. Ils apparaîtront sur la page dans une ligne par défaut. L' arrière-plan, pour commencer, ce sera une couleur verte pleine. Nous pouvons utiliser notre variable verte. Une hauteur de 50 pixels, une valeur de remplissage de zéro, puis aussi une marge. Je vais juste définir la marge pour être zéro en haut et à droite, 4rems en bas et zéro à gauche. C' est juste pour nous donner une marge de fond. C' est cette base de la section de départ juste en dessous. Ensuite, nous allons agrandir un peu le texte de 1-100. Cette section a l'ID, qui va être la sortie de plage. La taille de la police, 1.6rems, et c'est tout ce que nous avons actuellement à faire pour cette section de plage. Nous ferons le reste dans notre JavaScript. En dessous de cela, nous avons notre section de statistiques et ceci a la classe de statistiques. C' est pour notre emballage. Tout ce que nous allons faire à l'intérieur, c'est de définir le text-align pour être sur la gauche, et ensuite nous pouvons nous occuper de nos deux sections à l'intérieur. A l'intérieur de notre index ou html, nous avons donné à ces deux sections une classe d'informations. C' est pour que nous puissions utiliser la flexbox CSS, tout comme sur la version finale, où nous placerons ces deux éléments l'un à côté de l'autre. Nous allons ajouter un espacement entre les deux et nous assurer qu'ils sont alignés sur la page. Nos infos, le type d'affichage de flex. Nous pouvons ensuite utiliser justification du contenu pour ajouter l'espace entre. Actuellement, ceux-ci ne sont pas alignés correctement sur la page. Nous voyons que c'est un peu plus haut. Pour résoudre ce problème, nous allons aligner nos éléments sur l'axe transversal vers le centre. Cette valeur de zéro et aussi le tiret étaient contenus à l'intérieur de ces éléments de span. Pour corriger cela, nous pouvons étiqueter notre section info et ensuite n'importe quelle plage qui est à l'intérieur. La taille de la police, nous allons aller pour 1.6rems. Nous avons presque fini pour notre style pour ce projet. Juste avant que nous finissions, ciblons ce bouton juste ici, qui n'apparaîtra qu'à la fin de la partie. Ceci a l'ID du nouveau bouton de jeu. Tout ce qu'on va faire est de réinitialiser le rayon de la frontière à zéro. Ensuite, nous pouvons ajouter une requête multimédia pour les plus grandes tailles. Nos médias, la largeur d'écran minimale de 800 pixels. La seule chose que je vais faire ici est de restreindre la largeur du corps quand cela devient plus grand. Sur les écrans plus grands, je vais juste définir la largeur maximale à 60 pour cent de la largeur de la fenêtre, juste pour qu'elle ne semble pas trop trop tendue. La section du corps, nous pouvons définir la largeur pour être 60vw. C' est tout maintenant pour notre style. Vous pouvez bien sûr changer les choses si vous le voulez. Ensuite, nous allons passer à notre section JavaScript et commencer à gérer les fonctionnalités de notre jeu. 5. Commencer notre jeu: Il est maintenant temps d'ajouter notre JavaScript à notre projet. Dans notre éditeur de texte, créons un nouveau fichier à la racine de notre projet, appelé le « script.js ». Nous pouvons aller à notre page d'index et le lier en bas, juste au-dessus de la balise de fermeture. Donc, le script et la source vont être égaux à notre « script.js ». La première chose que nous voulons faire lorsque le jeu se charge est de générer un nombre aléatoire, qui est compris entre un et 100. Nous pouvons déclencher une fonction dès que le navigateur charge ces documents en ajoutant un gestionnaire d'événements onload à la balise body. Dès que la page est chargée, nous pouvons déclencher une fonction et je vais appeler ceci « init ». Ceci est effectivement initialiser notre jeu dès que le navigateur se charge. Au-dessus de notre script.js, nous pouvons maintenant créer une variable pour stocker cette valeur à l'intérieur. Je vais appeler ça le « ComputerGuess ». J' ai déclaré cela en dehors d'une fonction, donc il est disponible pour l'utiliser dans n'importe quelle autre fonction. Si nous devions déclarer cela à l'intérieur d'une fonction, cette variable serait portée à cette fonction particulière. Ce qui veut dire que nous ne pouvions pas y accéder dans d'autres parties de notre programme. Créons notre fonction, qui va être notre fonction init. Cela ne prend aucun paramètre. Ensuite, nous devons définir notre ComputerGuess pour être égal à notre nombre aléatoire. Nous pouvons le faire en sélectionnant le math.Random, qui sélectionnera un nombre entre zéro et un. Nous voulons que ce soit entre 1 et 100. Par conséquent, nous pouvons multiplier cela par 100. Cela nous laissera maintenant avec un nombre aléatoire, qui commence par un zéro, jusqu'à 99. Cependant, nous voulons que ce soit entre un et 100, sorte que nous puissions en additionner un à la fin. Nous avons également besoin que cela soit arrondi, afin que nous puissions arrondir cela avec Math.Floor. Mettons cela en place et nous pouvons faire usage de la méthode Math.Floor, puis passer notre numéro. Cela arrondira chacun de nos chiffres, donc nous avons un nombre compris entre un et 100. Essayons si cela fonctionne. Nous pouvons enregistrer l'ordinateur Guess et cela devrait se charger chaque fois que le navigateur commence. On a une erreur. Donc, inits, nous devons nous assurer que cela est orthographié correctement. Maintenant, chaque fois que nous rechargeons le navigateur, nous obtenons un nombre aléatoire. On peut voir ça à l'intérieur de la console. C' est un bon début pour notre projet. La prochaine chose que nous devons faire est de montrer et de cacher certains éléments à l'écran. Lorsque cette page se charge pour la première fois, nous n'avons pas besoin de voir le nouveau bouton de jeu, il sera juste là à la toute fin de notre jeu. Alors supprimons ça. Sélectionnez notre document par l'ID, et l'ID que nous voulons sélectionner est le « NewGameButton », que nous pouvons voir juste ici. Je vais déplacer cela en définissant la propriété de style CSS d' affichage pour être égale à une valeur de chaîne de « none ». Donc, notre bouton est maintenant supprimé dès que le jeu se charge et nous voulons également supprimer cette zone de jeu aussi. Alors, dupliquons ceci. Mais cette fois, l'ID que nous voulons sélectionner sera égal à cette zone de jeu. Vous pensez peut-être, pourquoi ne pas simplement cacher la zone de jeu, qui comprend également le bouton ? Eh bien, c'est parce que plus tard dans le jeu une fois qu'il sera fini, nous devons toujours garder cette zone de jeu en place, mais nous allons rétablir le bouton. L' ID que vous souhaitez sélectionner est le « GameArea », qui nous laisse maintenant avec l'écran de démarrage. Bien, nous avons maintenant un nombre aléatoire. Nous cachons maintenant la zone de jeu. Ensuite, nous devons créer une fonction pour réellement démarrer le jeu. Cela va impliquer de cacher cet écran d'accueil. Ensuite, montrant la zone de jeu que nous venons de supprimer, ce qui nous donnera effectivement deux écrans. Pour ce faire, nous allons créer une fonction et voulons appeler cela le « StartGameView ». Une fois que le jeu a commencé, nous voulons supprimer ou cacher cette zone. Si nous revenons à notre page d'index, cette zone a l'ID « WelcomeScreen ». Donc document.getElementById. Nous voulons sélectionner l'écran de bienvenue. Tout comme un [inaudible] faire usage de la propriété style de display et définissez ceci égal à « none ». Dupliquez cette ligne et la prochaine chose que nous devons faire est de rétablir la zone de jeu, que nous avons eu juste au-dessus. Donc, les changements à la zone de jeu et pour que cela apparaisse sur l'écran, nous devons changer le type d'affichage pour être « bloc ». Ensuite, nous avons besoin d'un moyen d'appeler réellement cette fonction une fois que le jeu commence. Eh bien, la façon dont nous allons le faire est d'utiliser nos boutons faciles et durs. Pour l'instant, ces deux boutons, nous allons simplement appeler la même fonction, mais nous allons la changer plus tard afin que l'utilisateur n'ait que cinq ou dix tentatives. Créons nos fonctions. Notre première fonction va être pour le mode facile. Ensuite, notre deuxième fonction va être pour le mode dur. Tout cela fera est juste d'appeler notre fonction « StartGameView ». Nous pouvons donc les ajouter à ces deux fonctions. Maintenant, pour appeler ces fonctions, nous le faisons dans notre page d'index. Allons à nos boutons et nous allons l'ajouter sur le gestionnaire d'événements click. Une fonction que nous voulons appeler une fois que le bouton a été cliqué est le mode facile. Le deuxième bouton va déclencher la fonction de mode dur. Nous devrions maintenant être en mesure de jouer à ce jeu dans le navigateur. Cliquons sur facile. Cela masque maintenant l'écran d'accueil et affiche la zone de jeu. Rechargez ceci par le bouton dur. Cela nous amène également à la section de jeu 2. Maintenant, nous avons un moyen de commencer notre jeu. Dans la vidéo suivante, nous allons passer à la capture de l'entrée de l'utilisateur et aussi à la comparaison avec notre nombre aléatoire. 6. Capturer l'entrée de l'utilisateur et comparer: Maintenant, nous avons un nombre aléatoire généré et stocké dans notre ComputerGuess. Nous allons également capturer l'entrée de l'utilisateur, qu'ils ajoutent dans ce champ numérique. Puisque ce sera plusieurs choix, nous allons stocker cela à l'intérieur d'un tableau. Donc, nous allons dire que nos UserGuesses soient égaux à un tableau vide pour commencer, puis nous pouvons faire défiler vers le bas et créer une fonction qui va comparer la supposition de l'utilisateur avec le nombre aléatoire. Cette fonction va s'appeler CompareGuess. Le but sera de saisir l'entrée de l'utilisateur à partir de cette boîte à l'intérieur de notre page d'index. Cette entrée a l'ID de InputBox. Prenons ceci avec « document.getElementById ». Ensuite, nous pouvons sélectionner la valeur que l'utilisateur entre. Tout comme tôt, nous devons aussi convertir cela en un nombre, pour que nous puissions couper cela. Nous pouvons utiliser la fonction de nombre, puis coller cela dans. Enfin, nous pouvons stocker cela à l'intérieur d'une constante appelée UserGuess. Maintenant, nous avons cette supposition. La prochaine chose que nous voulons faire est de pousser cela à notre tableau de devis utilisateur. Accédez à notre variable, puis nous pouvons pousser une nouvelle valeur à notre tableau. La nouvelle valeur est notre UserGuess. Pour vérifier que cela fonctionne, nous pouvons également afficher cela à l'intérieur de notre interface utilisateur dans notre index.html. En bas tout en bas, nous avons cette section de suppositions, qui va sortir toutes les suppositions précédentes. Revenons à notre fonction, saisissons celui-ci par l'ID, puis définissez le innerHTML pour être égal à UserGuesses. Avec cela maintenant capturé, la prochaine chose que nous devons faire est d'appeler notre fonction CompareGuess dans notre index.html. Jetons un coup d'oeil pour notre contribution, qui est juste ici. Nous pouvons appeler notre fonction chaque fois que l'utilisateur ajoute un numéro , puis appuyez sur Entrée en ajoutant le gestionnaire d'événements onchange. Le nom de la fonction est CompareGuess. Plus sur le navigateur et nous pouvons vérifier que cela fonctionne. Démarre notre jeu, ajouter les valeurs de 40, 89, et nos suppositions sont maintenant affichées en bas. Il y a différentes façons d'ajouter un espace entre chacun d'entre eux, mais une façon vraiment simple de le faire est de passer à notre script. Nous pouvons créer un espace avec une chaîne vide, et ajouter ceci à notre supposition. Maintenant, si nous ajoutons un nombre ici, 45, 78, ceux-ci ont maintenant un espace avant chaque numéro. Nous sommes maintenant dans une position où nous avons le nombre aléatoire et aussi l'utilisateur devine. Maintenant, nous avons besoin d'un moyen de comparer ces deux valeurs et de vérifier si elles ont raison. Faisons cela dans la fonction CompareGuess. Nous allons créer trois résultats différents. La première, nous allons vérifier si la supposition de l'utilisateur est supérieure à celle de l'ordinateur. Nous allons ensuite ajouter une deuxième condition de « else if », et cela vérifiera si la supposition de l'utilisateur est inférieure à celle de l'ordinateur. Enfin, nous allons ajouter une section « else ». C' est juste pour si la supposition de l'utilisateur est égale à celle de l'ordinateur. Tout d'abord, nous allons faire face à l'utilisateur deviner trop élevé. Maintenant, tout ce que nous allons faire est de sortir un message à l'utilisateur, donc « document.getElementById ». Un ID que nous voulons saisir est notre sortie de texte. C' est notre titre de niveau 3 en haut qui va remplacer le texte de votre estimation. Pour ce faire, nous définissons l'innerHTML, et il peut s'agir d'une chaîne de textes qui dit, « Votre supposition est trop élevée. » Nous devons également effacer cette entrée de formulaire. Actuellement, lorsque nous ajoutons la valeur à l'intérieur ici, puis appuyez sur Entrée, la valeur reste toujours à l'intérieur ici. Alors revenons en arrière et ajoutons ceci dans la section « si ». Actuellement, nous avons la boîte de saisie juste ici. Donc, nous pouvons saisir cette ligne de code juste ici, amener ceci, et nous pouvons définir la valeur pour être égale à une chaîne vide. La section suivante qui est le « else if », cela va vérifier si la supposition de l'utilisateur est trop faible. Nous pouvons à peu près faire la même chose dans cette section, notre message va être trop bas. Enfin, dans la section « else », nous pouvons également ajouter ceci dans. Nous n'avons pas besoin de réinitialiser le champ de saisie puisque le jeu est terminé. Tout ce que nous avons à faire, c'est de mettre un message qui sera « Correct ». Nous pouvons maintenant aller de l'avant et tester cela dans le navigateur. Mais juste avant de le faire, prenons notre ordinateur Guess et nous pouvons maintenant le mettre à l'intérieur de la console. Faisons cela dans la fonction « init », donc nous voyons cela dès que notre jeu se charge. Nous avons notre devine informatique qui est juste là. Faisons un journal de console avec cette valeur. Au-dessus du navigateur, nous pouvons maintenant cliquer avec le bouton droit de la souris et « Inspecter » pour ouvrir la console. Nous avons maintenant une valeur de 83. Cliquez sur facile. Si on va plus bas, disons 10. Oups, ça dit que c'est correct, alors voyons ce qu'on a fait. Retour à notre fonction. Donc, lorsque l'UserGuess est supérieur à l'ordinateur Guess, UserGuess, celui-ci est un ComputerGuess. Essayons encore une fois. Nous avons une valeur de 25. Donc on va descendre, on va dire 10. Ta supposition est trop basse. Maintenant, on y va pour 50. Ta supposition est trop haute. Essayons 25, et nous obtenons le message de correct. Maintenant, nous avons comparé avec succès la supposition de l'utilisateur avec le nombre aléatoire. 7. Enregistrer les tentatives précédentes: Passons maintenant à l'enregistrement du nombre de tentatives des utilisateurs. Maintenant, la raison pour laquelle nous faisons cela est parce que nous avons un mode facile et difficile pour commencer notre jeu. Une fois que l'utilisateur atteint cinq tentatives ou 10, c'est ainsi que nous savons que le jeu est terminé. Nous pouvons également enregistrer ce nombre de tentatives ici aussi, sorte que vous pouvez également voir jusqu'à quel point vous êtes dans le jeu. Pour ce faire, allons créer une variable en haut de notre script, appelez qu'il tente, et définissez initialement cette variable sur zéro. Après cela, nous devrons augmenter cette valeur une chaque fois que l'utilisateur a entré quelque chose dans le champ de saisie. Jusqu' à notre fonction CompareGuess, allez à définir ceci juste pour nos déclarations if. Nous devons incrémenter cette variable de tentatives d'un chacun d'entre eux l'utilisateur a fait une supposition. Nous pouvons le faire avec des tentatives ++, et cela va incrémenter la valeur actuelle d'un. Actuellement, c'est la valeur zéro et pour chaque supposition, il ira à un, puis deux et ainsi de suite. Nous devons ensuite mettre à jour le DOM, qui est notre section juste ici. Si nous allons à notre page d'index, puis faites défiler vers le bas, nous devons mettre à jour la plage avec l'ID des tentatives. Prenons ceci par l'ID , puis définissons le HTML interne pour être égal à notre variable qui est des tentatives. Ok, essayons ça, si nous passons au mode facile pour commencer, nous avons 10 tentatives pour cela, donc nous pouvons ajouter n'importe quel nombre ici. Ceci est augmenté à chaque supposition. Nous allons nous assurer que le joueur ne peut pas dépasser le nombre maximum de tentatives très bientôt. Mais pour l'instant, nous allons simplement mettre à jour le message à l'utilisateur. À l'intérieur de la section « else » juste ici, c'est quand ils ont leur supposition correcte. Nous pouvons également ajouter à cette section et faire savoir à l'utilisateur combien de tentatives il a obtenu correctement. Nous pouvons dire que vous l'avez obtenu, puis ajouter notre variable de tentatives, puis ajouter à la fin une chaîne de tentatives. Par exemple, cela voudrait dire que vous l'avez obtenu en quatre tentatives et ainsi de suite. Allons, essayons le réglage facile et voyons si on peut obtenir est correct, donc on est trop haut, 30, 10, 20, 15, 12, et on y va. Le bon numéro était 14 et nous avons ceci en huitième tentatives. Bien. Avec cela maintenant tout fonctionne. Passons maintenant à l'ajout de nos paramètres de difficulté dans la prochaine vidéo. 8. Ajouter des paramètres de difficulté: Sur notre facile et nos boutons hardball. Nous allons maintenant limiter le nombre de suppositions que l'utilisateur peut faire à 10 ou 5. Tout d'abord, montons au sommet de notre script, et nous allons créer une variable pour nous lancer. Je vais appeler cela les MaxGuesses, et cela ne sera initialement défini à aucune valeur particulière. C' est simplement parce que nous voulons que cela soit réglé cinq ou 10 selon le bouton sur lequel l'utilisateur va appuyer. Nous pouvons le faire lorsque nous démarrons soit la fonction facile, soit la fonction de mode dur. En mode facile, nous allons définir les suppositions maximales pour être égal à 10, puis en mode dur, nous allons définir ce à cinq. Maintenant, nous avons toutes les informations dont nous avons besoin. Nous avons cette variable de tentatives juste ici, qui est le nombre de tentatives que le joueur a eu. Nous avons également la variable maximale. Nous pouvons maintenant les comparer pour vérifier si l'utilisateur peut continuer, ou si le jeu est terminé. Faisons ça. Allons à notre fonction où je vais mettre le message à l'utilisateur. C' est CompareGuess, et nous ne voulons aller de l'avant et exécuter cette section que si le nombre de tentatives est inférieur au nombre maximum de suppositions. Mettons tout cela en place, et nous créons une nouvelle instruction if, qui va vérifier si les tentatives sont inférieures au nombre de toutes les MaxGuesses. À l'intérieur des accolades, nous pouvons maintenant coller dans la section. Cette section si elle ne fonctionnera que si elle n'a pas atteint le nombre maximum de suppositions. Si elles ont atteint le maximum, c'est donc la dernière tentative. Pour gérer cela, nous pouvons créer une section else juste après cela. Cette autre section est la toute dernière tentative, donc cela pourrait être la 10e tentative ou la cinquième tentative en mode dur. Même si c'est la toute dernière tentative, nous voulons quand même décider si les joueurs ont obtenu le numéro correct ou non. Nous pouvons le faire en saisissant cette même section que ci-dessus, et nous pouvons simplement modifier les messages. Assurez-vous de saisir tout à l'intérieur de la section if, donc le reste, sinon si, sur la section if. Copions ça. Ajoutez ceci dans notre nouvelle section else. Puisque c'est la dernière fois, si la supposition de l'utilisateur est trop élevée, nous allons changer ce message qui est affiché. On va dire que tu perds. Vous pouvez ensuite ajouter une balise de rupture pour l'ajouter à la ligne suivante, le texte du nombre était, puis nous laissons l'ordinateur deviner variable à la fin pour indiquer à l'utilisateur quel était le nombre. Nous n'avons pas besoin de réinitialiser la boîte de saisie car c'est la dernière hypothèse. Nous pouvons également supprimer cela de la section else if , puis changer le message à l'intérieur d'ici aussi. Ceci d'autre si la section est lorsque l'utilisateur devine trop faible, ce qui signifie qu'il a également perdu le jeu. Nous pouvons saisir exactement ce même message d'en haut, puis remplacer celui-ci juste à l'intérieur d'ici. La troisième condition est quand le joueur a le bon numéro, donc nous pouvons laisser ce message tel qu'il est. Donnons un procès à ça. Allons pour que le mode dur commence. Nous avons cinq tentatives. Cinquante, trop bas, 80, trop haut, 87, 85, et nous avons perdu le match en cinq tentatives. Réinitialisez et revenez au mode facile. Essayons ça, trop haut. Une fois que nous arrivons à 10 tentatives, ce jeu est également terminé. Cela perd maintenant avec un mode facile et dur entièrement fonctionnel. 9. Gérer la fin de partie: Il y a quelques choses que nous devons maintenant faire pour gérer la fin de la partie. Quand nous voyons la fin de l'écran de jeu et tout comme nous le faisons sur la droite. Nous voulons également réintroduire notre NewGameButton. C' est un sur notre index-html. Celui-ci juste ici, qui va essentiellement rafraîchir le navigateur, de sorte que nous pouvons ensuite sélectionner notre mode de jeu. Nous allons également nous assurer qu'une fois le jeu terminé, le jeu ne peut plus ajouter de valeurs dans ce champ de saisie. Si nous continuons à entrer ici, nous pouvons toujours entrer des valeurs, et elles sont toujours enregistrées comme nos tentatives précédentes, et également poussées vers le tableau. Pour ce faire, nous allons passer à notre script et créer une fonction de fin de jeu. En haut, juste en dessous de nos variables est l'endroit où je veux créer la mienne. Nom de la fonction GameEnd. étape 1 va être de réintroduire notre NewGameButton. Index, c'est l'ID de NewGameButton. Nous pouvons le faire en réinitialisant le type d'affichage. Juste ci-dessous, nous définissons ce NewGameButton pour être le type d'affichage de zéro. Copions cette ligne et ajoutez-la dans notre fonction GameEnd. Tout ce que nous avons à faire est de changer le type d'affichage pour être en ligne. Juste après cela, nous allons également ajouter un nouvel attribut à ce champ d'entrée donc c'est un juste ici. Nous allons définir ce paramètre pour être en lecture seule dès que le jeu est terminé, sorte que l'utilisateur ne peut plus entrer de nouvelles valeurs. La première étape est de saisir ces éléments et l'identité, que nous allons saisir. Voici notre InputBox. Nous pouvons voir cela dans notre page d'index. Ceci est notre entrée et l'ID de InputBox et pour ajouter un nouvel attribut à nos éléments, nous pouvons utiliser une méthode appelée setAttributes. La première chose que nous devons entrer est le nom de l'attribut, qui est en lecture seule. Je vais définir ceci sur une valeur en lecture seule. Nous devons maintenant appeler cette fonction de fin de jeu une fois que nous avons terminé le jeu. Faites défiler jusqu'à notre fonction CompareGuess, qui est juste ici, et notre jeu est effectivement terminé dans l'une de ces sections où nous appelons correct ou vous perdez. À partir du haut, la première section correcte ou vous perdez est celle-ci juste ici. Nous pouvons alors appeler notre fonction GameEnd. Copions ça et continuons à descendre. Nous avons également la section VOUS PERDRE ici, ce qui signifie que le jeu est terminé. Nous pouvons également appeler notre fonction, nous avons une section VOUS PERDRE. Le jeu est terminé, et enfin, nous avons une section correcte vers le bas tout en bas où nous pouvons appeler la même fonction. Vers le navigateur, et vérifions cela. Nous allons opter pour le mode Hard, et entrer rapidement n'importe quelle valeur utilisée pour mettre fin à notre jeu. Nous perdons, nous voyons le nouveau bouton de jeu, et nous ne pouvons plus avoir de nouvelles valeurs dans notre champ de saisie. Cependant, maintenant, si nous essayons de cliquer sur le nouveau bouton de jeu, nous ne voyons rien se produire à l'intérieur du navigateur. Tout ce que nous allons faire à ce bouton est de lui permettre de recharger le navigateur, ce qui va nous ramener à l'écran de démarrage. Dans notre index.html, nous pouvons ajouter le gestionnaire d'événements onclick à ce bouton. Dans la balise d'ouverture onclick. Je vais définir ceci sur une nouvelle fonction appelée NewGame. Retour à notre script. Ajoutons cela juste sur le GameEnd. C' était NewGame, et la façon dont nous pouvons recharger le navigateur à l'intérieur de notre code est en sélectionnant le window.location, puis appelez une méthode appelée reload. Vérifions si cela fonctionne et terminons notre jeu. À toutes les valeurs aléatoires à l'intérieur, nous voyons maintenant l'écran de fin. Cliquez sur le NewGame, et nous l'avons maintenant emmené à l'écran de démarrage. 10. Créer la section de gamme: Dans notre page d'index ou HTML, nous avons créé cette section de plage tôt. Maintenant, cela va vous mettre à jour et à nouveau pour montrer au joueur, la plage de nombre qu'ils ont laissé à choisir. Nous allons le faire en mettant à jour ces trois sections. Nous allons utiliser JavaScript pour définir le CSS comme la marge, ainsi que la couleur de fond, fichier script O2O et nous pouvons maintenant configurer cela. La première chose que je veux faire à propos du sommet est de définir deux nouvelles variables. Ces variables vont être le bas et aussi le haut, et ceux-ci vont être mis à jour pendant le jeu. Lorsque nous commençons notre jeu pour la première fois, la valeur faible est un, et la valeur la plus élevée est 100. Réglons ces valeurs par défaut, haut de 100s. C' est un handle, toutes ces fonctionnalités, nous allons créer une nouvelle fonction, et cela va s'appeler UpdateRange. Pour mettre à jour notre curseur de plage, nous devons accéder à ces trois sections. Recadrons d'abord ces par l'ID, donc getElementByID. Le premier était faible, et il en est ainsi à l'intérieur d'une constante appelée LowValue. Nous pouvons juger ça deux fois de plus, et la seconde est l'espace. Il s'agit de l'espace entre les valeurs haute et basse. Le troisième est élevé. J' appelle cela la HighValue. Cette LowValue et la HighValue seront les zones rouges que nous pouvons voir si nous allons dans le jeu. Ce sera la section basse sur la gauche, puis nous mettrons à jour la section la plus haute sur la droite. Cet espace entre les deux est la zone dans laquelle l'utilisateur doit encore choisir, et ce sera une section verte. Pour ce faire à l'intérieur de notre script, nous allons mettre à jour ces valeurs CSS de la flexbox, ainsi que la couleur de fond. Pour créer un espace pour la section basse sur le côté gauche, nous devons prendre en compte la valeur de faible, et nous pouvons l'utiliser comme un pourcentage pour définir la valeur de flex. Rappelez-vous lorsque vous utilisez la flexbox, si ces trois sections avaient une valeur égale à un, elles essaieraient toutes de prendre une quantité égale d'espace. Cependant, cette section ne sera pas égale puisqu'elle sera basée sur nos variables. Commençons par notre variable LowValue, nous pouvons définir la propriété de style ou flex, et cela va être égal à notre variable basse, et comme c'est CSS, nous devons également ajouter une chaîne à la fin, qui est le symbole de pourcentage. Ce serait également le même pour toutes les survaleurs, comme un pixel. Nous allons également donner à ce LowValue une couleur d'arrière-plan aussi. Définissez le style de fond sombre pour être égal à notre couleur d'arrière-plan, qui va être ef7b54. Nous allons faire une chose assez similaire pour nos deux prochaines sections, alors copions ces deux sections de style. Je vais coller ceci juste en dessous de notre espace, et aussi la section haute. La section espace va être tout entre les deux. Pour obtenir cette valeur, nous allons accéder à la variable haute, et enlever le bas qui va nous donner l'espace entre les deux. L' arrière-plan va être notre couleur verte qui est la valeur de 83e1d0. Le dernier est cette valeur de haut en bas. Maintenant, nous ne pouvons pas simplement produire la valeur de haute. Maintenant, c'est parce que si nous regardons notre barre de progression, si la supposition élevée des utilisateurs par exemple est 70. Si nous ajoutons ceci comme une valeur de 70, cela créera une section rouge à partir de la gauche, droite jusqu'à 70 pour cent. Cependant, nous avons déjà les sections basses et l'espace entre les deux, donc si cela devait être une valeur de 70, tout ce que nous voulons faire est de créer une section rouge pour les 30 % restants juste à la fin. La façon dont nous pouvons le faire est de retirer cela d'un 100, et cela nous donnera l'espace restant pour remplir la section rouge juste à la fin. Nous avons déjà cette couleur rouge définie d'avant, donc nous pouvons maintenant enregistrer cela, puis appeler cette fonction à chaque fois que l'utilisateur fait une supposition. Notre fonction est UpdateRange. Nous pouvons appeler cela après chaque devinette dans notre fonction CompareGuess. C' est notre compareGuess, alors sélectionnons l'ouverture entre parenthèses, et appelons ceci juste après que cela se ferme. Si je sauvegarde maintenant ce fichier et nous donne un essai, ce sont des valeurs à l'intérieur d'ici, vous voyez que rien ne fonctionne correctement pour l'instant. C' est parce que nous nous appuyons à la fois sur le haut, et aussi sur les variables basses en haut, mais nous n'avons pas encore mis à jour cela avec la supposition de l'utilisateur. Nous pouvons mettre à jour ces deux valeurs, en bas dans notre fonction CompareGuess. La première section si, ici nous enregistrons si la supposition de l'utilisateur est trop élevée. Par conséquent, nous pouvons mettre à jour notre variable élevée avec la valeur de la supposition de l'utilisateur. Ci-dessous, à l'intérieur de notre section else if, c'est quand la supposition de l'utilisateur est trop faible. Par conséquent, nous pouvons mettre à jour notre variable basse pour être égale à la supposition de nos utilisateurs. Sauvegardons ce fichier et essayons cela dans le navigateur. Ajoutez des valeurs à l'intérieur d'ici, et nous ne voyons toujours pas de mise à jour, alors examinons ceci. Nous obtenons la section haute si la supposition de l'utilisateur est trop élevée. Si c'est trop bas, on obtient dans la section basse. Allons à notre fonction. La moitié de notre variable, UpdateRange. Nous pouvons voir à partir de l'éditeur de texte que notre espace, ainsi que les variables HighValue ne sont pas utilisés, alors changeons-le pour être de l'espace, et aussi la même chose juste en dessous. Ces deux devraient être de haute valeur, et je suppose que c'est l'un des inconvénients de la copie et du collage, alors sauvegardons cela, et laissez-nous aller dans le navigateur. Ajoutez des valeurs à l'intérieur ici, donc 10, et le premier 10 pour cent est maintenant notre section basse, essayons à une valeur élevée de 90. Celui-ci remplit les 10 pour cent derniers, qui nous donne la fourchette entre les deux. Allons-y pour 50, ça se ferme maintenant. Tout cela fonctionne à peu près correctement, mais il y a un petit problème. Actuellement, notre valeur la plus élevée est 90, mais si nous devions ajouter une valeur élevée telle que 99, nous voyons maintenant notre plage augmenter. Lorsque nous ajoutons une valeur plus élevée, nous ne voulons pas que notre gamme augmente, nous voulons toujours rester avec le haut précédent qui était de 90. Cela peut sembler un peu déroutant, mais nous voulons seulement mettre à jour la variable haute si elle était inférieure à la précédente haute. Revenons à notre fonction de comparaison, lorsque nous définissons notre haut, nous allons créer un if save, qui va vérifier si notre estimation utilisateur est inférieure à la valeur précédente. Si c'est le cas, nous allons alors définir notre variable. Cela arrêtera tous les cas comme avant quand notre niveau précédent était de 90, puis l'utilisateur devine était 99, et une instruction if comme celle-ci arrêtera cette chose de se produire. La même chose se produira si nous revenons pour la section basse, si vous avez un bas de 50, cela nous donne maintenant notre gamme de 1 à 50, allons-y pour nos 30, 10. Notre section basse est comprise entre 1 et 10. Si nous devions ajouter une valeur inférieure comme cinq, encore une fois, le même problème se produit, cela va plus loin tandis que nous voulons que ce reste exactement le même. Juste en dessous où nous mettons à jour notre section basse, nous pouvons également ajouter une déclaration conditionnelle. Nous voulons que cette variable soit mise à jour uniquement si la supposition de l'utilisateur est supérieure à la valeur basse actuelle. Donnons un test à ça. Allons pour un 10 comme 90. Maintenant, allons pour la section basse si on fait ça plus bas comme cinq, cette section rouge reste exactement où elle est. Nous allons essayer d'aller plus haut, donc 95, et tout cela semble maintenant fonctionner correctement. Notre section pluie est presque maintenant terminée et la prochaine chose à faire est également de mettre à jour le texte à l'intérieur du milieu. Voici notre gamme actuelle de 1 à 100s. Nous voulons également mettre à jour cela pendant le jeu. Nous allons aussi pousser cela vers la gauche ou vers la droite pour être au-dessus de notre section verte. L' endroit où nous allons le faire est de retour à l'intérieur de notre fonction de plage de mise à jour. Faites défiler vers le haut. Nous pouvons ensuite sélectionner cette section qui est enveloppée à l'intérieur de la plage avec l'ID de sortie de plage. La première étape est de saisir ceci. Nous obtiendrions élément par ID. Stockons cela à l'intérieur d'une constante appelée sortie de plage. Nous voulons maintenant saisir cette sortie de plage, puis mettre à jour le HTML pour être les nouvelles valeurs mises à jour. Utilisons la coche arrière pour que nous puissions créer une chaîne de modèle, ce qui nous permettra d'insérer quelques variables dans notre sortie. La première variable que nous ajoutons à l'intérieur du symbole $ et les accolades. Ceci est une valeur de faible, que vous définissez juste au-dessus, le tiret, ajouter un symbole $ et ensuite nous pouvons insérer notre variable élevée à l'intérieur des accolades. Nous continuons ensuite à déplacer cette section vers la gauche ou vers la droite, pour être juste au-dessus de notre section verte. La façon dont nous pouvons le faire est de définir la marge sur le côté gauche et aussi sur le côté droit. La marge à gauche va être la même que notre section basse et la marge à droite sera égale à notre section haute et assurez-vous juste que cela se trouve dans le texte. Cela définira ceci comme une valeur de texte de notre élément. Encore une fois, nous allons sélectionner notre sortie de gamme et nous allons commencer par la propriété de style qui va être margin-left. Lorsque vous définissez une propriété de style en utilisant JavaScript, nous n'utilisons pas de tirets comme nous le ferions avec CSS. Au lieu de cela, nous définissons comme camelCase, donc le premier mot de marge est en minuscules et chaque mot juste après cela commence par une lettre majuscule. Comme je l'ai mentionné, nous allons définir ceci pour être exactement la même que notre faible valeur. Nous mettrons ensuite notre marge sur la droite. Tout comme ci-dessus, nous allons définir le style, mais cette fois la marge sur la droite et c'est la même que notre valeur flex, alors copiez ceci et testons ceci. Donc 10, 90, c'est égal, donc notre texte est maintenant au milieu. Essayons 50 et 70, 85, et chaque fois que nous mettons à jour notre gamme, cela est maintenant poussé juste au-dessus de notre section verte. Bien. C'est la section de la gamme maintenant terminée et la touche finale que je vais faire à ce projet est également de faire clignoter cette section de numéro. La façon dont nous pouvons le faire est d'ajouter une animation à notre sortie de gamme, puis de définir ceci à l'intérieur de notre CSS. Cela va être assez simple. Tout ce que nous allons faire est d'ajouter une nouvelle classe et nous pouvons définir cette propriété en utilisant une liste de classes. La liste de classes a une méthode appelée add, qui nous permettra d'ajouter une nouvelle classe, que nous allons appeler flash. Nous pouvons ensuite l'utiliser dans notre styles.css. En dehors de notre requête immédiate, comme avec n'importe quelle classe, nous ciblons ceci avec le point, puis à l'intérieur, nous pouvons configurer notre animation. Notre animation va utiliser la règle des images clés, sorte que nous pouvons définir nos images clés et cela va nous permettre de définir exactement les propriétés CSS que nous voulons ajouter ou supprimer à chaque étape de notre animation. Le nom de l'animation va être égal à flash, puis à l'intérieur ici, nous pouvons définir exactement les deux règles CSS. Nous voulons appliquer à différents pourcentages, donc à zéro pour cent, ce qui est le début même, nous pouvons définir l'opacité pour être une valeur de un et une valeur de un n'est pas transparente du tout, c'est complètement opaque. C' est exactement à quoi l'élément est destiné à ressembler. Cependant, à 50 % ou à mi-parcours de cette animation, nous allons ensuite réduire cette opacité à 0,5. Zéro serait entièrement transparent ou complètement transparent. C' est donc une valeur à mi-chemin. Ensuite, à la fin de notre animation, nous pouvons définir la valeur de 100 pour cent pour revenir à une valeur de 1. Maintenant, nous avons ce nom d'animation de flash, nous pouvons maintenant définir ceci. Je vais également définir cette animation pour être sur une durée d' une seconde et aussi définir cela comme infinie afin que notre animation continue à fonctionner à l'intérieur du navigateur. Sauvegardons ceci et essayons ceci ou le mode facile et s'il redémarre, la classe est maintenant ajoutée et nous pouvons voir que notre animation a maintenant pris effet. Félicitations, vous avez maintenant atteint la fin de ce projet et je vous verrai dans le prochain. 11. 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 gagnez quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur SkillShare, et aussi de me suivre pour toute mise à jour, et aussi d'être informé de tout nouveau cours à mesure qu'ils deviennent disponibles. Merci encore, bonne chance. J' espère que je te reverrai dans un futur cours.