1
00:00:00,180 --> 00:00:02,530
Nous avons maintenant deux choses sur lesquelles nous pouvons nous concentrer.

2
00:00:02,610 --> 00:00:10,110
Le premier est de changer l'affichage ici pour être vert sur le joueur gagnant et celui-ci est assez simple.

3
00:00:10,140 --> 00:00:14,670
Et le second est d'obtenir le bouton de réinitialisation pour travailler afin que nous pouvons réinitialiser et de jouer à nouveau.

4
00:00:14,850 --> 00:00:20,530
Commençons par le changement de couleur et je vais le faire en définissant une classe dans un fichier CSSA.

5
00:00:20,580 --> 00:00:25,420
J'ai donc besoin de faire un dossier C S S et je vais juste appeler ce scorekeeper.

6
00:00:25,590 --> 00:00:35,790
C Ss alors je vais lier à lui au lieu de mon pointeur de fichier HDMI Dotsie SS et sauver.

7
00:00:35,790 --> 00:00:47,090
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.

8
00:00:47,190 --> 00:00:49,620
Et juste pour vérifier que ça ressemble à la façon dont je le veux.

9
00:00:49,620 --> 00:00:59,540
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.

10
00:00:59,610 --> 00:01:03,090
Et si je rafraîchir vous pouvez voir que nous obtenons un 0 vert.

11
00:01:03,090 --> 00:01:05,700
C'est exactement ce que nous voulons comme un accroissement.

12
00:01:05,730 --> 00:01:09,260
Bien sûr, nous voulons qu'il commence en noir et n'ajoute que la classe.

13
00:01:09,360 --> 00:01:14,320
Lorsque le jeu est terminé, nous devons revenir à notre javascript et nous débarrasser de cela.

14
00:01:14,520 --> 00:01:17,030
Donc ça revient au noir.

15
00:01:17,310 --> 00:01:18,910
Allez à notre javascript maintenant.

16
00:01:19,530 --> 00:01:24,870
Nous allons commencer pour le joueur 1 et nous devons vérifier si le score du joueur 1 est égal au score gagnant.

17
00:01:24,870 --> 00:01:26,640
Cela signifie que le joueur un a gagné.

18
00:01:26,760 --> 00:01:33,360
Donc, ici, nous allons ajouter à la liste de classe d'affichage du joueur 1.

19
00:01:33,360 --> 00:01:37,570
Nous allons ajouter le gagnant de la classe et c'est tout ce que nous avons à faire.

20
00:01:37,830 --> 00:01:44,500
Donc, si nous nous rafraîchissons, vous verrez que je incrémenter joueur 1 score et obtenir à 5.

21
00:01:44,520 --> 00:01:46,580
Cette classe a été ajoutée.

22
00:01:46,830 --> 00:01:49,390
Donc, si on regarde ici, je vais l'inspecter.

23
00:01:49,410 --> 00:01:54,090
Il n'y a pas de classe et je continue d'incrémenter jusqu'à ce que nous arrivons à 5.

24
00:01:54,090 --> 00:01:59,640
Faites attention ici et nous obtenons un gagnant de la même classe ajouté Quand nous arrivons à 5.

25
00:01:59,910 --> 00:02:02,900
Nous ferons la même chose pour le joueur 2.

26
00:02:03,150 --> 00:02:07,230
Donc, si le joueur deux scores le score gagnant va changer le joueur à afficher.

27
00:02:07,710 --> 00:02:10,480
Vérifions l'augmentation à 5.

28
00:02:10,650 --> 00:02:12,060
Génial.

29
00:02:13,110 --> 00:02:15,030
Tout semble fonctionner très bien.

30
00:02:15,450 --> 00:02:19,260
Donc la prochaine pièce est obtenir le bouton de réinitialisation pour travailler dès maintenant.

31
00:02:19,350 --> 00:02:22,490
Si nous obtenons le jeu plus il est toujours défini pour être vrai.

32
00:02:22,500 --> 00:02:24,990
Il n'y a aucun moyen de changer de jeu.

33
00:02:24,990 --> 00:02:28,830
Donc cliquer sur le bouton de réinitialisation doit déclencher quelques lignes différentes de code.

