Entonces ahora tenemos dos cosas diferentes en las que nos podemos enfocar.
El primero es cambiar la pantalla aquí para que sea verde en el jugador ganador y esa es
bastante simple.
Y el segundo es hacer que el botón de reinicio funcione para que podamos restablecerlo y volver a jugar.
Comencemos con el cambio de color y lo haremos definiendo una clase en un archivo CSSA.
Entonces necesito crear un archivo C S S y voy a llamar a ese gestor de puntaje.
C Ss luego voy a vincular a él en lugar de mi puntaje de archivos HDMI Dotsie SS y guardar.
lo llamaré invierno y voy a decir que el color es verde y eso es todo lo que necesitamos y guardaremos.
Luego iré a mi archivo CSSA y definiré una clase y
Y solo para verificar que se vea como yo quiero.
Vamos a agregarlo al lapso, por lo que dirán que la clase es igual y le daremos una clase de ganador para la
pantalla del jugador 1 desde el principio.
Y si actualizo puede ver que obtenemos un 0 verde.
Eso es exactamente lo que queremos como un incremento.
Por supuesto, queremos que comience en negro y solo agreguemos la clase.
Cuando el juego termine, debemos volver a nuestro javascript y deshacernos de esto.
Entonces vuelve a negro.
Vaya a nuestro javascript ahora.
Empezaremos por el jugador 1 y debemos verificar si la puntuación del jugador 1 es igual a la puntuación ganadora.
Eso significa que el jugador uno ha ganado.
Así que aquí vamos a agregar a la lista de clase de visualización del jugador 1.
Vamos a agregar el ganador de la clase y eso es todo lo que tenemos que hacer.
Por lo tanto, si actualizamos, verá como incremente la puntuación del jugador 1 y llegue a 5.
Esa clase ha sido agregada.
Entonces, si echamos un vistazo aquí, lo inspeccionaré.
No hay clases y sigo incrementando hasta llegar a 5.
Presta atención aquí mismo y obtenemos la clase igual al ganador agregado cuando llegamos a 5.
Así que haremos lo mismo para el Jugador 2.
Entonces, si el jugador dos puntajes el puntaje ganador cambiará el jugador para mostrar.
Vamos a verificar incrementar esto a 5.
Estupendo.
Todo parece estar funcionando bien.
Entonces la próxima pieza es hacer que el botón de reinicio funcione ahora mismo.
Si conseguimos un juego, siempre está configurado para ser cierto.
No hay forma de cambiar el juego.
Por lo tanto, al hacer clic en el botón de reinicio se deben activar algunas líneas de código diferentes.
El primero que quieres cambiar
Puntuación del jugador 1 y jugador para marcar nuevamente a cero.
Queremos cambiar los valores aquí que se muestran en la pantalla del reproductor 1 y en el reproductor
para que sean cero y queremos eliminar esta clase verde de cualquier elemento en el que esté.
Y luego, lo último es que tenemos que asegurarnos de que el juego haya vuelto a ser falso para que
nuestro código y aquí puedan volver a ejecutarse.
Entonces, lo primero que necesitamos para seleccionar el botón es que le demos el id. De reinicio igual.
Entonces tenemos que ir aquí y simplemente seleccionarlo.
Así que lo haré con los otros botones hasta ahora.
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
se guardará, y luego solo para verificar que funcione.
Haz un registro constante.
Restablecer el botón de reinicio y actualizar.
Si miramos en nuestra consola obtenemos nuestro botón correcto.
Ha sido cancelado se ha registrado.
OK, entonces debemos comenzar agregando nuestro detector de eventos para un clic en ese botón de reinicio, así que
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
cancele el clic de ese registro para asegurarse de que funcione y ahí vamos nuestro botón de reinicio ha sido clickeado.
Entonces la lógica, tal como lo discutimos, debemos establecer.
Puntuación del jugador 1 y jugador para marcar nuevamente a cero.
Así que eso es bastante sencillo.
El jugador 1 que puntúa cero jugador para anotar es cero.
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
el jugador uno gane y luego haga clic en reiniciar.
No parece suceder nada y eso es porque solo cambiamos el puntaje en javascript.
Nunca actualizamos los puntajes en la página, así que esas son las variables de visualización P1 y P2 que
necesitamos actualizar.
Así que querremos hacer un contenido de texto de visualización y podemos simplemente configurarlo en cero.
También podríamos establecerlo en 1 puntuación.
Ambos deberían ser cero.
Lo mismo que Pete para mostrar contenido de texto es cero.
Si actualizamos ahora y llegamos a 5.
Ambos vuelven a cero.
Así que vamos a tener un juego más cerrado.
Y haz clic en Restablecer para volver a cero.
A continuación, eliminemos la cláusula de ganador.
¿Esto lo hará de la manera más fácil al eliminar la clase ganadora de ambos?
Entonces ni siquiera vamos a verificar cuál lo tiene.
Lo eliminaremos de ambos.
Es solo cuestión de una exhibición.
Las listas de clase eliminan al ganador.
Entonces eso eliminará la cláusula y también lo hará en la pantalla.
Entonces, cualquiera que tenga uno no importa porque lo estamos eliminando de ambos.
Entonces, si jugamos un juego, obtenemos un ganador.
Hago clic en reiniciar
Ambos vuelven a un texto simple en blanco.
Pero como puedes ver, llego a cinco.
Hago clic en el botón de reinicio todavía no funciona.
Y eso es porque el juego terminó siendo cierto.
Y entonces, ninguno de nuestro código en lugar de estos eventos se ejecutará.
Entonces, lo último que tenemos que hacer es establecer.
El juego vuelve a falso y eso debería permitirnos seguir jugando.
Así que refrescaré incrementales.
Vamos a terminar el juego.
Aquí vamos.
No puedo jugar más.
Hago clic en restablecer y ahora el juego ha vuelto a falso y puedo volver a jugar y luego continuar.
Esa es la funcionalidad central aquí.
Ya hemos hecho casi todo, la última cosa es conseguir que el número de la partida o el puntaje ganador
sea una variable.
Entonces, no siempre son solo cinco.
Así que tenemos esta información y queremos usar esto para que cuando cambie esto a siete, esto represente jugar
a 7 y nuestro puntaje máximo o nuestro puntaje ganador sea siete en lugar de cinco.
Así que tenemos algunos pasos para llegar allí.
Lo primero que debemos hacer es seleccionar esta entrada, ya que puede ver que tenemos un tipo de entrada igual al número.
Es la única entrada en la página.
Entonces, no necesariamente tenemos que darle una identificación ni nada.
Así que voy a ir aquí y simplemente seleccionarlo con mis otros selectores var.
Simplemente llamemos que ninguna entrada es igual a documento y hay muchas formas de obtenerlo. Puede documentar
esa entrada del selector de consultas.
También podríamos especificar solo dónde.
Tipo es igual a número porque podría haber otras entradas.
En nuestro caso, lo mantendré simple.
Solo hay una entrada.
Entonces esto funcionará bien.
DE ACUERDO.
Entonces tenemos esa entrada seleccionada.
Así que ahora agreguemos un evento.
Entonces, lo que queremos que suceda es que cada vez que esto cambie el valor o ese número cambie, queremos
que esto se actualice y queremos que la variable de puntaje ganadora se actualice también.
Entonces, lo que tenemos que hacer es agregar un evento.
Así que simplemente nos quedaremos aturdidos y pondremos el punto en el que el evento Lessner haga clic solo hazlo aquí.
Función y todos hacen una alerta.
en la entrada y lo que verá es que en realidad un oyente de clic no es la mejor herramienta para este trabajo.
Hizo clic
Porque sí podemos cambiar el valor con un clic como lo hice allí.
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.
Entonces, si uso los pequeños botones, un evento rápido se dispara.
De lo contrario, si uso mi teclado, no obtenemos un evento rápido.
Entonces hay otro tipo de evento que es mucho mejor en este caso, que se llama cambio.
Por lo tanto, un evento de cambio se ejecutará cada vez que cambie el valor y no importa cómo haya cambiado ese valor.
Si fue porque hice clic o presioné la tecla Eliminar.
Cambiemos la alerta aquí para decir que se modificó la entrada y luego actualizar.
Y si hago clic aquí para cambiarlo, me dice que cambiaste la entrada.
Pero si elimino y escribo un número que no implica hacer clic en él, también me dice que
cambio la entrada, así que es genial.
Este es el evento en el que queremos utilizar el evento de cambio cada vez que cambie
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
nuevo puntaje de ganancia.
Espero que este no sea nuestro puntaje ganador real.
Definitivamente juego largo de tijeras de papel roca.
Entonces, lo primero es actualizar este valor aquí.
Entonces, como antes, debemos seleccionarlo, que es un párrafo.
Entonces, necesitamos seleccionar nuestro párrafo y voy a hacer un párrafo VAR igual al documento que la etiqueta del selector
de consulta.
Y luego, en este evento rápido, simplemente cambiaremos ese contenido de texto y comenzaremos
simplemente cambiándolo para decir "clic" o digamos "valor cambiado".
Solo así y actualiza.
Ahora, si cambio el valor que cambia el párrafo para decir que el valor ha cambiado, pero este es el mismo problema
con el que nos topamos antes con el H-1, no queremos cambiar todo el párrafo.
Solo queremos cambiar esta pequeña porción.
Entonces, lo que queremos usar es en realidad otro lapso.
Así que volveremos y agregaremos un lapso alrededor del número.
Y este es un uso perfecto para un lapso donde nuevamente podemos usarlo para apuntar solo a una
pequeña porción de un elemento, no a todo.
Y esta vez no voy a darle una idea solo para mostrarte otra forma de seleccionarlo.
Así que recuerda que es un lapso en lugar de un párrafo.
Y es el único así en nuestra página.
Así que volveremos.
Entonces, en lugar de seleccionar el párrafo, crearemos una nueva variable y la llamaremos pantalla de puntuación ganadora y
se seleccionará el selector de consultas de documentos.
Pero en lugar de abarcar solo porque hay otros tramos en la página, queremos seleccionar tramos dentro de
los párrafos.
Entonces eso es todo lo que tenemos que escribir.
Espacio P
Lapso.
Y ahorraremos
Y ahora continuemos y actualicemos el puntaje ganador que se muestra aquí en lugar de párrafo.
Entonces el puntaje ganador se muestra así.
Y aún no va a ser perfecto.
Solo va a actualizar el valor cambiado cada vez, pero al menos no está actualizando todo el párrafo.
se actualice para mostrar el número que está dentro de la entrada para que los valores se sincronicen entre sí.
Entonces, el siguiente paso es lograr que
Así que no hemos visto cómo obtenemos los datos de una entrada.
¿Cómo obtenemos el valor actual?
Voy a mostrarle aquí seleccionando la entrada.
Documente ese selector de consultas y lo vamos a hacer en la entrada de la consola y lo voy a guardar
en una variable así que llámelo var input document taqueria seleccione su entrada y luego haremos un valor
de daat de entrada.
Entonces ese valor va a ser una cadena de lo que sea que esté contenido en esta entrada sea cual sea el valor.
Entonces, si cambio esto a 7 y vuelvo a ejecutar el código, obtengo 7.
Si lo hago un número enorme y esta vez lo hago de nuevo, refleja cualquier valor que esté dentro de
esta entrada.
Así que vamos a hacer uso de eso cambiando esto en lugar de cambiar el valor de la cadena.
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
para mostrar el contenido de texto.
Así que actualizamos y actualizo esto y ahora puede sincronizarse.
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.
Así que a
Entonces, por supuesto, no estamos jugando a 123.
Todavía estamos jugando a cinco.
Y eso es porque nuestra lógica no refleja este nuevo valor de entrada, todo lo que refleja es nuestra
puntuación ganadora original de 5.
Por lo tanto, también queremos cambiar aquí; la puntuación ganadora equivale al valor de entrada insensible y a guardar.
Y ahora intentemos cambiar esto, así que estamos jugando a tres y hacemos clic y notará que obtenemos
un comportamiento extraño.
Entonces ni siquiera se detuvo a las cinco.
Simplemente continúa para siempre.
Así que este es un error divertido que tiene que ver con diferentes tipos de cadenas de datos y números
y compararlos entre dobles iguales versus triples iguales.
Entonces, para llegar al fondo de esto, hagamos algunos contras. explotación florestal.
Entonces, sabemos que el quid de todo esto es esta línea aquí o aquí, donde estamos comprobando si el jugador tiene
uno si el puntaje del jugador es igual al puntaje ganador.
Ahí es cuando establecemos el juego para que sea cierto.
Y eso no está sucediendo ahora porque se acabó el juego.
Si cambiamos el puntaje
El juego terminado nunca cambia.
Siempre es falso.
Entonces algo está yendo mal con esta línea.
Hagamos un log anulado y haremos dos cosas.
Imprimamos el puntaje del jugador 1 e imprimiremos el puntaje ganador y podremos separarlos por
comas y solo los imprimirán en la misma línea.
Solo una nota rápida con los registros de Comstock es cómo vamos a depurar por ahora, pero más
adelante hablaremos de formas más avanzadas de depuración.
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
tres y lo estamos comparando con el número cinco.
Entonces, el puntaje del jugador 1 es tres y el puntaje ganador es cinco.
Pero tan pronto como cambie esto, digamos 7 y ahora hago clic.
El jugador 1 ahora estamos comparando el puntaje del jugador 1, que es el número cuatro con el puntaje ganador, que es la
cadena de siete.
Así que actualiza nuevamente si comienzo con cinco.
Funciona bien.
Pero si cambio esto y ahora lo comparamos con el número y la cadena, y eso no va a funcionar
para nosotros porque hacemos el triple de aquí.
Así que podríamos hacer dobles iguales, pero sabes que no soy fanático de eso.
Entonces, lo que vamos a hacer es bajar aquí y tomar esto y poner ese valor y convertirlo
en una cadena.
número y luego pase y coloque un valor que luego lo convertirá en una cadena y lo establecerá para ser el puntaje ganador.
Así que numere como ese capital y
Así que estábamos frescos.
Ahora esto funciona bien.
Llegamos a cinco, pero si también cambiamos esto para que nuestro juego termine en 2.
Hay un pequeño problema en el que debemos centrarnos, que es si estamos jugando a cinco, que es
lo que comenzamos a hacer.
Y si decido a mitad de camino, quiero cambiar el puntaje ganador en el puntaje máximo.
no lo maneja muy bien porque si cambio esto ahora solo estamos jugando a tres.
Nuestro código en este momento
Tenemos dos formas diferentes de manejar esto.
El primero está restableciendo el puntaje y todo vuelve a cero.
Y el otro sigue jugando a cinco.
Pero lo que realmente está sucediendo es que estamos jugando a tres pero ya pasamos tres.
Entonces, como ya lo aprobamos, nuestro código ya no funciona porque estamos mintiendo, solo estamos
verificando si el jugador marca igual que el puntaje ganador.
No está verificando si es mayor que el puntaje ganador.
Entonces, si pudiéramos cambiar eso.
Entonces, dice que si es mayor que el puntaje ganador, entonces el juego terminó y está bien.
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
mitad de un juego, de todos modos querríamos comenzar el juego, y la
otra razón por la que quiero que hagamos esto. es un buen caso de uso para un refactor corto.
Entonces, cuando cambiemos el puntaje, aquí está el puntaje ganador.
Queremos restablecer el juego, que es la misma lógica con la que estamos corriendo aquí.
Así que lo haremos de forma muy simple, solo copiaremos este código y crearemos una nueva función llamada restablecer.
Entonces, restablecer la función simplemente pone todo este código ahí y luego, una vez que la entrada del
número cambia, simplemente vamos a ejecutar el reinicio.
Entonces verás que reinicio aquí jugando a cinco.
Esto funciona bien
Llegamos a cinco.
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
llamada de función de restablecimiento.
Y ahora si actualizamos, llegamos a 5.
Hago clic en reiniciar
Eso está bien.
Y ahora, si estoy en el medio de un juego y cambio el puntaje, también nos restablece y ahora jugamos a 1.
Y funciona.
O si cambio
Entonces ahora estamos jugando a 7.
Nos restablece a cero.
Entonces, si decido que sabes que esto es realmente un juego que va a 2, cambia la especificación a cero.
Y no tenemos que preocuparnos por cómo manejarlo.
Si cambiamos a la mitad.
Entonces, lo que estamos haciendo es restablecer una función separada para secar el
código en lugar de duplicarlo aquí y aquí.
Así que eso es todo por ahora.
Eso es todo lo que tenemos que hacer.
Algunos de ustedes se estarán preguntando si este código es realmente la mejor manera en que podríamos hacer esto.
La respuesta es no.
Y si miras de cerca verás que es extremadamente similar.
Es básicamente lo mismo, excepto que estamos haciendo uno aquí y P2 aquí.
Pero cada otra palabra es la misma.
Entonces hay formas más avanzadas de refactorizar esto para mejorar esto un poco.
Pero no voy a hacer eso aquí porque lo único en lo que quiero centrarme es conceptualmente cómo podemos tomar selectores
de eventos de JavaScript con una relación dominante e interactiva HD IMO y eso es en lo que quiero centrarme.
Pero solo sé que veremos formas de hacer que código como este se vea un poco mejor, sea
un poco más corto.
Hay una cosa que podríamos hacer aquí y poner eso en el oyente del evento.
Podríamos simplemente reemplazar la entrada insensible aquí con la palabra "esto es un cambio menor", pero podemos hacer eso
y acortarlo un poco.
Entonces, si cambio esto, ahora estamos jugando a tres.
Todo sigue funcionando exactamente igual.
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.
De acuerdo, así es para esta lección.
vamos a construir algo más sustancial y prometo que se verá mucho mejor que aquí.
Como mencioné en el próximo proyecto,