Dar una buena acogida.
En este video nos enfocaremos en agregar los botones fácil y difícil que afectarán la
dificultad del juego.
Entonces, cuando cargamos la página, ya está seleccionado y vemos seis botones diferentes aquí o seis
cuadrados diferentes.
Y luego puedo hacer clic en easy y eso permanece seleccionado.
Y solo tenemos tres cuadrados para elegir.
Y luego puedo volver al corazón.
Vamos a comenzar añadiendo los dos botones que necesitamos.
Así que voy a ingresar a mi HMO y agregar dos botones.
El primero diremos fácil.
El segundo dirá con fuerza y ​​se actualizará.
DE ACUERDO.
Y eso se ve bien por ahora.
Notarás que nuestro tramo aún no ocupa espacio.
Y veo que aparece algo de texto.
Si presiona esos botones se enfocará en el estilo más adelante, pero hay un elemento del
diseño en el que quiero centrarme, que lo hace parecer seleccionado cuando la página se carga o
cuando elegimos fácil o difícil, el botón correspondiente debe permanecer en azul.
Y la forma en que lo hacemos es usar una clase y activar y desactivar esa clase.
Así que voy a definir una clase aquí y va a ser más simple que este estilo, aquí solo va a
ser un color.
Entonces nuestro color de fondo y la clase se llamarán seleccionados porque eso es lo que estamos haciendo.
Estamos agregando la clase seleccionada al botón que está seleccionado.
Y solo tendrá un fondo establecido para que empiece.
Y luego, lo que vamos a hacer es dar la clase de botón modo duro igual de seleccionada.
Y si actualizamos nuestro código, puede ver que el disco está ocupado.
Es horrible Sí, pero al menos nos muestra que estamos en modo difícil.
Entonces, lo que queremos hacer es agregar el código que es un interruptor que cuando hacen clic en easy y luego la parte
más complicada es mostrar los tres colores cuando haces clic en el easy y los seis colores cuando haces
clic en heart.
DE ACUERDO.
Comencemos aquí.
Para hacer que estos botones realmente funcionen, debemos seleccionarlos en nuestro javascript y luego tener algunos oyentes rápidos
y hacer algunos y ejecutar algunos códigos cuando se hace clic en cada uno de ellos.
Así que hagámoslo más fácil de seleccionar y voy a empezar dándoles a cada uno una ID fácil.
DTN y luego ETN difícil y vamos a cambiar esto si está viendo banderas rojas aquí o si está pensando que
estamos utilizando demasiadas ideas.
Vamos a refacturar esto en solo unos momentos.
Pero vamos a comenzar con dos ID diferentes.
Botón fácil Botón fácil.
Vaya a nuestro javascript y selecciónelos.
Así que var easy ETN es igual al selector de consulta doc del documento con Octa.
Easy ETN.
Asegúrate de que capitalizamos las cosas de la misma manera.
Aquí vamos.
Y lo mismo para los duros y no sé si atrapaste eso en lo sublime.
para seleccionar todas, pero solo quiero estas dos y voy a escribir duro en su lugar.
Si selecciona la palabra fácil y golpea Kamandi, entonces seleccionará automáticamente la siguiente instancia y
puedo seguir haciéndolo
Entonces tenemos dos botones y luego podemos hacer algo como esto.
Easy PTEN agrega el detector de eventos.
Haga clic y todo lo que vamos a hacer es solo alertarnos de que el botón fácil fue cancelado así.
Alert botón fácil clic y asegúrese de que eso funcione.
clic en "Easy OK", haga clic en el botón "Easy" y luego lo duplicaremos para el botón "hard" y diremos que el
botón "hard" se cerró y "refresh easy" funciona pero es duro pero nos dice que se hizo clic en el botón.
Así que refrescamos, haga
Entonces, en lugar de solo hacer eso, trabajemos para que la clase seleccionada sea la que refleje
cuál se selecciona.
Entonces, si hacemos clic en el botón fácil, todo lo que queremos hacer es un botón fácil.
La lista de clase de Doc agrega seleccionada y si actualizamos ahora hago clic en fácil.
Tiene una clase seleccionada.
Fácil pero el problema es que aún permanece en el botón duro, por lo que es fácil de arreglar.
tener un doc de botón de lista cruzada. Eliminarlo y ahora si hacemos clic en easy, el modo difícil desaparece.
Solo queremos
Pero si hacemos clic duro aún no tenemos esa lógica, así que podemos solucionarlo
simplemente copiando este código y ahora tendremos botones duros sin clase que agregarán la lista de clase de botón fácil seleccionada que
eliminará seleccionada.
OK, probémoslo.
Todo bien.
Así que ahora tenemos la parte más fácil de hacer, que son los dos botones que muestran cuál
está seleccionado actualmente y que actualizo y el duro se selecciona automáticamente porque tenemos seis elementos.
A continuación, necesitamos agregar la lógica para cambiar la dificultad, no solo el estilo de estos botones
aquí, sino solo mostrar tres elementos o seis cuadrados.
Entonces tenemos que hacer eso luego antes de comenzar.
Revisemos nuevamente la solución para ver cómo funciona.
Entonces, si actualizo y hago clic en aviso fácil, obtenemos nuevos colores y tenemos que hacer eso porque existe el riesgo
de tener seis colores aquí y el color que se selecciona aquí podría ser uno de estos tres que cuando
hago clic en fácil esos tres son eliminados.
Así que eso podría ser un error para romper el juego.
Entonces, en lugar de lidiar con eso, solo elegiremos tres colores nuevos.
Entonces el proceso es que refresquemos eso.
Entonces el proceso es cuando hago clic en el botón fácil vamos a generar tres colores nuevos para que la
matriz de colores elija un color de esos tres.
Vamos a actualizar que aparecen con un color elegido.
Vamos a actualizar los tres cuadrados aquí.
Y la parte importante es que también ocultamos los otros tres cuadrados para que no los eliminemos, simplemente los
ocultamos al configurar display para que no sea ninguno.
Y luego lo mismo vale por duro.
Generamos seis nuevos colores en la matriz de colores.
Elegimos uno para ser nuestras selecciones de color.
Lo mostramos aquí arriba.
Luego mostramos los tres cuadrados en la parte inferior y luego configuramos cada uno para que tenga un color.
DE ACUERDO.
Así que abordemos esto ahora.
En primer lugar, cuando hacemos clic en el botón fácil vamos a comenzar allí.
Vamos a querer generar nuevos colores para que los colores sean iguales generen colores aleatorios esta vez 3.
Y una vez que lo hayamos hecho, vamos a querer elegir un nuevo color elegido para que el color
escogido sea igual al color de la selección.
Entonces, una vez que tenemos nuestros colores y nuestro color elegido, podemos comenzar simplemente cambiando la visualización aquí para
mostrar el nuevo color de la imagen.
Así que es tan fácil como decir que el contenido del texto de la pantalla en color es igual al color elegido.
Y si actualizamos, voy a obtener algunos colores nuevos aquí solo para mostrarte algunas cosas.
antes, el color está cambiando y detrás de las escenas hay una matriz de colores que también cambia.
Cuando hago clic en easy como mencionaste
Así que vamos a ver qué colores son ahora y luego hago clic en modo fácil y veo
qué colores son otra vez y es diferente.
Y también escogió el color es diferente.
Así que ahora hablemos de cómo escondemos los tres divisores de fondos inferiores cuando hacemos clic en el modo fácil o podemos ocultar los
tres primeros.
No importa.
lo haremos es al pasar y configurar la propiedad de mostrar de abajo a tres para que no sea ninguna.
Pero voy a hacer los últimos tres de la misma forma en que
Déjame mostrarte cómo funciona eso.
Voy a elegir uno de ellos.
Así que hagamos un selector de consulta de documentos todo cuadrado o cuadrado y luego trabajemos con el quinto.
Bueno, en realidad, el sexto con un índice de cinco y luego configura esa pantalla de estilo para que no sea ninguna.
Y verás que desaparece.
Y luego, si quiero que vuelva, lo haré si hacemos clic en el modo difícil, solo necesito decir estilo.
La pantalla es igual a bloqueo.
Todo bien.
Así que sigamos adelante e implementemos esto en nuestro código de la manera en que lo lograremos yendo a
través de los seis al principio.
Y para los primeros tres vamos a darles un nuevo color.
Y para los tres inferiores vamos a esconderlos.
Entonces, en lugar de tener dos bucles para hacerlo, lo haremos de una vez.
Entonces para var I es igual a cero.
Yo estoy menos que cuadra la longitud.
Además, vamos a aprovechar el hecho de que los colores tienen tres elementos.
Así que vamos a hacer algo como esto si coloreo I.
Entonces, si hay un próximo color, esto sucederá en los primeros tres.
Vamos a escribir cuadrados, estilo que el fondo es igual al color.
Entonces, para los primeros tres en nuestro caso, porque los colores solo tienen tres elementos, recorreremos
todos los cuadrados y comprobaremos si hay un color en ese índice.
Y si hay cambios, cambiaremos el color de esos tres primeros.
Así que vamos a asegurarnos de que eso funcione.
Hago clic en easy y verá que solo los tres primeros están cambiando.
Entonces estamos cerca.
Todo lo que queremos hacer ahora es esconder los tres inferiores.
Entonces haremos eso con lo demás.
Cuadrados con estilo que muestran igual a ninguno.
Y si actualizamos y hacemos pantalla completa si hago clic en modo fácil, verá que perdemos los tres inferiores
y los colores de los tres superiores están cambiando.
E intentemos averiguar cuál es este.
Tan ciento sesenta y tres rojos 125 verdes y un poco de azul.
Aquí vamos.
Puede actualizar intente algunos más.
Tenemos un pequeño problema al actualizar algunos de ellos y hago clic en modo fácil.
Solo estamos generando tres colores aquí.
Pero si hago clic en el botón de nuevos colores, le mostraré cómo se ven los colores en este momento.
Son tres elementos.
Sin embargo, si hago clic en nuevos colores, veo los colores.
En realidad, son seis elementos y eso se debe a que no estamos haciendo un seguimiento del modo en que estamos.
Entonces ese código está aquí en el botón de reinicio.
Solo decimos que los colores equivalen a generar colores aleatorios.
Entonces tenemos que arreglar eso eventualmente.
Pero antes de hacerlo, vamos a obtener nuestro botón para que nos devuelva a seis cuadrados y cada
uno tiene su propio color para hacer eso.
Voy a tomar parte de este código y duplicarlo aquí, que siempre es una mala señal.
Y es por eso que vamos a refactorizar esto en solo un poco.
Entonces, lo primero que quiero hacer.
Voy a copiar todo en nuestros colores de oido de evento de botón duro.
Va a tener seis selecciones de colores. El color será el mismo. El contenido del texto en pantalla es el mismo.
Y luego vamos a recorrer todos ellos en este ciclo.
Necesitamos hacer dos cosas diferentes.
El primero es asignar un nuevo color a cada cuadrado.
Pero también es posible que tengamos que asegurarnos de que los tres estén ocultos en la parte inferior.
declaración if por ahora y vamos a configurar todos los cuadrados para que tengan un color de fondo para los colores.
Así que vamos a deshacernos de la
Y todos los cuadrados tendrán una pantalla de bloque.
Así que esto es un poco desperdiciado porque solo necesitamos los tres últimos técnicamente y estamos restableciendo todos ellos
para que sean bloques de visualización.
Pero eso es algo realmente menor en lo que nos podemos enfocar más adelante.
Así que vamos a ver si esto funciona. Refresh nos dice que tenemos un error de sintaxis en la línea 36. Veamos qué es lo que
nos falta.
Y solo tenemos una llave adicional aquí.
Entonces, si ahorramos ahora y actualizamos, tenemos seis colores como siempre tenemos.
Si hago clic en easy, obtenemos tres.
Si hago clic duro, ahora vuelvo a seis.
Tengo un nuevo color aquí y asegurémonos de que siga funcionando.
Es muy fácil, difícil, difícil cuando voy al modo difícil.
Hagamos clic en nuevos colores nuevamente.
Regresa a easy volver a hard hard y hard.
Todo bien.
Y juguemos esto y veamos si funciona.
Entonces el color de la selección es 196 170 57.
Así que mucho de leer mucho verde y un poco de azul.
Eso es mucho rojo y verde es un color amarillo.
Entonces no va a ser ese o aquel.
Ese va a ser muy rápido y parece que está funcionando bien.
Si hago clic en easy otra vez, volvemos a tres colores.
de los seis que quizás no se muestren a nosotros, lo que está sucediendo. ser problemático para arreglar eso.
El problema más acuciante que enfrentamos es que cuando estoy en modo fácil y hago clic en jugar de nuevo,
esto generará seis colores, no tres, y elegirá un color aleatorio
Todo lo que tenemos que hacer es tener una variable que haga un seguimiento del modo en el que estamos.
Fácil o difícil o el número de cuadrados de tres o seis.
Entonces haremos eso aquí.
Tendremos una variable llamada número de cuadrados y que comenzará en 6 y lo declararemos aquí y diremos
que los colores equivalen a generar colores aleatorios de número y vamos a hacer que sea el número de cuadrados o
cuadrados.
Es un
poco más fácil y ahorrar.
Y luego tenemos que reemplazar eso en algunos lugares.
Entonces, cuando hacemos clic en modo fácil queremos que los cuadrados insensibles sean tres y luego generamos
colores aleatorios sin cuadrados.
Y luego, más abajo cuando hacemos clic en el botón duro, queremos que algunos cuadrados sean 6, por lo que los cuadrados
insensibles equivalen a seis y luego generan cuadrados de colores aleatorios y luego hay otros lugares aquí cuando hacemos clic en
ese botón de reinicio.
Queremos generar el número correcto de colores que también serían cuadrados Nahm allí.
Así que eso debería solucionarlo si volvemos y refrescamos.
Vamos al modo fácil y ganemos este.
Así que principalmente rojo un poco azul.
Este no.
Ése no.
Aquí vamos.
Y si hago clic en jugar de nuevo, asegurémonos de que cuando escribo colores solo veamos tres colores.
Y si miro el color escogido, las esperanzas escogieron un color, puedes ver que está dentro de la matriz de colores.
Entonces ya no tenemos que preocuparnos por eso.
Nuestra lógica ahora funciona