34
00:02:28,860 --> 00:02:30,540
Le premier que vous voulez changer.

35
00:02:30,540 --> 00:02:33,390
Joueur 1 et le joueur à marquer à zéro.

36
00:02:33,420 --> 00:02:43,860
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.

37
00:02:44,130 --> 00:02:51,180
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.

38
00:02:51,240 --> 00:02:57,200
Donc, la première chose dont nous avons besoin pour sélectionner le bouton que nous lui avons donné id égal reset.

39
00:02:57,390 --> 00:03:00,170
Nous devons donc aller ici et le sélectionner.

40
00:03:00,330 --> 00:03:02,590
Donc je vais le faire avec les autres boutons jusqu'à présent.

41
00:03:02,640 --> 00:03:16,400
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.

42
00:03:16,580 --> 00:03:17,820
Faire un journal constant.

43
00:03:18,060 --> 00:03:22,900
Réinitialiser le bouton de réinitialisation et actualiser

44
00:03:22,900 --> 00:03:26,050
Si nous regardons dans notre console, nous obtenons notre bouton correct.

45
00:03:26,070 --> 00:03:27,960
Il a été annulé est enregistré.

46
00:03:28,390 --> 00:03:53,910
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é.

47
00:03:54,360 --> 00:03:57,780
Alors la logique que nous avons discuté comme nous devons définir.

48
00:03:57,780 --> 00:04:00,330
Joueur 1 et le joueur à marquer à zéro.

49
00:04:00,450 --> 00:04:02,440
Donc, c'est assez simple.

50
00:04:02,460 --> 00:04:05,890
Joueur 1 score zéro joueur à marquer est zéro.

51
00:04:06,330 --> 00:04:14,790
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.

52
00:04:14,850 --> 00:04:20,050
Rien ne semble se produire et c'est parce que nous ne changeons le score en javascript.

53
00:04:20,100 --> 00:04:27,050
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.

54
00:04:27,300 --> 00:04:34,020
Donc, nous voulons faire un contenu texte d'affichage et nous pouvons simplement le mettre à zéro.

55
00:04:34,020 --> 00:04:37,180
Nous pourrions également fixer le score à 1.

56
00:04:37,320 --> 00:04:38,690
Ils devraient tous deux être zéro.

57
00:04:39,090 --> 00:04:42,700
Donc, même chose Pete pour afficher le contenu du texte est de zéro.

58
00:04:42,930 --> 00:04:46,060
Si nous rafraîchissons maintenant et nous arrivons à 5.

59
00:04:47,280 --> 00:04:48,410
Ils remontent à zéro.

60
00:04:48,450 --> 00:04:50,750
Nous allons donc nous rapprocher.

61
00:04:52,360 --> 00:04:55,120
Et cliquez sur réinitialiser les deux revenir à zéro.

62
00:04:55,500 --> 00:04:58,030
Ensuite, supprimons la clause gagnante.

63
00:04:58,090 --> 00:05:01,430
Est-ce que ce faire le moyen facile en supprimant la classe gagnante des deux.

64
00:05:01,540 --> 00:05:03,650
Donc, nous ne verrons même pas qui l'a.

65
00:05:03,730 --> 00:05:05,260
Nous allons simplement le supprimer des deux.

66
00:05:05,300 --> 00:05:07,620
C'est juste une question d'un affichage.

67
00:05:07,780 --> 00:05:12,070
Les listes de classes éliminent le gagnant.

68
00:05:12,310 --> 00:05:16,440
Donc, cela permettra de se débarrasser de la clause et sera également le faire sur l'affichage.

69
00:05:16,480 --> 00:05:20,830
Donc, peu importe ce que l'on a, il n'a pas d'importance parce que nous sommes le retirer des deux.

70
00:05:21,940 --> 00:05:25,160
Donc maintenant, si nous jouons un jeu, nous obtenons un gagnant.

71
00:05:25,600 --> 00:05:26,850
Je clique sur réinitialiser.

72
00:05:26,920 --> 00:05:30,560
Ils remontent tous deux à un simple texte vierge.

73
00:05:31,140 --> 00:05:33,700
Mais comme vous pouvez le voir, j'arrive à cinq.

