1
00:00:00,180 --> 00:00:02,530
Entonces ahora tenemos dos cosas diferentes en las que nos podemos enfocar.

2
00:00:02,610 --> 00:00:09,540
El primero es cambiar la pantalla aquí para que sea verde en el jugador ganador y esa es

3
00:00:09,540 --> 00:00:10,110
bastante simple.

4
00:00:10,140 --> 00:00:14,670
Y el segundo es hacer que el botón de reinicio funcione para que podamos restablecerlo y volver a jugar.

5
00:00:14,850 --> 00:00:20,530
Comencemos con el cambio de color y lo haremos definiendo una clase en un archivo CSSA.

6
00:00:20,580 --> 00:00:25,420
Entonces necesito crear un archivo C S S y voy a llamar a ese gestor de puntaje.

7
00:00:25,590 --> 00:00:35,790
C Ss luego voy a vincular a él en lugar de mi puntaje de archivos HDMI Dotsie SS y guardar.

8
00:00:35,790 --> 00:00:43,080
lo llamaré invierno y voy a decir que el color es verde y eso es todo lo que necesitamos y guardaremos.

9
00:00:43,080 --> 00:00:47,090
Luego iré a mi archivo CSSA y definiré una clase y

10
00:00:47,190 --> 00:00:49,620
Y solo para verificar que se vea como yo quiero.

11
00:00:49,620 --> 00:00:57,270
Vamos a agregarlo al lapso, por lo que dirán que la clase es igual y le daremos una clase de ganador para la

12
00:00:57,270 --> 00:00:59,540
pantalla del jugador 1 desde el principio.

13
00:00:59,610 --> 00:01:03,090
Y si actualizo puede ver que obtenemos un 0 verde.

14
00:01:03,090 --> 00:01:05,700
Eso es exactamente lo que queremos como un incremento.

15
00:01:05,730 --> 00:01:09,260
Por supuesto, queremos que comience en negro y solo agreguemos la clase.

16
00:01:09,360 --> 00:01:14,320
Cuando el juego termine, debemos volver a nuestro javascript y deshacernos de esto.

17
00:01:14,520 --> 00:01:17,030
Entonces vuelve a negro.

18
00:01:17,310 --> 00:01:18,910
Vaya a nuestro javascript ahora.

19
00:01:19,530 --> 00:01:24,840
Empezaremos por el jugador 1 y debemos verificar si la puntuación del jugador 1 es igual a la puntuación ganadora.

20
00:01:24,870 --> 00:01:26,640
Eso significa que el jugador uno ha ganado.

21
00:01:26,760 --> 00:01:33,360
Así que aquí vamos a agregar a la lista de clase de visualización del jugador 1.

22
00:01:33,360 --> 00:01:37,570
Vamos a agregar el ganador de la clase y eso es todo lo que tenemos que hacer.

23
00:01:37,830 --> 00:01:44,500
Por lo tanto, si actualizamos, verá como incremente la puntuación del jugador 1 y llegue a 5.

24
00:01:44,520 --> 00:01:46,580
Esa clase ha sido agregada.

25
00:01:46,830 --> 00:01:49,390
Entonces, si echamos un vistazo aquí, lo inspeccionaré.

26
00:01:49,410 --> 00:01:54,090
No hay clases y sigo incrementando hasta llegar a 5.

27
00:01:54,090 --> 00:01:59,640
Presta atención aquí mismo y obtenemos la clase igual al ganador agregado cuando llegamos a 5.

28
00:01:59,910 --> 00:02:02,900
Así que haremos lo mismo para el Jugador 2.

29
00:02:03,150 --> 00:02:07,230
Entonces, si el jugador dos puntajes el puntaje ganador cambiará el jugador para mostrar.

30
00:02:07,710 --> 00:02:10,480
Vamos a verificar incrementar esto a 5.

31
00:02:10,650 --> 00:02:12,060
Estupendo.

32
00:02:13,110 --> 00:02:15,030
Todo parece estar funcionando bien.

33
00:02:15,450 --> 00:02:19,260
Entonces la próxima pieza es hacer que el botón de reinicio funcione ahora mismo.

34
00:02:19,350 --> 00:02:22,490
Si conseguimos un juego, siempre está configurado para ser cierto.

35
00:02:22,500 --> 00:02:24,990
No hay forma de cambiar el juego.

