Nous avons maintenant deux choses sur lesquelles nous pouvons nous concentrer.
Le premier est de changer l'affichage ici pour être vert sur le joueur gagnant et celui-ci est assez simple.
Et le second est d'obtenir le bouton de réinitialisation pour travailler afin que nous pouvons réinitialiser et de jouer à nouveau.
Commençons par le changement de couleur et je vais le faire en définissant une classe dans un fichier CSSA.
J'ai donc besoin de faire un dossier C S S et je vais juste appeler ce scorekeeper.
C Ss alors je vais lier à lui au lieu de mon pointeur de fichier HDMI Dotsie SS et sauver.
Alors je vais aller à mon dossier de CSSA et définir une classe et je vais juste l'appeler l'hiver et je vais dire que la couleur est verte et c'est tout ce que nous avons besoin et sauverons.
Et juste pour vérifier que ça ressemble à la façon dont je le veux.
Ajoutons-le à la portée de sorte que la classe est égale et nous allons juste lui donner une classe de gagnant pour le joueur 1 affichage de l'aller.
Et si je rafraîchir vous pouvez voir que nous obtenons un 0 vert.
C'est exactement ce que nous voulons comme un accroissement.
Bien sûr, nous voulons qu'il commence en noir et n'ajoute que la classe.
Lorsque le jeu est terminé, nous devons revenir à notre javascript et nous débarrasser de cela.
Donc ça revient au noir.
Allez à notre javascript maintenant.
Nous allons commencer pour le joueur 1 et nous devons vérifier si le score du joueur 1 est égal au score gagnant.
Cela signifie que le joueur un a gagné.
Donc, ici, nous allons ajouter à la liste de classe d'affichage du joueur 1.
Nous allons ajouter le gagnant de la classe et c'est tout ce que nous avons à faire.
Donc, si nous nous rafraîchissons, vous verrez que je incrémenter joueur 1 score et obtenir à 5.
Cette classe a été ajoutée.
Donc, si on regarde ici, je vais l'inspecter.
Il n'y a pas de classe et je continue d'incrémenter jusqu'à ce que nous arrivons à 5.
Faites attention ici et nous obtenons un gagnant de la même classe ajouté Quand nous arrivons à 5.
Nous ferons la même chose pour le joueur 2.
Donc, si le joueur deux scores le score gagnant va changer le joueur à afficher.
Vérifions l'augmentation à 5.
Génial.
Tout semble fonctionner très bien.
Donc la prochaine pièce est obtenir le bouton de réinitialisation pour travailler dès maintenant.
Si nous obtenons le jeu plus il est toujours défini pour être vrai.
Il n'y a aucun moyen de changer de jeu.
Donc cliquer sur le bouton de réinitialisation doit déclencher quelques lignes différentes de code.
Le premier que vous voulez changer.
Joueur 1 et le joueur à marquer à zéro.
Nous voulons changer les valeurs ici qui sont affichées dans l'écran du lecteur 1 et le joueur à afficher à zéro et nous voulons supprimer cette classe verte de n'importe quel élément il est sur.
Et puis la dernière chose est que nous devons nous assurer que le jeu retourne à être faux de sorte que notre code et ici peut courir à nouveau.
Donc, la première chose dont nous avons besoin pour sélectionner le bouton que nous lui avons donné id égal reset.
Nous devons donc aller ici et le sélectionner.
Donc je vais le faire avec les autres boutons jusqu'à présent.
Le bouton de réinitialisation est égal au point de document et nous ferons un autre élément d'obtention par l'identification et cette fois l'ID est réinitialisé et sauverons et puis juste vérifier que cela fonctionne.
Faire un journal constant.
Réinitialiser le bouton de réinitialisation et actualiser
Si nous regardons dans notre console, nous obtenons notre bouton correct.
Il a été annulé est enregistré.
OK donc nous devrions commencer par ajouter notre écouteur d'événement pour un clic sur ce bouton de réinitialisation ainsi le bouton de réinitialisation que l'écouteur d'événement clique à notre fonction de rappel et tout ce que nous voulons faire pour commencer de nouveau juste annuler ce logs réinitialisé juste pour s'assurer qu'il fonctionne Et là nous allons notre bouton de réinitialisation a été cliqué.
Alors la logique que nous avons discuté comme nous devons définir.
Joueur 1 et le joueur à marquer à zéro.
Donc, c'est assez simple.
Joueur 1 score zéro joueur à marquer est zéro.
Mais si je tourne ce droit maintenant où je ne change que le joueur 1 score dans le joueur à marquer à zéro et l'augmentation de sorte que le joueur un gagne et puis cliquez sur réinitialiser.
Rien ne semble se produire et c'est parce que nous ne changeons le score en javascript.
Nous n'avons jamais mis à jour les scores sur la page, donc ce sont les variables d'affichage P1 et P2 que nous devons mettre à jour.
Donc, nous voulons faire un contenu texte d'affichage et nous pouvons simplement le mettre à zéro.
Nous pourrions également fixer le score à 1.
Ils devraient tous deux être zéro.
Donc, même chose Pete pour afficher le contenu du texte est de zéro.
Si nous rafraîchissons maintenant et nous arrivons à 5.
Ils remontent à zéro.
Nous allons donc nous rapprocher.
Et cliquez sur réinitialiser les deux revenir à zéro.
Ensuite, supprimons la clause gagnante.
Est-ce que ce faire le moyen facile en supprimant la classe gagnante des deux.
Donc, nous ne verrons même pas qui l'a.
Nous allons simplement le supprimer des deux.
C'est juste une question d'un affichage.
Les listes de classes éliminent le gagnant.
Donc, cela permettra de se débarrasser de la clause et sera également le faire sur l'affichage.
Donc, peu importe ce que l'on a, il n'a pas d'importance parce que nous sommes le retirer des deux.
Donc maintenant, si nous jouons un jeu, nous obtenons un gagnant.
Je clique sur réinitialiser.
Ils remontent tous deux à un simple texte vierge.
Mais comme vous pouvez le voir, j'arrive à cinq.
Je clique sur le bouton de réinitialisation ne fonctionne toujours pas.
Et c'est parce que le jeu est encore vrai.
Et donc aucun de notre code au lieu de ces événements va fonctionner.
Donc la dernière chose que nous devons faire est de mettre.
Game over retour à faux et qui devrait nous permettre de continuer à jouer.
Donc je vais rafraîchir incrémentales.
Commençons un jeu.
Voilà.
Je ne peux plus jouer.
Je clique sur réinitialiser et maintenant le jeu est de retour à faux et je peux jouer encore et puis continuer.
C'est donc la fonctionnalité de base ici.
Nous avons presque tout fait la dernière chose est d'obtenir le jeu au numéro ou le score gagnant pour être une variable.
Donc ce n'est pas toujours cinq.
Donc, nous avons cette contribution et nous voulons l'utiliser pour que, lorsque je change cela pour être sept, cela dit jouer à 7 et notre maximum ou notre score gagnant est sept au lieu de cinq.
Nous avons donc quelques étapes pour y arriver.
La première chose que nous devons faire est de sélectionner cette entrée comme vous pouvez le voir, nous avons le type d'entrée égal au nombre.
C'est la seule entrée sur la page.
Donc nous n'avons pas nécessairement à lui donner un ID ou quoi que ce soit.
Donc, je vais aller ici et de le sélectionner avec mes autres sélecteurs var.
Appelons-le juste aucune entrée égalise le document et il y a beaucoup de manières de l'obtenir peut documenter cette entrée de sélecteur de requête.
Nous pourrions également spécifier seulement où.
Type est égal au nombre car il pourrait y avoir d'autres entrées.
Dans notre cas je vais garder simple.
Il n'y a qu'une seule entrée.
Donc, cela fonctionnera très bien.
D'ACCORD.
Nous avons donc sélectionné cette entrée.
Alors maintenant, ajoutons un événement.
Donc, ce que nous voulons faire, c'est que chaque fois que cela change la valeur ou que les changements de nombre que nous voulons mettre à jour et nous voulons que la variable de score gagnante à mettre à jour aussi.
Donc, ce que nous devons faire est d'ajouter un événement.
Donc, nous allons juste aller engourdir et mettre Dot avait l'événement Lessner cliquez simplement le faire de cette façon ici.
Fonction et tous faire une alerte.
Cliqué sur l'entrée et ce que vous verrez est qu'en fait un écouteur de clic n'est pas le meilleur outil pour ce travail.
Parce que oui, nous pouvons changer la valeur avec un clic comme je viens de le faire.
Mais je peux aussi effacer et de taper un numéro moi-même et aucun événement a été tiré parce que je n'ai pas à cliquer.
Donc, si j'utilise les petits boutons ici un événement rapide se déclenche.
Sinon, si je n'utilise que mon clavier, nous n'obtenons pas un événement rapide.
Donc, il ya un autre type d'événement qui est beaucoup mieux dans ce cas, qui est appelé changement.
Ainsi, un événement de changement sera exécuté à tout moment la valeur change et il n'a pas d'importance comment cette valeur a changé.
Si c'est parce que j'ai cliqué ou appuyez sur la touche Supprimer.
Donc, nous allons changer l'alerte ici pour dire changé l'entrée, puis rafraîchir.
Et si je clique ici pour le changer, il me dit que vous avez modifié l'entrée.
Mais si je supprime et je tape un nombre qui n'implique pas de cliquer, il me dit aussi que je change l'entrée de sorte que c'est grand.
C'est l'événement que nous voulons utiliser l'événement changement chaque fois que la valeur change, nous voulons mettre à jour ce nombre ici et nous voulons aussi mettre à jour notre score gagnant afin que notre jeu continue à aller jusqu'à ce que nous avons atteint ce nouveau score gagnant.
J'espère que ce n'est pas notre score réussi.
Définitivement long jeu de ciseaux de papier rock.
Donc, la première chose est de mettre à jour cette valeur ici.
Donc, juste comme avant, nous avons besoin de sélectionner ce qui est un paragraphe.
Donc, nous devons sélectionner notre paragraphe et je vais juste faire un paragraphe VAR est égal au document que la balise de sélecteur de requête.
Et puis dans cet événement rapide, nous allons simplement changer ce contenu de texte et nous allons tout simplement commencer par le changer pour dire cliqué ou disons que la valeur a changé.
Juste comme ça et rafraîchir.
Maintenant, si je change la valeur que le paragraphe change pour dire la valeur a changé mais c'est notre même problème nous avons rencontré plus tôt avec le H-1 nous ne voulons pas changer le paragraphe entier.
Nous voulons seulement changer cette petite partie.
Donc ce que nous voulons utiliser est en fait une autre période.
Donc nous allons revenir en arrière et nous allons ajouter une portée autour du nombre.
Et ceci est une utilisation parfaite pour une portée où encore nous pouvons l'utiliser pour cibler juste une petite partie d'un élément pas la chose entière.
Et je ne vais pas vraiment lui donner une idée cette fois-ci simplement pour vous montrer une autre façon de le sélectionner.
Rappelez-vous juste qu'il s'agit d'une portée au lieu d'un paragraphe.
Et c'est le seul comme ça sur notre page.
Nous reviendrons donc.
Ainsi, plutôt que de sélectionner le paragraphe, nous allons créer une nouvelle variable et nous l'appellerons affichage de score gagnant et il va être sélecteur de requêtes de document.
Mais plutôt que de simplement étendre car il ya d'autres espaces sur la page, nous voulons sélectionner intervalles à l'intérieur des paragraphes.
C'est donc tout ce que nous avons à écrire.
P espace.
Envergure.
Et nous allons sauver.
Et maintenant, allons de l'avant et mettre à jour le score gagnant affiché ici au lieu du paragraphe.
Donc l'affichage de score gagnant comme ça.
Et ce ne sera toujours pas parfait.
Il va seulement mettre à jour la valeur a changé à chaque fois mais au moins il ne met pas à jour le paragraphe entier.
Donc, la prochaine étape est de le faire mettre à jour pour afficher le numéro qui est à l'intérieur de l'entrée de sorte que les valeurs sont synchronisées ensemble.
Nous n'avons donc pas vu comment nous obtenons les données d'une entrée.
Comment obtenons-nous la valeur actuelle.
Je vais vous montrer ici en sélectionnant l'entrée.
Donc document que le sélecteur de requête et nous allons le faire dans l'entrée de la console et je vais le sauver à une variable, donc appeler le document d'entrée var taqueria sélectionner votre entrée et puis nous allons faire une valeur daat entrée.
Donc, cette valeur va être une chaîne de ce qui est contenu dans cette entrée quelle que soit la valeur est.
Donc, si je changer cela à 7 et je tourne le code à nouveau, je reçois 7.
Si je le fais un nombre énorme et cette fois je le fais encore il reflète quelle valeur est à l'intérieur de cette entrée.
Donc nous allons faire usage de cela en changeant cela au lieu de la valeur de la chaîne modifiée.
Nous allons le changer pour être Nahm valeur de point d'entrée de sorte que prendra la valeur d'ici et de changer le score gagnant affiche le contenu du texte.
Donc, nous actualiser et je mettre à jour ce et vous pouvez maintenant soit en synchronisation ensemble.
Donc, comme je mettre à jour ce pour être un à trois mon jeu ou le score gagnant affichage également mises à jour de 1 à 3.
Donc, bien sûr, nous ne jouons pas à 123.
Nous jouons toujours à cinq.
Et c'est parce que notre logique ne reflète pas cette nouvelle valeur d'entrée tout ce qu'il reflète est notre score gagnant original de 5.
Donc, nous voulons aussi changer ici sont gagnant score pour être égal à la valeur d'entrée numb et enregistrer.
Et maintenant, essayons de changer cela, donc nous jouons à trois et nous cliquons et vous remarquerez que nous obtenons un comportement bizarre.
Donc, il ne s'est même pas arrêté à cinq heures.
Ça continue toujours.
Donc, c'est un bogue amusant qui a à voir avec différents types de chaînes de données et de chiffres et de les comparer les égaux doubles par rapport à trois égaux.
Donc, pour aller au fond, nous allons faire quelques inconvénients. enregistrement.
Donc, nous savons que le point crucial de tout cela est cette ligne ici ou cette ligne ici où nous vérifions si le joueur a un si le score du joueur égale le score gagnant.
C'est alors que nous avons mis le jeu sur pour être vrai.
Et ce n'est pas le cas en ce moment parce que le jeu plus.
Si nous changeons la partition.
Le jeu ne change jamais.
C'est toujours faux.
Alors quelque chose ne va pas avec cette ligne.
Alors faisons un journal annulé et nous allons faire deux choses.
Imprimons simplement le score du joueur 1 et nous imprimons le score gagnant et nous pouvons les séparer par des virgules et ils vont simplement les imprimer sur la même ligne.
Juste une note rapide à l'aide des journaux Comstock est comment nous allons déboguer pour l'instant, mais nous allons parler de moyens plus avancés de débogage plus tard.
Donc, je vais rafraîchir et si nous commençons nous jetons un coup d'oeil à l'augmentation joueur 1 score et vous pouvez voir que nous obtenons trois et nous le comparons au numéro cinq.
Ainsi, le score du joueur 1 est de trois points gagnants est de cinq.
Mais dès que je change cela pour être disons 7 et maintenant je clique.
Joueur 1, nous comparons maintenant le score du joueur 1 qui est le nombre quatre au score gagnant qui est la chaîne sept.
Alors rafraîchissez-vous si je commence avec cinq.
Ça marche très bien.
Mais si je change cela et maintenant nous le comparons au nombre et la chaîne et cela ne va pas travailler pour nous parce que nous faisons triple égaux ici.
Donc nous pourrions faire des doubles égaux, mais vous savez que je ne suis pas un fan de cela.
Donc, ce que nous allons faire à la place est de descendre ici et juste prendre cela et mettre cette valeur et le transformer en une chaîne.
Donc nombre juste comme ce capital et le nombre, puis passer et mettre la valeur qui va ensuite le transformer en une chaîne et de définir que le score gagnant.
Nous étions donc frais.
Maintenant, cela fonctionne très bien.
Nous arrivons à cinq, mais si nous changeons aussi cela pour être à notre jeu est plus à 2.
Il y a un petit problème dont nous devons nous concentrer, c'est-à-dire si nous jouons un jeu à cinq, ce que nous avons commencé à faire.
Et si je décide à mi-parcours que je veux changer le score gagnant au score maximum.
Notre code à l'heure actuelle ne fonctionne pas très bien parce que si je change cela maintenant, nous ne jouons qu'à trois.
Nous avons deux façons différentes de traiter cela.
Le premier est de réinitialiser le score et tout revenir à zéro.
Et l'autre continue de jouer à cinq.
Mais ce qui se passe réellement, c'est que nous jouons à trois, mais nous avons déjà dépassé trois.
Donc, parce que nous avons déjà passé, notre code ne fonctionne pas vraiment plus parce que nous sommes en train de mentir, il suffit de vérifier est le joueur à marquer égal au score gagnant.
Ce n'est pas de vérifier si c'est plus grand que le score gagnant.
Donc, si nous pouvions changer cela.
Donc, il dit si c'est plus grand que le score gagnant, puis le jeu est terminé et c'est très bien.
Mais je pense que la meilleure solution est de réinitialiser à zéro quand nous changeons le score maximum parce que nous n'avions jamais vraiment changé le score maximum à mi-parcours d'un jeu de toute façon nous voudrions commencer le jeu plus et l'autre raison que je veux que nous fassions ceci Est-ce un bon cas d'utilisation pour un petit refactor.
Donc, quand nous changeons la partition, voici le score gagnant.
Nous voulons réinitialiser le jeu qui est la même logique que nous avons ici.
Donc, nous allons le faire tout simplement simplement pour copier ce code et faire une nouvelle fonction appelée reset.
Donc, la fonction de réinitialisation suffit de mettre tout ce code là-dedans et une fois que le nombre d'entrée change, nous allons juste exécuter la réinitialisation.
Donc vous verrez que je réinitialise ici en jouant à cinq.
Cela fonctionne très bien.
Nous arrivons à cinq heures.
Je clique sur réinitialiser et nous n'avons pas appelé la fonction de réinitialisation à l'intérieur de cet écouteur d'événement donc nous devons ajouter notre appel de fonction de réinitialisation.
Et maintenant, si nous rafraîchissons nous arrivons à 5.
Je clique sur réinitialiser.
C'est bien.
Et maintenant, si je suis au milieu d'un match et je change le score, il nous réinitialise et maintenant nous jouons à 1.
Et il fonctionne.
Ou si je change.
Donc nous jouons maintenant à 7.
Il nous remet à zéro.
Donc, si je décide que vous savez que c'est effectivement un jeu allant à 2 au lieu de cela, il change la spécification à zéro.
Et nous n'avons pas à nous soucier de la façon de le gérer.
Si nous changeons à mi-chemin.
Donc, ce que nous faisons est juste la réinitialisation a fait une fonction distincte pour sécher le code plutôt que de dupliquer ce ici et ici.
Voilà pour l'instant.
C'est tout ce que nous devons faire.
Certains d'entre vous peut se demander si ce code est vraiment la meilleure façon que nous pourrions éventuellement faire cela.
La réponse est non.
Et si vous regardez de près, vous verrez que c'est extrêmement similaire.
C'est essentiellement le même sauf que nous faisons un ici et P2 ici.
Mais tous les autres mots sont les mêmes.
Il y a donc des façons plus avancées de refactoriser cela de rendre cela un peu mieux.
Mais je ne vais pas le faire ici parce que tout ce que je veux me concentrer sur est conceptuellement comment nous pouvons prendre les auditeurs d'événement javascript sélecteurs relation dominante et l'IMO HD interactif et c'est ce sur quoi je veux me concentrer.
Mais il suffit de savoir que nous allons voir des façons de rendre le code comme ce look un peu mieux être un peu plus court.
Il ya une chose que nous pourrions faire ici et mettre cela à l'écoute des événements.
Nous pourrions simplement remplacer l'entrée insensible ici par le mot, il s'agit d'un changement mineur, mais nous pouvons le faire et juste raccourcir le code un peu.
Donc, si je change cela, nous jouons maintenant à trois.
Tout fonctionne toujours exactement la même chose.
Je viens d'utiliser le mot-clé ce qui se réfère à tout ce que l'événement a été l'écoute sur lequel était numéro d'entrée.
D'accord, voilà pour cette leçon.
Comme je l'ai mentionné dans le prochain projet, nous allons construire quelque chose de plus substantiel et je vous promets qu'il sera beaucoup mieux que cela a fait ici.