74
00:05:33,790 --> 00:05:36,340
Je clique sur le bouton de réinitialisation ne fonctionne toujours pas.

75
00:05:36,610 --> 00:05:39,930
Et c'est parce que le jeu est encore vrai.

76
00:05:40,110 --> 00:05:42,900
Et donc aucun de notre code au lieu de ces événements va fonctionner.

77
00:05:43,090 --> 00:05:45,000
Donc la dernière chose que nous devons faire est de mettre.

78
00:05:45,100 --> 00:05:50,340
Game over retour à faux et qui devrait nous permettre de continuer à jouer.

79
00:05:50,820 --> 00:05:53,350
Donc je vais rafraîchir incrémentales.

80
00:05:53,520 --> 00:05:55,530
Commençons un jeu.

81
00:05:55,540 --> 00:05:55,990
Voilà.

82
00:05:55,990 --> 00:05:57,240
Je ne peux plus jouer.

83
00:05:57,250 --> 00:06:04,610
Je clique sur réinitialiser et maintenant le jeu est de retour à faux et je peux jouer encore et puis continuer.

84
00:06:04,840 --> 00:06:07,220
C'est donc la fonctionnalité de base ici.

85
00:06:07,320 --> 00:06:14,650
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.

86
00:06:14,640 --> 00:06:16,520
Donc ce n'est pas toujours cinq.

87
00:06:16,930 --> 00:06:27,710
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.

88
00:06:27,970 --> 00:06:29,750
Nous avons donc quelques étapes pour y arriver.

89
00:06:29,760 --> 00:06:35,500
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.

90
00:06:35,740 --> 00:06:37,330
C'est la seule entrée sur la page.

91
00:06:37,360 --> 00:06:40,410
Donc nous n'avons pas nécessairement à lui donner un ID ou quoi que ce soit.

92
00:06:40,420 --> 00:06:46,790
Donc, je vais aller ici et de le sélectionner avec mes autres sélecteurs var.

93
00:06:47,050 --> 00:06:58,030
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.

94
00:06:58,020 --> 00:07:01,400
Nous pourrions également spécifier seulement où.

95
00:07:01,420 --> 00:07:06,540
Type est égal au nombre car il pourrait y avoir d'autres entrées.

96
00:07:06,730 --> 00:07:08,070
Dans notre cas je vais garder simple.

97
00:07:08,080 --> 00:07:09,330
Il n'y a qu'une seule entrée.

98
00:07:09,460 --> 00:07:11,190
Donc, cela fonctionnera très bien.

99
00:07:11,810 --> 00:07:12,120
D'ACCORD.

100
00:07:12,120 --> 00:07:14,420
Nous avons donc sélectionné cette entrée.

101
00:07:14,440 --> 00:07:16,390
Alors maintenant, ajoutons un événement.

102
00:07:16,420 --> 00:07:26,920
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.

103
00:07:26,950 --> 00:07:29,200
Donc, ce que nous devons faire est d'ajouter un événement.

104
00:07:29,280 --> 00:07:40,190
Donc, nous allons juste aller engourdir et mettre Dot avait l'événement Lessner cliquez simplement le faire de cette façon ici.

105
00:07:41,050 --> 00:07:44,750
Fonction et tous faire une alerte.

106
00:07:45,300 --> 00:07:54,720
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.

107
00:07:54,920 --> 00:07:58,880
Parce que oui, nous pouvons changer la valeur avec un clic comme je viens de le faire.

108
00:07:59,470 --> 00:08:07,150
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.

109
00:08:07,360 --> 00:08:11,110
Donc, si j'utilise les petits boutons ici un événement rapide se déclenche.

110
00:08:11,110 --> 00:08:14,670
Sinon, si je n'utilise que mon clavier, nous n'obtenons pas un événement rapide.

111
00:08:14,680 --> 00:08:19,680
Donc, il ya un autre type d'événement qui est beaucoup mieux dans ce cas, qui est appelé changement.

112
00:08:19,770 --> 00:08:25,240
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é.

113
00:08:25,240 --> 00:08:27,840
Si c'est parce que j'ai cliqué ou appuyez sur la touche Supprimer.