36
00:02:24,990 --> 00:02:28,830
Por lo tanto, al hacer clic en el botón de reinicio se deben activar algunas líneas de código diferentes.

37
00:02:28,860 --> 00:02:30,540
El primero que quieres cambiar

38
00:02:30,540 --> 00:02:33,390
Puntuación del jugador 1 y jugador para marcar nuevamente a cero.

39
00:02:33,420 --> 00:02:38,820
Queremos cambiar los valores aquí que se muestran en la pantalla del reproductor 1 y en el reproductor

40
00:02:38,820 --> 00:02:43,860
para que sean cero y queremos eliminar esta clase verde de cualquier elemento en el que esté.

41
00:02:44,130 --> 00:02:49,170
Y luego, lo último es que tenemos que asegurarnos de que el juego haya vuelto a ser falso para que

42
00:02:49,170 --> 00:02:51,180
nuestro código y aquí puedan volver a ejecutarse.

43
00:02:51,240 --> 00:02:57,200
Entonces, lo primero que necesitamos para seleccionar el botón es que le demos el id. De reinicio igual.

44
00:02:57,390 --> 00:03:00,170
Entonces tenemos que ir aquí y simplemente seleccionarlo.

45
00:03:00,330 --> 00:03:02,590
Así que lo haré con los otros botones hasta ahora.

46
00:03:02,640 --> 00:03:11,880
El botón Restablecer es igual al punto del documento y haremos otro elemento de obtención por identificación y esta vez la identificación se reiniciará y

47
00:03:13,050 --> 00:03:16,400
se guardará, y luego solo para verificar que funcione.

48
00:03:16,580 --> 00:03:17,820
Haz un registro constante.

49
00:03:18,060 --> 00:03:22,900
Restablecer el botón de reinicio y actualizar.

50
00:03:22,900 --> 00:03:26,050
Si miramos en nuestra consola obtenemos nuestro botón correcto.

51
00:03:26,070 --> 00:03:27,960
Ha sido cancelado se ha registrado.

52
00:03:28,390 --> 00:03:35,220
OK, entonces debemos comenzar agregando nuestro detector de eventos para un clic en ese botón de reinicio, así que

53
00:03:35,610 --> 00:03:45,510
reinicie el clic para que el oyente haga clic en nuestra función de devolución de llamada y todo lo que queremos hacer para comenzar de nuevo simplemente

54
00:03:45,510 --> 00:03:53,490
cancele el clic de ese registro para asegurarse de que funcione y ahí vamos nuestro botón de reinicio ha sido clickeado.

55
00:03:54,360 --> 00:03:57,780
Entonces la lógica, tal como lo discutimos, debemos establecer.

56
00:03:57,780 --> 00:04:00,330
Puntuación del jugador 1 y jugador para marcar nuevamente a cero.

57
00:04:00,450 --> 00:04:02,440
Así que eso es bastante sencillo.

58
00:04:02,460 --> 00:04:05,890
El jugador 1 que puntúa cero jugador para anotar es cero.

59
00:04:06,330 --> 00:04:12,210
Pero si ejecuto esto ahora mismo, solo cambio la puntuación del jugador 1 en el jugador para puntuar a cero e incrementar para que

60
00:04:12,330 --> 00:04:14,790
el jugador uno gane y luego haga clic en reiniciar.

61
00:04:14,850 --> 00:04:20,050
No parece suceder nada y eso es porque solo cambiamos el puntaje en javascript.

62
00:04:20,100 --> 00:04:26,400
Nunca actualizamos los puntajes en la página, así que esas son las variables de visualización P1 y P2 que

63
00:04:26,400 --> 00:04:27,050
necesitamos actualizar.

64
00:04:27,300 --> 00:04:34,020
Así que querremos hacer un contenido de texto de visualización y podemos simplemente configurarlo en cero.

65
00:04:34,020 --> 00:04:37,180
También podríamos establecerlo en 1 puntuación.

66
00:04:37,320 --> 00:04:38,690
Ambos deberían ser cero.

67
00:04:39,090 --> 00:04:42,700
Lo mismo que Pete para mostrar contenido de texto es cero.

68
00:04:42,930 --> 00:04:46,060
Si actualizamos ahora y llegamos a 5.

69
00:04:47,280 --> 00:04:48,410
Ambos vuelven a cero.

70
00:04:48,450 --> 00:04:50,750
Así que vamos a tener un juego más cerrado.

