OK, volveremos en este video.
Vamos a trabajar en algunas características nuevas.
El primero es cuando gano el juego.
Me dice correcto.
Y luego puedo volver a hacer clic en jugar para obtener nuevos colores y si todavía no he ganado.
Pero también quiero nuevos colores porque por alguna razón no me gustan los colores que tengo.
También puedo hacer clic en el botón de nuevos colores.
aleatorio entre los seis colores aleatorios y volveremos al último modo fácil y difícil.
Básicamente, necesitamos un botón que restablezca la selección del juego. Elija un nuevo color
Entonces este botón hace lo mismo.
Sin embargo, el texto cambia si ganamos el juego y nos pregunta si queremos volver a jugar, así podemos volver
a jugar y eso lo restablecerá.
Pero también puedo hacer clic en nuevos colores y eso también lo restablecerá.
Entonces eso es en lo que nos enfocaremos.
Y para comenzar voy a continuar y agregar el botón y agregar esa franja que se extiende de
modo que la franja contenga este botón para un nuevo color o para jugar de nuevo.
Y contiene el mensaje que ya tenemos.
Y luego los dos botones que haremos más tarde.
Entonces, si vamos lo primero que tenemos que hacer, ya tenemos un div. Voy a darle un id. De franja
y luego podemos usar eso.
Y luego ya tenemos nuestro lapso dentro que mostrará algo como correcto o intenta nuevamente.
Y aquí dentro solo agregaremos nuestro botón y este botón comenzará diciendo nuevos colores que podemos guardar
y refrescamos.
OK que se ve tan mal como cabría esperar.
Avancemos y agreguemos el color de fondo blanco y centremos todo en este div. Entonces, a nuestro div se
le llama raya.
Vayamos a nuestros C Ss y vamos a seleccionar Strype, que es una identificación.
Entonces, necesitamos usar la banda con una ocurrencia tardía.
Y vamos a establecer un fondo de color de fondo para que sea blanco.
Voy a configurar la altura para que sea de 30 píxeles, de modo que tengamos un div agradable y alto que
sea un div relativamente alto y voy a configurar el alineamiento de texto para que sea Center.
Y ahora si actualizo, obtienes un div blanco que cruza todo.
Es un poco más alto de lo que era.
Tenemos un botón aquí solo para cualquier cosa.
Y si gano o pierdo o recibo una respuesta incorrecta, hay un lapso que simplemente no puede ver.
Y eso es porque el texto de ese tramo es blanco.
Entonces, lo que podrías pensar es entrar en nuestra sección del div y decir que el color
del texto debe ser negro, pero desafortunadamente eso no funciona.
la idea de la franja debe ser negro, color de texto, negro, y uno pensaría bien, es
súper específico, si se puede recordar nuestras primeras conferencias e ID de especificidad de CSS son muy específicas.
Y este es un problema de especificidad porque estamos diciendo que con esta línea, todo dentro de la
cosa con
El asunto es que esto está configurando los colores para que sean negros en el div con banda de ID.
Y luego estamos configurando todos los tramos para que pueda ver aquí que son de color blanco para que esto sea blanco y eso
lo hace más específico porque en realidad estamos apuntando al elemento en sí mismo en lugar
de al padre y haciendo que herede el color.
Entonces tenemos algunas opciones.
Lo que haré es en realidad deshacerme de esto por ahora.
Ya no vamos a configurar el color para que sea blanco y podemos actualizar y verás que esto no cambia de color,
es un lapso de tiempo en blanco a pesar de que nos deshicimos de la línea que decía que todos
los tramos son blancos y eso es porque está dentro de un H1 y hereda el color de texto H1 que es blanco.
De la misma manera que este tramo aquí es negro.
Heredó el color del texto de negro o simplemente el negro de color regular de la división div que
está a su alrededor, que se puede ver aquí color negro.
Y ese es nuestro golpeado.
DE ACUERDO.
Así que trabajemos en obtener este botón para reiniciar el juego, así que para empezar necesitamos agregar un detector de eventos.
Y antes de que podamos hacer eso, tenemos que seleccionar ese botón.
Así que voy a dar ese botón e ID aquí, simplemente lo llamaremos ID igual a restablecer y luego seleccionaremos ese
botón de reinicio en lugar de un Javascript.
Entonces, el botón var reset equivale a documentar ese selector de consulta con nuestra octava o reinicio.
Y, como siempre, me gustaría agregar mi sencillo detector de eventos de prueba.
Entonces, el botón de reinicio agrega el detector de eventos.
y cuando haga clic en todo lo que haremos es hacer un simple botón de reinicio rápido de alerta, así como se actualice.
Haga clic
Y si hago clic en esto, recibo mi alerta y eso significa que estamos listos para continuar.
Así que, luego, podemos trabajar en la lógica para reiniciar.
Entonces, lo que tenemos que hacer vamos a escribir el pseudo código.
Cuando haces clic en ese botón, necesitas generar todos los colores nuevos.
Necesitamos elegir un nuevo color aleatorio del conjunto y luego tenemos que cambiar los colores de los cuadrados en
la página.
Entonces, para generar todos los colores nuevos, ya tenemos esa función existente que genera colores aleatorios.
Así que simplemente diremos que los colores ahora son iguales para generar colores aleatorios de seis.
Y luego seleccionaremos un nuevo color aleatorio para elegir el color que ahora es igual a elegir el color del método
o la función que definimos.
Hay una cosa más que necesitamos hacer, que es cambiar este color de visualización para que coincida con el color de las
nuevas selecciones.
Entonces, diremos que cambie la visualización
en color para que coincida con el color elegido, de modo que uno sea simple.
si actualizamos nuestra página e intentamos hacer clic en nuevos colores, lo que está haciendo es generar seis nuevos colores.
Todo lo que tenemos que hacer es decir que el contenido del texto del punto de la pantalla a color es igual al
color elegido y
Todavía no los vemos porque no tenemos ese código.
Y luego selecciona uno de esos colores y luego cambia lo que vemos aquí para que coincida con el
color picta.
Por lo tanto, nos da un nuevo color aleatorio y seis colores aleatorios detrás de escena.
Así que la última pieza es reflejar esos seis nuevos colores en la página y ya lo hemos hecho antes.
estamos recorriendo todos los cuadrados y estamos cambiando el estilo del fondo para que sean colores.
Aquí abajo
Así que voy a empezar simplemente duplicando todo eso aquí y vamos a refactorizar esto.
Pero comenzar a poner todo aquí.
Así que recorra todos los cuadrados cuadrados para flanquear I plus plus y luego todo lo que tenemos que hacer
es decir cuadrados. Estilo que el fondo es igual a los colores.
Yo salvaré.
Y si actualizamos y hacemos clic en nuevos colores, genera 60 colores aleatorios.
Elige uno.
Actualiza la pantalla para reflejar el color de la imagen y cambia los seis cuadrados para que coincida con
los seis nuevos colores.
Entonces, probemos y veamos si nuestra lógica anterior también se mantiene.
DE ACUERDO.
Entonces esta es una buena cantidad de rojo.
Muy poco verde y una buena cantidad de azul.
Intentemos hacer clic en algunos que no creemos que sean correctos.
Y ahora vamos por uno de los morados.
Entonces parece un poco más rojo el azul.
Así que voy a adivinar esto y estamos en lo cierto y parece que las cosas siguen funcionando bien.
Nuevos colores rápidos nuevamente.
Queremos restablecer esto
Esa es una cosmetica realmente menor.
Pero cuando hacemos clic en nuevos colores, debemos restablecer la pantalla aquí para que vuelva a ser
negra o a este color gris oscuro.
hacer es que cuando queremos queremos decir que vuelva a jugar como pueden ver aquí, así que ganaré aquí.
La otra cosa que queremos
Este es mucho verde.
Yo gano y me dice que vuelva a jugar y hace lo mismo.
Funcionalmente, realmente no cambia, somos nosotros y un texto diferente.
Entonces eso es simple de hacer.
Todo lo que tenemos que hacer es encontrar dónde está el código para verificar si ganas.
Eso está aquí.
Y luego solo queremos cambiar el contenido de texto de ese botón.
Entonces el botón se llamó botón de reinicio.
Entonces, reinicie el botón para que el contenido de texto sea igual a jugar nuevamente con un signo de interrogación actualizar dice nuevos colores.
Ahora intentemos jugar uno de estos.
Este es mucho rojo y mucho verde y un poco azul.
Así que mucho rojo y mucho verde nos va a dar un color amarillo.
Así que reduzcamos algunos de ellos.
Y luego, un poco de azul lo hará más claro y brillante.
Entonces, si probamos uno de estos como este o este, verán que no están del todo bien.
Y esta es nuestra respuesta aquí y nos dice que juguemos de nuevo.
Y muy rápido y hace exactamente lo mismo.
Lo último que mencioné es cambiar el color de fondo.
Así que aquí podemos hacer eso al final del botón de reinicio.
Solo vamos a seleccionar ese H-1.
Es un punto que seleccionamos aquí.
Eso es fondo de acceso telefónico.
UPS es igual.
Y es ese hexadecimal 2 3 2 3 2 3 que es si te olvidaste de que podrías ir a buscar en VER para evaluar
el color de fondo del cuerpo.
O lo configuramos aquí cuando eliminamos uno de los colores si eliges el color equivocado.
Cambiamos el color de fondo para que sea igual al cuerpo.
OK, refresquemos nuevos colores.
Vamos a ganar ahora
Simplemente rápido al azar solo por el tiempo, hacemos clic en jugar nuevamente y cambia a un fondo
negro.
O el fondo gris oscuro.
OK, así que eso es todo por este video.
A continuación, vamos a agregar los botones para elegir entre el modo fácil y el modo difícil.
Y finalmente, vamos a estilizar las cosas para que se vean bien