114
00:08:27,850 --> 00:08:35,000
Donc, nous allons changer l'alerte ici pour dire changé l'entrée, puis rafraîchir.

115
00:08:35,320 --> 00:08:39,900
Et si je clique ici pour le changer, il me dit que vous avez modifié l'entrée.

116
00:08:40,090 --> 00:08:47,960
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.

117
00:08:47,980 --> 00:09:00,650
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.

118
00:09:00,700 --> 00:09:02,700
J'espère que ce n'est pas notre score réussi.

119
00:09:02,740 --> 00:09:04,850
Définitivement long jeu de ciseaux de papier rock.

120
00:09:05,080 --> 00:09:08,530
Donc, la première chose est de mettre à jour cette valeur ici.

121
00:09:08,860 --> 00:09:13,020
Donc, juste comme avant, nous avons besoin de sélectionner ce qui est un paragraphe.

122
00:09:13,060 --> 00:09:22,590
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.

123
00:09:23,290 --> 00:09:35,070
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é.

124
00:09:36,640 --> 00:09:39,310
Juste comme ça et rafraîchir.

125
00:09:39,310 --> 00:09:49,730
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.

126
00:09:49,810 --> 00:09:52,390
Nous voulons seulement changer cette petite partie.

127
00:09:52,390 --> 00:09:55,000
Donc ce que nous voulons utiliser est en fait une autre période.

128
00:09:55,300 --> 00:09:58,950
Donc nous allons revenir en arrière et nous allons ajouter une portée autour du nombre.

129
00:09:59,380 --> 00:10:06,400
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.

130
00:10:06,820 --> 00:10:11,680
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.

131
00:10:11,710 --> 00:10:14,780
Rappelez-vous juste qu'il s'agit d'une portée au lieu d'un paragraphe.

132
00:10:14,920 --> 00:10:17,010
Et c'est le seul comme ça sur notre page.

133
00:10:17,110 --> 00:10:18,060
Nous reviendrons donc.

134
00:10:18,310 --> 00:10:30,170
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.

135
00:10:30,970 --> 00:10:39,520
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.

136
00:10:39,550 --> 00:10:40,690
C'est donc tout ce que nous avons à écrire.

137
00:10:40,810 --> 00:10:41,930
P espace.

138
00:10:41,930 --> 00:10:42,710
Envergure.

139
00:10:43,240 --> 00:10:44,490
Et nous allons sauver.

140
00:10:44,980 --> 00:10:49,970
Et maintenant, allons de l'avant et mettre à jour le score gagnant affiché ici au lieu du paragraphe.

141
00:10:49,990 --> 00:10:53,710
Donc l'affichage de score gagnant comme ça.

142
00:10:54,010 --> 00:10:56,020
Et ce ne sera toujours pas parfait.

143
00:10:56,080 --> 00:11:02,550
Il va seulement mettre à jour la valeur a changé à chaque fois mais au moins il ne met pas à jour le paragraphe entier.

144
00:11:02,950 --> 00:11:10,840
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.

145
00:11:10,880 --> 00:11:13,920
Nous n'avons donc pas vu comment nous obtenons les données d'une entrée.

146
00:11:13,960 --> 00:11:15,940
Comment obtenons-nous la valeur actuelle.

147
00:11:15,940 --> 00:11:18,100
Je vais vous montrer ici en sélectionnant l'entrée.

148
00:11:18,250 --> 00:11:32,750
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.

149
00:11:33,040 --> 00:11:39,040
Donc, cette valeur va être une chaîne de ce qui est contenu dans cette entrée quelle que soit la valeur est.

150
00:11:39,040 --> 00:11:43,800
Donc, si je changer cela à 7 et je tourne le code à nouveau, je reçois 7.

151
00:11:44,120 --> 00:11:51,520
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.

152
00:11:51,520 --> 00:11:56,950
Donc nous allons faire usage de cela en changeant cela au lieu de la valeur de la chaîne modifiée.

153
00:11:56,950 --> 00:12:12,710
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.

154
00:12:13,370 --> 00:12:18,690
Donc, nous actualiser et je mettre à jour ce et vous pouvez maintenant soit en synchronisation ensemble.

155
00:12:19,030 --> 00:12:26,900
Donc, comme je mettre à jour ce pour être un à trois mon jeu ou le score gagnant affichage également mises à jour de 1 à 3.