71
00:04:52,360 --> 00:04:55,120
Y haz clic en Restablecer para volver a cero.

72
00:04:55,500 --> 00:04:58,030
A continuación, eliminemos la cláusula de ganador.

73
00:04:58,090 --> 00:05:01,430
¿Esto lo hará de la manera más fácil al eliminar la clase ganadora de ambos?

74
00:05:01,540 --> 00:05:03,650
Entonces ni siquiera vamos a verificar cuál lo tiene.

75
00:05:03,730 --> 00:05:05,260
Lo eliminaremos de ambos.

76
00:05:05,300 --> 00:05:07,620
Es solo cuestión de una exhibición.

77
00:05:07,780 --> 00:05:12,070
Las listas de clase eliminan al ganador.

78
00:05:12,310 --> 00:05:16,440
Entonces eso eliminará la cláusula y también lo hará en la pantalla.

79
00:05:16,480 --> 00:05:20,830
Entonces, cualquiera que tenga uno no importa porque lo estamos eliminando de ambos.

80
00:05:21,940 --> 00:05:25,160
Entonces, si jugamos un juego, obtenemos un ganador.

81
00:05:25,600 --> 00:05:26,850
Hago clic en reiniciar

82
00:05:26,920 --> 00:05:30,560
Ambos vuelven a un texto simple en blanco.

83
00:05:31,140 --> 00:05:33,700
Pero como puedes ver, llego a cinco.

84
00:05:33,790 --> 00:05:36,340
Hago clic en el botón de reinicio todavía no funciona.

85
00:05:36,610 --> 00:05:39,930
Y eso es porque el juego terminó siendo cierto.

86
00:05:40,110 --> 00:05:42,900
Y entonces, ninguno de nuestro código en lugar de estos eventos se ejecutará.

87
00:05:43,090 --> 00:05:45,000
Entonces, lo último que tenemos que hacer es establecer.

88
00:05:45,100 --> 00:05:50,340
El juego vuelve a falso y eso debería permitirnos seguir jugando.

89
00:05:50,820 --> 00:05:53,350
Así que refrescaré incrementales.

90
00:05:53,520 --> 00:05:55,530
Vamos a terminar el juego.

91
00:05:55,540 --> 00:05:55,990
Aquí vamos.

92
00:05:55,990 --> 00:05:57,240
No puedo jugar más.

93
00:05:57,250 --> 00:06:04,610
Hago clic en restablecer y ahora el juego ha vuelto a falso y puedo volver a jugar y luego continuar.

94
00:06:04,840 --> 00:06:07,220
Esa es la funcionalidad central aquí.

95
00:06:07,320 --> 00:06:13,660
Ya hemos hecho casi todo, la última cosa es conseguir que el número de la partida o el puntaje ganador

96
00:06:13,870 --> 00:06:14,650
sea una variable.

97
00:06:14,640 --> 00:06:16,520
Entonces, no siempre son solo cinco.

98
00:06:16,930 --> 00:06:22,750
Así que tenemos esta información y queremos usar esto para que cuando cambie esto a siete, esto represente jugar

99
00:06:22,750 --> 00:06:27,710
a 7 y nuestro puntaje máximo o nuestro puntaje ganador sea siete en lugar de cinco.

100
00:06:27,970 --> 00:06:29,750
Así que tenemos algunos pasos para llegar allí.

101
00:06:29,760 --> 00:06:35,260
Lo primero que debemos hacer es seleccionar esta entrada, ya que puede ver que tenemos un tipo de entrada igual al número.

102
00:06:35,740 --> 00:06:37,330
Es la única entrada en la página.

103
00:06:37,360 --> 00:06:40,410
Entonces, no necesariamente tenemos que darle una identificación ni nada.

104
00:06:40,420 --> 00:06:46,790
Así que voy a ir aquí y simplemente seleccionarlo con mis otros selectores var.

105
00:06:47,050 --> 00:06:55,360
Simplemente llamemos que ninguna entrada es igual a documento y hay muchas formas de obtenerlo. Puede documentar

106
00:06:55,360 --> 00:06:58,030
esa entrada del selector de consultas.

107
00:06:58,020 --> 00:07:01,400
También podríamos especificar solo dónde.

108
00:07:01,420 --> 00:07:06,540
Tipo es igual a número porque podría haber otras entradas.

109
00:07:06,730 --> 00:07:08,070
En nuestro caso, lo mantendré simple.

