En este video hay algunos pequeños cambios que quiero hacer y luego voy a hablar
sobre cómo podríamos refactorizar esto un poco.
Entonces, el primer cambio es cuando ganamos este juego.
Así que ganemos aquí.
Ahí vamos y recibo este mensaje correcto y hago clic en jugar de nuevo.
Todavía dice correcto.
Y queremos que restablecer, que es un cambio muy rápido.
cuando hacemos clic en jugar de nuevo, luego tenemos que cambiar el lapso que tenemos aquí y dejarlo vacío.
Todo lo que tenemos que hacer es encontrar el código que se ejecuta
Así que busquemos que haga esta pantalla completa.
Entonces cuando hacemos clic en ese botón de reinicio que está aquí.
Todo lo que tenemos que hacer es cambiar nuestra pantalla que llamamos pantalla de mensajes.
Entonces haremos eso aquí en cualquier lugar.
El texto de la pantalla de mensajes sube el contenido de texto igual a una cadena vacía.
Y veamos cómo va eso.
Refrescar.
De acuerdo, hagamos clic hasta que ganemos.
OK, entonces dice correcto aquí.
Y si hago clic en jugar de nuevo, eso desaparece.
El otro pequeño cambio que quiero hacer es que este botón solo diga jugar una vez que
el usuario gane.
Así que actualizaré la página y dice nuevos colores, que es cómo queremos que funcione.
Entonces, si gano, me pregunta si quiero volver a jugar.
Y luego, si hago clic nuevamente en jugar, quiero cambiar el texto del botón para volver a Nuevos colores.
Así que realmente es una pequeña diferencia, pero solo quiero mostrar el juego nuevamente si el usuario acaba de ganar.
Así que ingrese a nuestro código y necesitamos encontrar el lugar donde el usuario gana el juego que está justo aquí
cuando el usuario hace clic en el color elegido.
Entonces, cuando el usuario hace clic en el color correcto, cambiamos el texto del botón de reinicio para decir contenido de texto, pero luego
lo que queremos hacer es que cuando el usuario haga clic en el botón de restablecimiento vamos a cambiar eso.
Este contenido de texto de punto para volver a Nuevos colores y también podríamos escribir un botón de reinicio.
Pero es más fácil hacer esto porque estamos dentro del detector de eventos para el botón de reinicio.
Y eso debería ser bueno si actualizamos rápidamente hasta que obtengamos el correcto.
Queremos jugar de nuevo.
Por supuesto.
Ahora vuelve a los Nuevos colores y cada vez que dice colores nuevos una y otra vez, y si gano, es el
único momento en que dice volver a jugar.
Así que una cosa realmente menor pero me parece realmente molesto es que cuando hago clic en uno de
estos botones tiene un contorno molesto a su alrededor.
Y esto es en realidad nuestro navegador haciendo eso.
Y podemos apagar eso.
No sé si puedes ver eso en el molde de la pantalla, pero hay un contorno azul.
Es bastante nocivo.
Entonces, para deshacernos de eso vamos a nuestra hoja de estilos y si seleccionamos nuestros
botones justo aquí, podemos simplemente escribir esquema ninguno y regresar y actualizar.
Ahora, si hacemos clic, no obtenemos ese contorno azul a su alrededor.
Así que eso es todo lo que quería hacer para la lógica del juego.
Ahora queremos dedicarle un poco de tiempo a refacturar su código.
Así que regresemos.
Lo primero que salta a la vista es este código aquí donde tenemos un botón difícil, un botón fácil y
el oyente para cada uno.
Y son muy similares en la forma en que funcionan.
Excepto que uno de ellos funcionará con tres cuadrados.
El otro funciona con seis, pero de lo contrario hacen básicamente lo mismo.
Entonces realmente podemos reducir esa duplicación.
Y en lugar de darle a cada uno una idea, lo que vamos a hacer es deshacernos de esas identificaciones y
darles una clase, y van a compartir la misma clase.
Entonces la clase se llamará modo.
Así que les daremos el modo de clase.
Recuerde que un botón o cualquier elemento puede tener dos clases.
Solo necesitan estar separados por espacios.
Entonces esto tiene el modo de clase y la clase seleccionados.
DE ACUERDO.
Ahora vamos a ir y eliminar estos dos botones aquí y hacer una lista de botones llamados botones de modo y
ese será un documento que consulta al selector.
Paul datt mode.
Entonces eso nos da dos botones.
Luego, recorreremos los botones de modo.
Entonces necesitamos que var sea igual a cero.
Menos que el botón de modo sorprendente.
Y lo que esto también nos permitirá hacer es si en el futuro queremos agregar un modo de dificultad medio o normal
o un modo de dificultad súper duro.
y luego usando un ciclo versus Aquí tenemos que escribir uno manualmente por cada botón que agreguemos.
No tenemos que agregar oyentes adicionales porque los estamos seleccionando todos
DE ACUERDO.
Así que termine el ciclo aquí.
Plus plus.
Y lo que vamos a hacer es agregar los botones de modo I dot add click listener click y lo dejarán así
por ahora.
Antes de ir más allá, en realidad voy a comentar el código solo para poder decir qué se está
ejecutando desde nuestro nuevo código y qué queremos que suceda cuando hagamos clic en uno de esos botones.
Lo primero que queremos que suceda es que se aplique esa clase seleccionada.
Así que ahora mismo es solo cuando volamos.
Obtenemos ese color que quiero que sea cuando hacemos clic.
Así que tenemos que hacer esta lista de puntos dot dot add seleccionada así, que es lo que tenemos aquí, excepto que lo estamos
haciendo con el botón fácil y el botón duro.
Podemos simplemente hacer esto, que se refiere a lo que se hizo clic en.
El único problema es que debemos desactivarlo también.
poco y escribir botones de modo zero dot class list dot remove remove y luego lo eliminaremos del otro también.
Y para hacer eso vamos a codificar esto un
Entonces, porque solo hay dos botones.
Esto no es un problema.
Lo que estamos haciendo es quitarlo de ambos botones solo para estar seguros y luego agregarlo
al que acabamos de hacer clic.
Así que ahora si probamos esto y refrescamos.
Puede ver que solo se agrega al que acaba de hacer clic y se
elimina del otro.
Entonces, lo que tenemos que hacer a continuación es agregar la mayor parte de la lógica aquí para estos botones.
Así que tenemos que averiguar cuántos cuadrados mostrar para elegir nuevos colores y luego tenemos que elegir un nuevo color para elegir, que es el
color con el que intentamos hacer clic.
Y finalmente, queremos actualizar la página para reflejar los cambios.
Entonces para hacer todo esto voy a hacer una nueva función y la función que voy a
llamar restablecer y esto es algo que vamos a usar en algunos lugares porque estamos repitiendo
estos pasos a mucho escogiendo nuevos colores seleccionando un nuevo color elegido de la matriz de colores y
luego actualizando la página para mostrar los nuevos colores y actualizando esta pantalla aquí.
Estamos haciendo eso todo el tiempo, así que voy a poner todo eso en una función.
Entonces, lo que tenemos que hacer dentro de esta función es que realmente voy a copiar desde aquí.
Ya hemos hecho esto aquí.
Iba a copiar todo esto en nuestro Restablecimiento así como así.
Y echemos un vistazo a lo que está sucediendo.
Entonces, en lugar de reiniciar o generar los colores aleatorios según la variable de cuadrados insensibles, y luego estamos escogiendo
un nuevo color, estamos cambiando el contenido de las pantallas de colores.
Tenemos este contenido de texto igual a nuevos colores.
Y eso en realidad no funcionará porque esto solía referirse al botón de reinicio.
Y eso fue dentro del evento en el centro para el botón de reinicio.
Ahora estamos en lugar de una función separada llamada reinicio.
Entonces necesitamos codificarlo como un botón de reinicio.
Y luego estamos cambiando la pantalla de mensajes para que esté vacía.
Y luego estamos recorriendo todos los cuadrados y estamos actualizando su color.
Y luego estamos cambiando el fondo del 8: 1 al azul.
Y si llamamos a eso en lugar de aquí, solo ejecutamos el reinicio.
Hay un pequeño problema, que es que nunca estamos actualizando cuadrados adormecidos.
Entonces, cuando hago clic en el botón fácil, quiero cambiar la variable de cuadrados para que sea tres.
Cuando hago clic en el botón duro, quiero cambiarlo a 6.
Entonces, para hacer ese minuto, vaya aquí y agregue una declaración if y todo lo que podemos hacer es escribir si este contenido de texto.
Entonces, el botón que se hizo clic en si el contenido de texto es igual a fácil.
Lo que vamos a hacer es decir cuadrados entumecidos es igual a tres cuadrados de números de L'es igual a seis.
Y luego llamaremos a la función de reinicio que usará los cuadrados insensibles como se puede ver aquí en nuestra
función de reinicio.
Estamos usando algunos cuadrados para llamar a nuestra función Generar colores aleatorios.
Entonces necesitamos tener algunos cuadrados actualizados que estamos haciendo aquí.
De hecho, hay una manera más corta de escribir esto de la que algunas personas son grandes admiradores.
Se llama operador ternario.
Así que voy a escribirlo primero y luego hablaré sobre cómo funciona.
Entonces este contenido de texto es igual a igual.
Fácil interrogante.
Los cuadrados vacíos equivalen a tres cuadrados insensibles de dos puntos equivalentes a seis.
Entonces esta línea aquí hace exactamente lo mismo que estas cuatro líneas aquí.
Estas cinco líneas.
Entonces se llama operador ternario.
Hay tres partes.
Lo primero es la condición.
Así que puedes leer esto como si este contenido de texto fuera igual a fácil, entonces ningún cuadrado es igual a 3 De lo contrario, ningún
cuadrado es igual a 6.
Entonces es solo una forma de escribir esto.
Y lo mantendré así.
Por lo general, si solo tenemos declaraciones rápidas de una línea en las que establecemos un valor para dos
opciones posibles diferentes, es un buen caso de uso para el operador ternario.
Todavía tenemos un problema, que es que nunca nos estamos escondiendo.
O mostrando el número correcto de cuadrados.
Entonces, ¿qué pasará si actualizo?
Comenzamos en modo difícil.
Eso funciona bien
Todo funciona igual
Si hago clic en easy, aunque todavía tenemos seis cuadrados aquí, verás que los tres inferiores simplemente no
cambian de color porque solo hemos generado tres colores.
Entonces, lo que tenemos que hacer en lugar de nuestra función de reinicio necesitamos dar cuenta de eso.
Así que aquí en lugar de este bucle donde estamos cambiando el color de los cuadrados para que coincida con el
color de la matriz de colores.
Si solo hay tres elementos en la matriz de colores, lo que realmente necesitamos hacer es ocultar los otros
tres cuadrados.
Así que voy a escribir eso con una declaración if y solo voy a verificar si hay un color para pintar.
También hago algo más.
Entonces, si hay un color vamos a pintar o cambiar el color de fondo de los cuadrados.
Yo soy de ese color; de lo contrario, necesitamos cambiar los cuadrados que veo que no son ninguno.
Y eso necesita ser diseñado para mostrarse así.
Y entonces eso lo esconderá por nosotros.
Entonces, ¿qué sucede si hago clic en el botón fácil? Tengo una matriz de colores con tres elementos que
recorren seis cuadrados y vuelvo a revisar.
Si hay un color que coincida con ese cuadrado y para los primeros tres, habrá.
Entonces establecemos el color de fondo para que sea el color de la matriz.
Pero los últimos tres colores voy a ser no.
O de hecho no estará definido.
No habrá un color allí.
Entonces eso es falso.
Y lo que ocurre es que configuramos la pantalla para que no sea ninguna.
Así que te mostraré cómo funciona eso.
Si hago clic en easy, desaparecerán los tres de abajo.
Sigue haciendo clic fácil, obtenemos tres colores nuevos.
Juguemos el juego.
Aquí vamos.
Sin embargo, tenemos un problema: si hago clic en un disco duro, estamos cambiando los seis cuadros
para que tengan un nuevo color Bactrim, pero no ocultamos que los tres inferiores serán suficientes para solucionarlo antes de que proporcionemos
un nuevo fondo. color a los cuadrados.
Voy a seguir adelante y volver a mostrarlos.
Así que va a haber cuadrados, pensé que la visualización del estilo es igual al bloque.
Así que así es como los traemos de vuelta.
Y vamos a hacer eso a los seis.
No es gran cosa.
Entonces, si les damos un color de fondo, siempre nos aseguraremos de que estén visibles primero.
Así que ahora si actualizamos y van a más fácil, tenemos tres juegos.
Hago clic en duro
Ahora tenemos seis llamadas.
Vamos a jugar un juego.
Allí vamos a hacer clic en easy y volvemos a tres.
Todo bien.
Entonces puedes ver que limpiamos un montón de código aquí.
Esto solía ser mucho más tiempo.
Es como tres veces al menos por lo menos.
Y dos oyentes con diferentes clics y ahora nuestro código es relativamente versátil.
media, todo lo que tenemos que hacer es cambiar esta línea aquí donde tendríamos un número más de cuadrados.
Si quisiéramos agregar un botón de dificultad
Tal vez queremos 5 cuadrados o queremos un nivel superdifícil donde tenemos 10 cuadrados solo necesitamos cambiar los cuadrados numéricos
y llamar a nuestra función de reinicio para obtener el siguiente lugar donde podamos usar nuestra función de reinicio es en realidad
cuando hacemos clic en el botón de reinicio .
Entonces, todo lo que tenemos que hacer es reemplazar todo, en lugar del botón de reinicio,
hacer clic en Lisner con solo reiniciar así.
Entonces eso aumenta mucho nuestro código.
Nos deshicimos de 10 o más líneas.
Así que regresemos sin paréntesis.
Vamos al navegador y nos aseguramos de que todavía funcione.
Así que juguemos un juego.
Haga clic en jugar de nuevo y se restablece muy bien.
Hagamos clic en "jugar fácilmente" en otro juego y también se reinicia muy bien.
Todo bien.
Así que aumentamos nuestro código bastante.
Van a deshacerse de estos dos solo para que puedas ver cuánto acortamos todo