156
00:12:27,340 --> 00:12:30,580
Donc, bien sûr, nous ne jouons pas à 123.

157
00:12:30,580 --> 00:12:32,350
Nous jouons toujours à cinq.

158
00:12:32,740 --> 00:12:40,280
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.

159
00:12:40,480 --> 00:12:51,430
Donc, nous voulons aussi changer ici sont gagnant score pour être égal à la valeur d'entrée numb et enregistrer.

160
00:12:51,430 --> 00:12:58,790
Et maintenant, essayons de changer cela, donc nous jouons à trois et nous cliquons et vous remarquerez que nous obtenons un comportement bizarre.

161
00:12:58,840 --> 00:13:00,940
Donc, il ne s'est même pas arrêté à cinq heures.

162
00:13:00,970 --> 00:13:02,370
Ça continue toujours.

163
00:13:02,650 --> 00:13:10,300
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.

164
00:13:10,300 --> 00:13:14,200
Donc, pour aller au fond, nous allons faire quelques inconvénients. enregistrement.

165
00:13:14,200 --> 00:13:24,700
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.

166
00:13:24,820 --> 00:13:26,790
C'est alors que nous avons mis le jeu sur pour être vrai.

167
00:13:27,130 --> 00:13:29,610
Et ce n'est pas le cas en ce moment parce que le jeu plus.

168
00:13:29,620 --> 00:13:31,460
Si nous changeons la partition.

169
00:13:31,450 --> 00:13:33,730
Le jeu ne change jamais.

170
00:13:33,820 --> 00:13:35,460
C'est toujours faux.

171
00:13:35,710 --> 00:13:37,660
Alors quelque chose ne va pas avec cette ligne.

172
00:13:37,780 --> 00:13:41,860
Alors faisons un journal annulé et nous allons faire deux choses.

173
00:13:41,870 --> 00:13:49,700
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.

174
00:13:49,720 --> 00:13:56,820
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.

175
00:13:57,010 --> 00:14:07,470
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.

176
00:14:07,540 --> 00:14:10,670
Ainsi, le score du joueur 1 est de trois points gagnants est de cinq.

177
00:14:10,900 --> 00:14:15,250
Mais dès que je change cela pour être disons 7 et maintenant je clique.

178
00:14:15,250 --> 00:14:23,160
Joueur 1, nous comparons maintenant le score du joueur 1 qui est le nombre quatre au score gagnant qui est la chaîne sept.

179
00:14:23,440 --> 00:14:27,090
Alors rafraîchissez-vous si je commence avec cinq.

180
00:14:27,110 --> 00:14:28,420
Ça marche très bien.

181
00:14:28,780 --> 00:14:36,680
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.

182
00:14:36,790 --> 00:14:40,590
Donc nous pourrions faire des doubles égaux, mais vous savez que je ne suis pas un fan de cela.

183
00:14:40,610 --> 00:14:46,670
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.

184
00:14:46,780 --> 00:14:57,130
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.

185
00:14:57,220 --> 00:14:58,020
Nous étions donc frais.

186
00:14:58,020 --> 00:15:02,210
Maintenant, cela fonctionne très bien.

187
00:15:02,760 --> 00:15:11,120
Nous arrivons à cinq, mais si nous changeons aussi cela pour être à notre jeu est plus à 2.

188
00:15:11,230 --> 00:15:17,000
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.

189
00:15:17,170 --> 00:15:22,310
Et si je décide à mi-parcours que je veux changer le score gagnant au score maximum.

190
00:15:22,390 --> 00:15:28,920
Notre code à l'heure actuelle ne fonctionne pas très bien parce que si je change cela maintenant, nous ne jouons qu'à trois.

191
00:15:28,960 --> 00:15:30,630
Nous avons deux façons différentes de traiter cela.

192
00:15:30,640 --> 00:15:34,610
Le premier est de réinitialiser le score et tout revenir à zéro.

193
00:15:34,880 --> 00:15:37,790
Et l'autre continue de jouer à cinq.

194
00:15:38,120 --> 00:15:43,010
Mais ce qui se passe réellement, c'est que nous jouons à trois, mais nous avons déjà dépassé trois.