110
00:07:08,080 --> 00:07:09,330
Solo hay una entrada.

111
00:07:09,460 --> 00:07:11,190
Entonces esto funcionará bien.

112
00:07:11,810 --> 00:07:12,120
DE ACUERDO.

113
00:07:12,120 --> 00:07:14,420
Entonces tenemos esa entrada seleccionada.

114
00:07:14,440 --> 00:07:16,390
Así que ahora agreguemos un evento.

115
00:07:16,420 --> 00:07:22,540
Entonces, lo que queremos que suceda es que cada vez que esto cambie el valor o ese número cambie, queremos

116
00:07:22,530 --> 00:07:26,920
que esto se actualice y queremos que la variable de puntaje ganadora se actualice también.

117
00:07:26,950 --> 00:07:29,200
Entonces, lo que tenemos que hacer es agregar un evento.

118
00:07:29,280 --> 00:07:40,190
Así que simplemente nos quedaremos aturdidos y pondremos el punto en el que el evento Lessner haga clic solo hazlo aquí.

119
00:07:41,050 --> 00:07:44,750
Función y todos hacen una alerta.

120
00:07:45,300 --> 00:07:54,150
en la entrada y lo que verá es que en realidad un oyente de clic no es la mejor herramienta para este trabajo.

121
00:07:54,150 --> 00:07:54,720
Hizo clic

122
00:07:54,920 --> 00:07:58,880
Porque sí podemos cambiar el valor con un clic como lo hice allí.

123
00:07:59,470 --> 00:08:06,910
Pero también puedo presionar eliminar y escribir un número yo mismo y no se activó ningún evento porque no tuve que hacer clic.

124
00:08:07,360 --> 00:08:11,110
Entonces, si uso los pequeños botones, un evento rápido se dispara.

125
00:08:11,110 --> 00:08:14,670
De lo contrario, si uso mi teclado, no obtenemos un evento rápido.

126
00:08:14,680 --> 00:08:19,680
Entonces hay otro tipo de evento que es mucho mejor en este caso, que se llama cambio.

127
00:08:19,770 --> 00:08:25,240
Por lo tanto, un evento de cambio se ejecutará cada vez que cambie el valor y no importa cómo haya cambiado ese valor.

128
00:08:25,240 --> 00:08:27,840
Si fue porque hice clic o presioné la tecla Eliminar.

129
00:08:27,850 --> 00:08:35,000
Cambiemos la alerta aquí para decir que se modificó la entrada y luego actualizar.

130
00:08:35,320 --> 00:08:39,900
Y si hago clic aquí para cambiarlo, me dice que cambiaste la entrada.

131
00:08:40,090 --> 00:08:45,900
Pero si elimino y escribo un número que no implica hacer clic en él, también me dice que

132
00:08:45,900 --> 00:08:47,960
cambio la entrada, así que es genial.

133
00:08:47,980 --> 00:08:52,740
Este es el evento en el que queremos utilizar el evento de cambio cada vez que cambie

134
00:08:52,750 --> 00:08:59,430
el valor, queremos actualizar este número aquí y también queremos actualizar nuestro puntaje de ganancia para que nuestro juego continúe hasta que alcancemos ese

135
00:08:59,430 --> 00:09:00,650
nuevo puntaje de ganancia.

136
00:09:00,700 --> 00:09:02,700
Espero que este no sea nuestro puntaje ganador real.

137
00:09:02,740 --> 00:09:04,850
Definitivamente juego largo de tijeras de papel roca.

138
00:09:05,080 --> 00:09:08,530
Entonces, lo primero es actualizar este valor aquí.

139
00:09:08,860 --> 00:09:13,020
Entonces, como antes, debemos seleccionarlo, que es un párrafo.

140
00:09:13,060 --> 00:09:20,440
Entonces, necesitamos seleccionar nuestro párrafo y voy a hacer un párrafo VAR igual al documento que la etiqueta del selector

141
00:09:21,690 --> 00:09:22,590
de consulta.

142
00:09:23,290 --> 00:09:30,330
Y luego, en este evento rápido, simplemente cambiaremos ese contenido de texto y comenzaremos

143
00:09:30,340 --> 00:09:35,070
simplemente cambiándolo para decir "clic" o digamos "valor cambiado".

144
00:09:36,640 --> 00:09:39,310
Solo así y actualiza.

