De acuerdo, entonces vamos a continuar donde lo dejamos.
Vamos a comenzar a agregar algo del comportamiento cuando haga clic en el color correcto y cuando
haga clic en el color incorrecto.
Empecemos con cuando eliges el color equivocado.
Lo que queremos hacer es atenuar esto para que coincida con el color de fondo aquí.
Entonces eso es bastante sencillo.
Solo es cuestión de escribir este estilo de punto que el fondo sea igual y luego solo tenemos que hacer coincidir
el color que establecemos en nuestro C S con un aspecto similar.
Así que pegaremos eso y guardaremos.
Probémoslo.
Hagamos clic en uno de los equivocados.
Se puede ver que se desvanece y si hice clic en el derecho seguimos recibiendo nuestra alerta.
OK, así que refrescaré.
Así que eso es con lo que vamos a empezar.
Y la otra cosa que queremos que suceda es que queremos una pantalla para que puedas verla aquí mismo.
Habrá una pantalla así que si hago clic en uno de los colores y dice intentar nuevamente.
Y si lo hago bien aquí, se muestra correcto y luego se enfocará en otras cosas como cambiar
el color.
Una vez que tengamos esa primera parte.
Así que agreguemos en este párrafo o el lapso en realidad es lo que es y hagamos que muestre el mensaje correcto.
Así que volvemos a nuestro HMO y vamos a agregar otro div y en realidad tenemos tres o cuatro piezas
diferentes que irán aquí con el tiempo.
Por ahora solo va a haber un pequeño lapso dentro de ese div.
Entonces, como mencioné, será más.
Por ahora es solo el lapso de tiempo que va a estar vacío para comenzar a medida que actualizo la
página, puede ver que no hay ningún mensaje aquí.
Así que vamos a ir aquí, tengo un lapso vacío y vamos a darle un I. RE. y lo llamaremos mensaje.
Y de esa manera podemos seleccionarlo en lugar de nuestro Javascript.
Así que vamos a nuestro javascript ahora y seleccionamos eso.
Así que aquí lo llamaremos Visualización de mensaje de granja igual a documento y haremos un selector de consulta de selector de consulta
y que llamamos a ese mensaje.
Necesitamos la identificación.
Entonces necesitamos el arco para Thor.
Y luego si el usuario adivina mal.
Todo lo que tenemos que hacer es escribir el contenido de texto de punto de visualización de mensaje igual a intentarlo de nuevo.
Y si actualizamos y haces clic en el incorrecto, es realmente difícil de ver.
Entonces deberíamos cambiar el color de fondo o el color del texto.
Podemos hacer eso aquí.
Solo diremos que todos los tramos deberían tener un color blanco y si estamos frescos.
Ahora hice clic en el equivocado.
Me dice que intente de nuevo.
DE ACUERDO.
Y seguimos obteniéndolo hasta que obtengo el correcto.
Y todavía recibimos esta alerta.
Entonces, si obtenemos la correcta, lo que querremos hacer es cambiar lo que mostramos en la pantalla de mensajes.
Queremos cambiarlo para que sea correcto.
Entonces el mensaje muestra que el contenido del
texto es igual a correcto.
Así.
Y ahora, si lo intentamos, nos equivocamos y volvemos a intentarlo.
Lo hacemos bien y nos dice correcto.
DE ACUERDO.
Entonces tenemos esa lógica básica allí donde estamos comprobando si tenemos razón o no y estamos mostrando
algo.
Lo siguiente que podríamos hacer es agregar la función donde cuando obtenga la respuesta correcta, todas las casillas cambien de
color para que coincida con esa respuesta.
Entonces, aquí, cuando haces clic en la respuesta correcta, todos cambian de grado.
Y luego también podemos hacer los antecedentes de esta H1 también.
Entonces, lo primero que tenemos que hacer para que esto funcione.
En realidad voy a escribir una función separada para hacerlo solo para mantener mi código
un poco más organizado.
Cambie los colores y se tomará un solo argumento de una cadena de color y luego dentro
de aquí tenemos que recorrer todos los cuadrados para cambiar cada color para que coincida con el color dado.
es igual a cero es menor que la longitud de punto de color o los colores de esa longitud más más.
Entonces, para recorrer todos los cuadrados que ya hemos hecho, solo una cuestión de cuatro VAR I
Y luego, en el interior, tendremos que cambiar cada color y ya lo hemos hecho antes.
Es solo un color.
Obtuve estilo: el fondo resistente es igual al color, que es lo que proporcionamos técnicamente, nuestro código cambiará cada cuadrado para
que coincida con el color.
Así que incluye este que es el color correcto.
Simplemente lo sobreescribirá y lo cambiará al mismo color que ya es.
que es el fondo con estilo del color que fue hecho clic.
Podemos agregar un código para arreglarlo, pero comencemos con esto y luego necesitamos llamar a esta función cambiar los colores y tenemos que pasar el
color correcto, que es la variable que creamos aquí,
Y estamos haciendo esto
Si lo adivinaron correctamente.
Entonces, si guardamos y actualizamos, veamos si tenemos algún error.
Nop.
Y ahora es rápido.
Incorrecto.
Correcto y tenemos un problema cuando haces clic en la opción correcta nos dice que no podemos establecer el
fondo de la propiedad como indefinido si miramos lo que está hablando sobre los colores, yo estilo el fondo.
Por supuesto que tenemos un problema aquí porque estoy haciendo esto con nuestra matriz de colores y este no
debería ser nuestro color.
Esta es nuestra matriz de colores.
Debería estar en la matriz de cuadrados, que son los cuadrados que estamos tratando de cambiar.
Lo que estaba haciendo era la matriz de colores solo las cuerdas.
Así que cuadra la longitud y ahora debería ser bueno ir y todos cambian al color
que se eligió así.
Todo bien.
Así que, a continuación, centrémonos en obtener los colores aleatorios en la matriz y luego elegir un color aleatorio
de esa matriz.
Así que voy a comenzar con la segunda cosa que es elegir un color aleatorio en
lugar de simplemente hacer tres colores para ayudarnos a elegir un elemento aleatorio de esta matriz.
De hecho, voy a hacer una función.
Y la razón por la que lo hago es para limpiar nuestro código, pero vamos a usar
esa función más adelante porque cada vez que comenzamos un nuevo juego tenemos que elegir un nuevo color.
Entonces, es algo a lo que tendremos que llamar varias veces para que funcione.
Voy a comenzar llamando a la función que todavía no existe.
Así que voy a decir que el color de Pick es igual y vamos a nombrarlo.
Elige el color y luego tenemos que definir el color de la selección.
Así que vengo aquí, simplemente hazlo en la parte inferior, por ahora, selección de función.
Color en esta función, tenemos que hacer dos cosas.
Uno es elegir un número aleatorio.
Entonces algo como 0 o 1 o 2 hasta el último índice de esta matriz.
Y luego necesitamos usar ese número para acceder al color de esta matriz y devolver ese color.
Así que comenzaremos por elegir un número aleatorio.
Y la forma en que escogemos un número aleatorio en javascript es usando matemáticas al azar y las matemáticas
al azar seleccionarán un número entre 0 y 1 y no incluye uno.
Déjame mostrarte que las matemáticas no son
aleatorias y es un decimal largo y largo.
Entonces, si quisiéramos generar un número entre 0 y 6, por ejemplo, para imitar un Dayrell, haríamos
las matemáticas al azar y luego las multiplicaríamos.
En nuestro caso, si hiciéramos solo una moneda de diez centavos, en realidad nunca obtendríamos un número superior a cinco punto nueve nueve
nueve nueve.
Entonces, si queremos que ese número pase de uno arriba y diga seis, podemos multiplicarlo por
seis y luego agregar uno al final.
Ahora podemos llegar a seis puntos noventa y nueve y obtener un número entero.
se devuelva de matemática al azar multiplicando por 6 agregando 1 y luego eliminar todo después del punto decimal.
Entonces necesitamos cortar ese decimal para que podamos usar el último piso de matemáticas, que es otro método y que simplemente
tomará cualquier cosa que
Y eso nos da números aleatorios entre 1 y 6.
Como puede ver, no necesariamente queremos solo entre 1 y 6.
Esta matriz eventualmente podría tener solo tres elementos.
Como puede ver cuando voy al modo fácil, solo hay tres colores.
Entonces podría tener tres y podría tener seis.
y luego multiplicarlo por la longitud de la matriz y eso es OK porque recuerda que no es inclusivo.
Así que vamos a usar la longitud de la matriz para generar nuestro color, así se verá como
este pensamiento matemático al azar vamos a generar un número entre 0 y 1
Entonces, aunque la longitud de la matriz es una más que el índice más alto.
Entonces la longitud es seis.
Pero el número más alto que queremos es cinco.
Porque el número aleatorio solo va entre 0 y 1.
Pero no incluye uno, estamos en buena forma.
punto decimal restante y luego, una vez que lo hayamos hecho, obtendremos un número aleatorio.
Así que vamos a generar eso y luego haremos un cálculo de ese piso que cortará el
Lo siguiente que debemos hacer es guardar esto en una variable y luego usar esa variable para acceder a un elemento
de la matriz en ese índice.
Entonces, vamos a decir colores de retorno al azar.
Entonces, elige un número aleatorio como tres y luego devuelve colores de tres.
Todo bien.
Así que vamos a probar esto.
Tenemos selección de color.
Llamamos color de selección en la parte superior aquí.
Así que si actualizo, deberíamos esperar que esto cambie y cambia a medida que actualizo.
Puedes ver que a veces obtienes la misma porque solo hay seis y nunca cambian, pero
cambia casi todas las veces.
Ahora veamos si nuestra lógica rápida funciona de la misma manera.
Entonces, si hago clic en este, es cero rojo, cero verde y todo azul.
Intentemos hacer clic en cyan rojo.
Bueno.
Si hago clic en azul, es correcto