195
00:15:43,300 --> 00:15:51,390
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.

196
00:15:51,400 --> 00:15:53,790
Ce n'est pas de vérifier si c'est plus grand que le score gagnant.

197
00:15:54,040 --> 00:15:55,170
Donc, si nous pouvions changer cela.

198
00:15:55,180 --> 00:16:00,830
Donc, il dit si c'est plus grand que le score gagnant, puis le jeu est terminé et c'est très bien.

199
00:16:00,970 --> 00:16:18,720
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.

200
00:16:18,880 --> 00:16:22,410
Donc, quand nous changeons la partition, voici le score gagnant.

201
00:16:22,610 --> 00:16:27,370
Nous voulons réinitialiser le jeu qui est la même logique que nous avons ici.

202
00:16:27,430 --> 00:16:34,720
Donc, nous allons le faire tout simplement simplement pour copier ce code et faire une nouvelle fonction appelée reset.

203
00:16:34,720 --> 00:16:44,780
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.

204
00:16:44,890 --> 00:16:48,920
Donc vous verrez que je réinitialise ici en jouant à cinq.

205
00:16:48,940 --> 00:16:49,960
Cela fonctionne très bien.

206
00:16:49,960 --> 00:16:50,950
Nous arrivons à cinq heures.

207
00:16:51,100 --> 00:16:59,840
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.

208
00:16:59,950 --> 00:17:02,370
Et maintenant, si nous rafraîchissons nous arrivons à 5.

209
00:17:02,770 --> 00:17:03,980
Je clique sur réinitialiser.

210
00:17:04,030 --> 00:17:04,970
C'est bien.

211
00:17:05,140 --> 00:17:11,890
Et maintenant, si je suis au milieu d'un match et je change le score, il nous réinitialise et maintenant nous jouons à 1.

212
00:17:11,890 --> 00:17:12,800
Et il fonctionne.

213
00:17:13,100 --> 00:17:14,220
Ou si je change.

214
00:17:14,230 --> 00:17:17,710
Donc nous jouons maintenant à 7.

215
00:17:17,800 --> 00:17:19,730
Il nous remet à zéro.

216
00:17:20,020 --> 00:17:27,190
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.

217
00:17:27,280 --> 00:17:29,910
Et nous n'avons pas à nous soucier de la façon de le gérer.

218
00:17:29,920 --> 00:17:31,380
Si nous changeons à mi-chemin.

219
00:17:31,510 --> 00:17:40,900
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.

220
00:17:40,960 --> 00:17:41,940
Voilà pour l'instant.

221
00:17:41,950 --> 00:17:43,510
C'est tout ce que nous devons faire.

222
00:17:43,630 --> 00:17:48,610
Certains d'entre vous peut se demander si ce code est vraiment la meilleure façon que nous pourrions éventuellement faire cela.

223
00:17:48,620 --> 00:17:49,590
La réponse est non.

224
00:17:49,850 --> 00:17:54,500
Et si vous regardez de près, vous verrez que c'est extrêmement similaire.

225
00:17:54,490 --> 00:18:00,150
C'est essentiellement le même sauf que nous faisons un ici et P2 ici.

226
00:18:00,160 --> 00:18:01,930
Mais tous les autres mots sont les mêmes.

227
00:18:02,470 --> 00:18:06,390
Il y a donc des façons plus avancées de refactoriser cela de rendre cela un peu mieux.

228
00:18:06,490 --> 00:18:18,170
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.

229
00:18:18,380 --> 00:18:25,010
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.

230
00:18:25,030 --> 00:18:29,860
Il ya une chose que nous pourrions faire ici et mettre cela à l'écoute des événements.

231
00:18:30,050 --> 00:18:38,620
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.

232
00:18:38,740 --> 00:18:41,650
Donc, si je change cela, nous jouons maintenant à trois.

233
00:18:41,650 --> 00:18:43,870
Tout fonctionne toujours exactement la même chose.

234
00:18:43,880 --> 00:18:50,770
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.

235
00:18:50,990 --> 00:18:52,650
D'accord, voilà pour cette leçon.

236
00:18:52,780 --> 00:18:59,010
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.