145
00:09:39,310 --> 00:09:45,470
Ahora, si cambio el valor que cambia el párrafo para decir que el valor ha cambiado, pero este es el mismo problema

146
00:09:45,460 --> 00:09:49,730
con el que nos topamos antes con el H-1, no queremos cambiar todo el párrafo.

147
00:09:49,810 --> 00:09:52,390
Solo queremos cambiar esta pequeña porción.

148
00:09:52,390 --> 00:09:55,000
Entonces, lo que queremos usar es en realidad otro lapso.

149
00:09:55,300 --> 00:09:58,950
Así que volveremos y agregaremos un lapso alrededor del número.

150
00:09:59,380 --> 00:10:04,300
Y este es un uso perfecto para un lapso donde nuevamente podemos usarlo para apuntar solo a una

151
00:10:04,300 --> 00:10:06,400
pequeña porción de un elemento, no a todo.

152
00:10:06,820 --> 00:10:11,380
Y esta vez no voy a darle una idea solo para mostrarte otra forma de seleccionarlo.

153
00:10:11,710 --> 00:10:14,780
Así que recuerda que es un lapso en lugar de un párrafo.

154
00:10:14,920 --> 00:10:17,010
Y es el único así en nuestra página.

155
00:10:17,110 --> 00:10:18,060
Así que volveremos.

156
00:10:18,310 --> 00:10:26,470
Entonces, en lugar de seleccionar el párrafo, crearemos una nueva variable y la llamaremos pantalla de puntuación ganadora y

157
00:10:27,010 --> 00:10:30,170
se seleccionará el selector de consultas de documentos.

158
00:10:30,970 --> 00:10:38,740
Pero en lugar de abarcar solo porque hay otros tramos en la página, queremos seleccionar tramos dentro de

159
00:10:38,740 --> 00:10:39,520
los párrafos.

160
00:10:39,550 --> 00:10:40,690
Entonces eso es todo lo que tenemos que escribir.

161
00:10:40,810 --> 00:10:41,930
Espacio P

162
00:10:41,930 --> 00:10:42,710
Lapso.

163
00:10:43,240 --> 00:10:44,490
Y ahorraremos

164
00:10:44,980 --> 00:10:49,970
Y ahora continuemos y actualicemos el puntaje ganador que se muestra aquí en lugar de párrafo.

165
00:10:49,990 --> 00:10:53,710
Entonces el puntaje ganador se muestra así.

166
00:10:54,010 --> 00:10:56,020
Y aún no va a ser perfecto.

167
00:10:56,080 --> 00:11:02,080
Solo va a actualizar el valor cambiado cada vez, pero al menos no está actualizando todo el párrafo.

168
00:11:02,950 --> 00:11:08,680
se actualice para mostrar el número que está dentro de la entrada para que los valores se sincronicen entre sí.

169
00:11:08,680 --> 00:11:10,840
Entonces, el siguiente paso es lograr que

170
00:11:10,880 --> 00:11:13,920
Así que no hemos visto cómo obtenemos los datos de una entrada.

171
00:11:13,960 --> 00:11:15,940
¿Cómo obtenemos el valor actual?

172
00:11:15,940 --> 00:11:18,100
Voy a mostrarle aquí seleccionando la entrada.

173
00:11:18,250 --> 00:11:24,940
Documente ese selector de consultas y lo vamos a hacer en la entrada de la consola y lo voy a guardar

174
00:11:24,940 --> 00:11:30,790
en una variable así que llámelo var input document taqueria seleccione su entrada y luego haremos un valor

175
00:11:31,630 --> 00:11:32,750
de daat de entrada.

176
00:11:33,040 --> 00:11:39,040
Entonces ese valor va a ser una cadena de lo que sea que esté contenido en esta entrada sea cual sea el valor.

177
00:11:39,040 --> 00:11:43,800
Entonces, si cambio esto a 7 y vuelvo a ejecutar el código, obtengo 7.

178
00:11:44,120 --> 00:11:50,800
Si lo hago un número enorme y esta vez lo hago de nuevo, refleja cualquier valor que esté dentro de

179
00:11:50,800 --> 00:11:51,520
esta entrada.

180
00:11:51,520 --> 00:11:56,950
Así que vamos a hacer uso de eso cambiando esto en lugar de cambiar el valor de la cadena.

181
00:11:56,950 --> 00:12:10,030
Vamos a cambiarlo para que sea el valor de punto de entrada de Nahm, de modo que se tome el valor de aquí y cambie la puntuación ganadora

182
00:12:10,030 --> 00:12:12,710
para mostrar el contenido de texto.

183
00:12:13,370 --> 00:12:18,690
Así que actualizamos y actualizo esto y ahora puede sincronizarse.

184
00:12:19,030 --> 00:12:26,020
medida que actualizo esto para ser de uno a tres, mi juego o la pantalla del puntaje ganador también se actualiza a 1 a 3.

185
00:12:26,020 --> 00:12:26,900
Así que a

186
00:12:27,340 --> 00:12:30,580
Entonces, por supuesto, no estamos jugando a 123.

187
00:12:30,580 --> 00:12:32,350
Todavía estamos jugando a cinco.

188
00:12:32,740 --> 00:12:38,590
Y eso es porque nuestra lógica no refleja este nuevo valor de entrada, todo lo que refleja es nuestra

189
00:12:38,870 --> 00:12:40,280
puntuación ganadora original de 5.

190
00:12:40,480 --> 00:12:51,430
Por lo tanto, también queremos cambiar aquí; la puntuación ganadora equivale al valor de entrada insensible y a guardar.

191
00:12:51,430 --> 00:12:57,700
Y ahora intentemos cambiar esto, así que estamos jugando a tres y hacemos clic y notará que obtenemos

192
00:12:57,700 --> 00:12:58,790
un comportamiento extraño.

193
00:12:58,840 --> 00:13:00,940
Entonces ni siquiera se detuvo a las cinco.

194
00:13:00,970 --> 00:13:02,370
Simplemente continúa para siempre.

195
00:13:02,650 --> 00:13:08,200
Así que este es un error divertido que tiene que ver con diferentes tipos de cadenas de datos y números

196
00:13:08,240 --> 00:13:10,300
y compararlos entre dobles iguales versus triples iguales.

197
00:13:10,300 --> 00:13:14,200
Entonces, para llegar al fondo de esto, hagamos algunos contras. explotación florestal.

198
00:13:14,200 --> 00:13:21,220
Entonces, sabemos que el quid de todo esto es esta línea aquí o aquí, donde estamos comprobando si el jugador tiene

199
00:13:21,220 --> 00:13:24,700
uno si el puntaje del jugador es igual al puntaje ganador.

200
00:13:24,820 --> 00:13:26,790
Ahí es cuando establecemos el juego para que sea cierto.

201
00:13:27,130 --> 00:13:29,610
Y eso no está sucediendo ahora porque se acabó el juego.

202
00:13:29,620 --> 00:13:31,460
Si cambiamos el puntaje

203
00:13:31,450 --> 00:13:33,730
El juego terminado nunca cambia.

204
00:13:33,820 --> 00:13:35,460
Siempre es falso.

205
00:13:35,710 --> 00:13:37,660
Entonces algo está yendo mal con esta línea.

206
00:13:37,780 --> 00:13:41,860
Hagamos un log anulado y haremos dos cosas.

207
00:13:41,870 --> 00:13:46,900
Imprimamos el puntaje del jugador 1 e imprimiremos el puntaje ganador y podremos separarlos por

208
00:13:46,900 --> 00:13:49,700
comas y solo los imprimirán en la misma línea.

209
00:13:49,720 --> 00:13:54,640
Solo una nota rápida con los registros de Comstock es cómo vamos a depurar por ahora, pero más

210
00:13:54,820 --> 00:13:56,820
adelante hablaremos de formas más avanzadas de depuración.

211
00:13:57,010 --> 00:14:04,010
Así que voy a actualizar y si comenzamos echamos un vistazo a la puntuación de jugador 1 mayor y se puede ver que obtenemos

212
00:14:04,810 --> 00:14:07,470
tres y lo estamos comparando con el número cinco.

213
00:14:07,540 --> 00:14:10,670
Entonces, el puntaje del jugador 1 es tres y el puntaje ganador es cinco.

214
00:14:10,900 --> 00:14:15,250
Pero tan pronto como cambie esto, digamos 7 y ahora hago clic.

215
00:14:15,250 --> 00:14:22,330
El jugador 1 ahora estamos comparando el puntaje del jugador 1, que es el número cuatro con el puntaje ganador, que es la

216
00:14:22,390 --> 00:14:23,160
cadena de siete.

217
00:14:23,440 --> 00:14:27,090
Así que actualiza nuevamente si comienzo con cinco.

218
00:14:27,110 --> 00:14:28,420
Funciona bien.

219
00:14:28,780 --> 00:14:34,490
Pero si cambio esto y ahora lo comparamos con el número y la cadena, y eso no va a funcionar

220
00:14:34,480 --> 00:14:36,680
para nosotros porque hacemos el triple de aquí.

221
00:14:36,790 --> 00:14:40,590
Así que podríamos hacer dobles iguales, pero sabes que no soy fanático de eso.

222
00:14:40,610 --> 00:14:45,790
Entonces, lo que vamos a hacer es bajar aquí y tomar esto y poner ese valor y convertirlo

223
00:14:45,790 --> 00:14:46,670
en una cadena.

224
00:14:46,780 --> 00:14:54,730
número y luego pase y coloque un valor que luego lo convertirá en una cadena y lo establecerá para ser el puntaje ganador.

225
00:14:54,730 --> 00:14:57,130
Así que numere como ese capital y

226
00:14:57,220 --> 00:14:58,020
Así que estábamos frescos.

227
00:14:58,020 --> 00:15:02,210
Ahora esto funciona bien.

228
00:15:02,760 --> 00:15:11,120
Llegamos a cinco, pero si también cambiamos esto para que nuestro juego termine en 2.

229
00:15:11,230 --> 00:15:15,790
Hay un pequeño problema en el que debemos centrarnos, que es si estamos jugando a cinco, que es

230
00:15:15,790 --> 00:15:17,000
lo que comenzamos a hacer.

231
00:15:17,170 --> 00:15:22,310
Y si decido a mitad de camino, quiero cambiar el puntaje ganador en el puntaje máximo.

232
00:15:22,390 --> 00:15:27,160
no lo maneja muy bien porque si cambio esto ahora solo estamos jugando a tres.

233
00:15:27,160 --> 00:15:28,920
Nuestro código en este momento

234
00:15:28,960 --> 00:15:30,630
Tenemos dos formas diferentes de manejar esto.

235
00:15:30,640 --> 00:15:34,610
El primero está restableciendo el puntaje y todo vuelve a cero.

236
00:15:34,880 --> 00:15:37,790
Y el otro sigue jugando a cinco.

237
00:15:38,120 --> 00:15:43,010
Pero lo que realmente está sucediendo es que estamos jugando a tres pero ya pasamos tres.

238
00:15:43,300 --> 00:15:48,160
Entonces, como ya lo aprobamos, nuestro código ya no funciona porque estamos mintiendo, solo estamos

239
00:15:48,160 --> 00:15:51,390
verificando si el jugador marca igual que el puntaje ganador.

240
00:15:51,400 --> 00:15:53,790
No está verificando si es mayor que el puntaje ganador.

241
00:15:54,040 --> 00:15:55,170
Entonces, si pudiéramos cambiar eso.

242
00:15:55,180 --> 00:16:00,830
Entonces, dice que si es mayor que el puntaje ganador, entonces el juego terminó y está bien.

243
00:16:00,970 --> 00:16:08,920
Pero creo que la mejor solución es volver a cero cada vez que cambiemos la puntuación máxima porque nunca habíamos cambiado realmente la puntuación máxima a

244
00:16:08,920 --> 00:16:12,970
mitad de un juego, de todos modos querríamos comenzar el juego, y la

245
00:16:12,970 --> 00:16:18,520
otra razón por la que quiero que hagamos esto. es un buen caso de uso para un refactor corto.

246
00:16:18,880 --> 00:16:22,410
Entonces, cuando cambiemos el puntaje, aquí está el puntaje ganador.

247
00:16:22,610 --> 00:16:27,370
Queremos restablecer el juego, que es la misma lógica con la que estamos corriendo aquí.

248
00:16:27,430 --> 00:16:34,720
Así que lo haremos de forma muy simple, solo copiaremos este código y crearemos una nueva función llamada restablecer.

249
00:16:34,720 --> 00:16:41,780
Entonces, restablecer la función simplemente pone todo este código ahí y luego, una vez que la entrada del

250
00:16:41,770 --> 00:16:44,780
número cambia, simplemente vamos a ejecutar el reinicio.

251
00:16:44,890 --> 00:16:48,920
Entonces verás que reinicio aquí jugando a cinco.

252
00:16:48,940 --> 00:16:49,960
Esto funciona bien

253
00:16:49,960 --> 00:16:50,950
Llegamos a cinco.

254
00:16:51,100 --> 00:16:58,240
Hago clic en Restablecer y no hemos llamado a la función de reinicio dentro de este detector de eventos, así que tenemos que agregar nuestra

255
00:16:58,240 --> 00:16:59,840
llamada de función de restablecimiento.

256
00:16:59,950 --> 00:17:02,370
Y ahora si actualizamos, llegamos a 5.

257
00:17:02,770 --> 00:17:03,980
Hago clic en reiniciar

258
00:17:04,030 --> 00:17:04,970
Eso está bien.

259
00:17:05,140 --> 00:17:11,840
Y ahora, si estoy en el medio de un juego y cambio el puntaje, también nos restablece y ahora jugamos a 1.

260
00:17:11,890 --> 00:17:12,800
Y funciona.

261
00:17:13,100 --> 00:17:14,220
O si cambio

262
00:17:14,230 --> 00:17:17,710
Entonces ahora estamos jugando a 7.

263
00:17:17,800 --> 00:17:19,730
Nos restablece a cero.

264
00:17:20,020 --> 00:17:27,190
Entonces, si decido que sabes que esto es realmente un juego que va a 2, cambia la especificación a cero.

265
00:17:27,280 --> 00:17:29,910
Y no tenemos que preocuparnos por cómo manejarlo.

266
00:17:29,920 --> 00:17:31,380
Si cambiamos a la mitad.

267
00:17:31,510 --> 00:17:37,510
Entonces, lo que estamos haciendo es restablecer una función separada para secar el

268
00:17:37,510 --> 00:17:40,900
código en lugar de duplicarlo aquí y aquí.

269
00:17:40,960 --> 00:17:41,940
Así que eso es todo por ahora.

270
00:17:41,950 --> 00:17:43,510
Eso es todo lo que tenemos que hacer.

271
00:17:43,630 --> 00:17:48,610
Algunos de ustedes se estarán preguntando si este código es realmente la mejor manera en que podríamos hacer esto.

272
00:17:48,620 --> 00:17:49,590
La respuesta es no.

273
00:17:49,850 --> 00:17:54,500
Y si miras de cerca verás que es extremadamente similar.

274
00:17:54,490 --> 00:18:00,150
Es básicamente lo mismo, excepto que estamos haciendo uno aquí y P2 aquí.

275
00:18:00,160 --> 00:18:01,930
Pero cada otra palabra es la misma.

276
00:18:02,470 --> 00:18:06,390
Entonces hay formas más avanzadas de refactorizar esto para mejorar esto un poco.

277
00:18:06,490 --> 00:18:12,490
Pero no voy a hacer eso aquí porque lo único en lo que quiero centrarme es conceptualmente cómo podemos tomar selectores

278
00:18:12,550 --> 00:18:18,020
de eventos de JavaScript con una relación dominante e interactiva HD IMO y eso es en lo que quiero centrarme.

279
00:18:18,380 --> 00:18:23,800
Pero solo sé que veremos formas de hacer que código como este se vea un poco mejor, sea

280
00:18:23,800 --> 00:18:25,010
un poco más corto.

281
00:18:25,030 --> 00:18:29,860
Hay una cosa que podríamos hacer aquí y poner eso en el oyente del evento.

282
00:18:30,050 --> 00:18:37,150
Podríamos simplemente reemplazar la entrada insensible aquí con la palabra "esto es un cambio menor", pero podemos hacer eso

283
00:18:37,150 --> 00:18:38,620
y acortarlo un poco.

284
00:18:38,740 --> 00:18:41,650
Entonces, si cambio esto, ahora estamos jugando a tres.

285
00:18:41,650 --> 00:18:43,870
Todo sigue funcionando exactamente igual.

286
00:18:43,880 --> 00:18:50,480
Acabo de utilizar la palabra clave this que se refiere a lo que sea que el evento estaba escuchando en el que se ingresó el número.

287
00:18:50,990 --> 00:18:52,650
De acuerdo, así es para esta lección.

288
00:18:52,780 --> 00:18:57,280
vamos a construir algo más sustancial y prometo que se verá mucho mejor que aquí.

289
00:18:57,280 --> 00:18:59,010
Como mencioné en el próximo proyecto,