1
00:00:00,700 --> 00:00:02,670
De acuerdo, entonces vamos a continuar donde lo dejamos.

2
00:00:02,790 --> 00:00:06,990
Vamos a comenzar a agregar algo del comportamiento cuando haga clic en el color correcto y cuando

3
00:00:06,990 --> 00:00:08,620
haga clic en el color incorrecto.

4
00:00:08,640 --> 00:00:10,860
Empecemos con cuando eliges el color equivocado.

5
00:00:11,010 --> 00:00:16,000
Lo que queremos hacer es atenuar esto para que coincida con el color de fondo aquí.

6
00:00:16,170 --> 00:00:18,070
Entonces eso es bastante sencillo.

7
00:00:18,070 --> 00:00:26,520
Solo es cuestión de escribir este estilo de punto que el fondo sea igual y luego solo tenemos que hacer coincidir

8
00:00:26,520 --> 00:00:31,080
el color que establecemos en nuestro C S con un aspecto similar.

9
00:00:31,080 --> 00:00:33,980
Así que pegaremos eso y guardaremos.

10
00:00:34,530 --> 00:00:35,470
Probémoslo.

11
00:00:35,610 --> 00:00:37,050
Hagamos clic en uno de los equivocados.

12
00:00:37,140 --> 00:00:41,670
Se puede ver que se desvanece y si hice clic en el derecho seguimos recibiendo nuestra alerta.

13
00:00:42,060 --> 00:00:43,710
OK, así que refrescaré.

14
00:00:43,710 --> 00:00:45,490
Así que eso es con lo que vamos a empezar.

15
00:00:45,600 --> 00:00:52,230
Y la otra cosa que queremos que suceda es que queremos una pantalla para que puedas verla aquí mismo.

16
00:00:52,320 --> 00:00:56,700
Habrá una pantalla así que si hago clic en uno de los colores y dice intentar nuevamente.

17
00:00:57,090 --> 00:01:04,740
Y si lo hago bien aquí, se muestra correcto y luego se enfocará en otras cosas como cambiar

18
00:01:04,740 --> 00:01:05,620
el color.

19
00:01:05,820 --> 00:01:07,290
Una vez que tengamos esa primera parte.

20
00:01:07,350 --> 00:01:13,290
Así que agreguemos en este párrafo o el lapso en realidad es lo que es y hagamos que muestre el mensaje correcto.

21
00:01:14,370 --> 00:01:20,520
Así que volvemos a nuestro HMO y vamos a agregar otro div y en realidad tenemos tres o cuatro piezas

22
00:01:20,520 --> 00:01:22,680
diferentes que irán aquí con el tiempo.

23
00:01:22,680 --> 00:01:26,890
Por ahora solo va a haber un pequeño lapso dentro de ese div.

24
00:01:27,450 --> 00:01:29,220
Entonces, como mencioné, será más.

25
00:01:29,220 --> 00:01:34,340
Por ahora es solo el lapso de tiempo que va a estar vacío para comenzar a medida que actualizo la

26
00:01:34,350 --> 00:01:36,480
página, puede ver que no hay ningún mensaje aquí.

27
00:01:36,480 --> 00:01:41,520
Así que vamos a ir aquí, tengo un lapso vacío y vamos a darle un I. RE. y lo llamaremos mensaje.

28
00:01:41,910 --> 00:01:45,410
Y de esa manera podemos seleccionarlo en lugar de nuestro Javascript.

29
00:01:45,420 --> 00:01:49,000
Así que vamos a nuestro javascript ahora y seleccionamos eso.

30
00:01:49,140 --> 00:01:59,670
Así que aquí lo llamaremos Visualización de mensaje de granja igual a documento y haremos un selector de consulta de selector de consulta

31
00:02:00,080 --> 00:02:02,870
y que llamamos a ese mensaje.

32
00:02:03,090 --> 00:02:04,410
Necesitamos la identificación.

33
00:02:05,010 --> 00:02:06,400
Entonces necesitamos el arco para Thor.

34
00:02:06,960 --> 00:02:09,110
Y luego si el usuario adivina mal.

35
00:02:09,210 --> 00:02:20,260
Todo lo que tenemos que hacer es escribir el contenido de texto de punto de visualización de mensaje igual a intentarlo de nuevo.

36
00:02:21,180 --> 00:02:25,560
Y si actualizamos y haces clic en el incorrecto, es realmente difícil de ver.

37
00:02:25,920 --> 00:02:28,470
Entonces deberíamos cambiar el color de fondo o el color del texto.

38
00:02:28,580 --> 00:02:30,120
Podemos hacer eso aquí.

39
00:02:30,420 --> 00:02:37,320
Solo diremos que todos los tramos deberían tener un color blanco y si estamos frescos.

40
00:02:37,320 --> 00:02:39,620
Ahora hice clic en el equivocado.

41
00:02:39,690 --> 00:02:41,330
Me dice que intente de nuevo.

42
00:02:41,910 --> 00:02:42,250
DE ACUERDO.

43
00:02:42,270 --> 00:02:44,620
Y seguimos obteniéndolo hasta que obtengo el correcto.

44
00:02:44,760 --> 00:02:46,180
Y todavía recibimos esta alerta.

45
00:02:46,410 --> 00:02:54,360
Entonces, si obtenemos la correcta, lo que querremos hacer es cambiar lo que mostramos en la pantalla de mensajes.

46
00:02:54,780 --> 00:02:57,060
Queremos cambiarlo para que sea correcto.

47
00:02:57,300 --> 00:03:00,840
Entonces el mensaje muestra que el contenido del

48
00:03:03,540 --> 00:03:05,700
texto es igual a correcto.

49
00:03:06,630 --> 00:03:07,980
Así.

50
00:03:08,080 --> 00:03:11,000
Y ahora, si lo intentamos, nos equivocamos y volvemos a intentarlo.

51
00:03:11,190 --> 00:03:13,730
Lo hacemos bien y nos dice correcto.

52
00:03:14,100 --> 00:03:14,340
DE ACUERDO.

53
00:03:14,340 --> 00:03:20,730
Entonces tenemos esa lógica básica allí donde estamos comprobando si tenemos razón o no y estamos mostrando

54
00:03:20,730 --> 00:03:21,280
algo.

55
00:03:21,420 --> 00:03:27,030
Lo siguiente que podríamos hacer es agregar la función donde cuando obtenga la respuesta correcta, todas las casillas cambien de

56
00:03:27,030 --> 00:03:28,940
color para que coincida con esa respuesta.

57
00:03:28,950 --> 00:03:32,180
Entonces, aquí, cuando haces clic en la respuesta correcta, todos cambian de grado.

58
00:03:32,340 --> 00:03:35,370
Y luego también podemos hacer los antecedentes de esta H1 también.

59
00:03:35,370 --> 00:03:38,360
Entonces, lo primero que tenemos que hacer para que esto funcione.

60
00:03:38,580 --> 00:03:42,750
En realidad voy a escribir una función separada para hacerlo solo para mantener mi código

61
00:03:42,750 --> 00:03:43,900
un poco más organizado.

62
00:03:44,040 --> 00:03:52,290
Cambie los colores y se tomará un solo argumento de una cadena de color y luego dentro

63
00:03:52,290 --> 00:04:01,430
de aquí tenemos que recorrer todos los cuadrados para cambiar cada color para que coincida con el color dado.

64
00:04:02,550 --> 00:04:09,700
es igual a cero es menor que la longitud de punto de color o los colores de esa longitud más más.

65
00:04:09,750 --> 00:04:15,770
Entonces, para recorrer todos los cuadrados que ya hemos hecho, solo una cuestión de cuatro VAR I

66
00:04:15,970 --> 00:04:21,880
Y luego, en el interior, tendremos que cambiar cada color y ya lo hemos hecho antes.

67
00:04:22,080 --> 00:04:23,530
Es solo un color.

68
00:04:23,740 --> 00:04:32,820
Obtuve estilo: el fondo resistente es igual al color, que es lo que proporcionamos técnicamente, nuestro código cambiará cada cuadrado para

69
00:04:32,910 --> 00:04:35,260
que coincida con el color.

70
00:04:35,370 --> 00:04:38,670
Así que incluye este que es el color correcto.

71
00:04:38,700 --> 00:04:42,640
Simplemente lo sobreescribirá y lo cambiará al mismo color que ya es.

72
00:04:42,660 --> 00:04:47,340
que es el fondo con estilo del color que fue hecho clic.

73
00:04:47,520 --> 00:04:56,550
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

74
00:04:56,550 --> 00:04:59,660
color correcto, que es la variable que creamos aquí,

75
00:04:59,790 --> 00:05:00,700
Y estamos haciendo esto

76
00:05:00,750 --> 00:05:02,080
Si lo adivinaron correctamente.

77
00:05:02,130 --> 00:05:05,600
Entonces, si guardamos y actualizamos, veamos si tenemos algún error.

78
00:05:05,700 --> 00:05:06,330
Nop.

79
00:05:06,630 --> 00:05:07,770
Y ahora es rápido.

80
00:05:07,770 --> 00:05:08,370
Incorrecto.

81
00:05:08,400 --> 00:05:09,030
Incorrecto.

82
00:05:10,050 --> 00:05:16,250
Correcto y tenemos un problema cuando haces clic en la opción correcta nos dice que no podemos establecer el

83
00:05:16,590 --> 00:05:22,670
fondo de la propiedad como indefinido si miramos lo que está hablando sobre los colores, yo estilo el fondo.

84
00:05:22,770 --> 00:05:27,780
Por supuesto que tenemos un problema aquí porque estoy haciendo esto con nuestra matriz de colores y este no

85
00:05:27,780 --> 00:05:28,790
debería ser nuestro color.

86
00:05:29,120 --> 00:05:30,570
Esta es nuestra matriz de colores.

87
00:05:30,600 --> 00:05:35,070
Debería estar en la matriz de cuadrados, que son los cuadrados que estamos tratando de cambiar.

88
00:05:35,060 --> 00:05:39,860
Lo que estaba haciendo era la matriz de colores solo las cuerdas.

89
00:05:39,960 --> 00:05:45,810
Así que cuadra la longitud y ahora debería ser bueno ir y todos cambian al color

90
00:05:46,650 --> 00:05:48,120
que se eligió así.

91
00:05:48,120 --> 00:05:48,790
Todo bien.

92
00:05:48,900 --> 00:05:54,990
Así que, a continuación, centrémonos en obtener los colores aleatorios en la matriz y luego elegir un color aleatorio

93
00:05:54,990 --> 00:05:55,940
de esa matriz.

94
00:05:55,940 --> 00:06:00,830
Así que voy a comenzar con la segunda cosa que es elegir un color aleatorio en

95
00:06:00,840 --> 00:06:05,910
lugar de simplemente hacer tres colores para ayudarnos a elegir un elemento aleatorio de esta matriz.

96
00:06:05,910 --> 00:06:07,830
De hecho, voy a hacer una función.

97
00:06:07,830 --> 00:06:12,630
Y la razón por la que lo hago es para limpiar nuestro código, pero vamos a usar

98
00:06:12,720 --> 00:06:17,910
esa función más adelante porque cada vez que comenzamos un nuevo juego tenemos que elegir un nuevo color.

99
00:06:17,940 --> 00:06:22,040
Entonces, es algo a lo que tendremos que llamar varias veces para que funcione.

100
00:06:22,050 --> 00:06:25,200
Voy a comenzar llamando a la función que todavía no existe.

101
00:06:25,200 --> 00:06:29,460
Así que voy a decir que el color de Pick es igual y vamos a nombrarlo.

102
00:06:29,460 --> 00:06:34,760
Elige el color y luego tenemos que definir el color de la selección.

103
00:06:34,980 --> 00:06:38,420
Así que vengo aquí, simplemente hazlo en la parte inferior, por ahora, selección de función.

104
00:06:38,430 --> 00:06:43,070
Color en esta función, tenemos que hacer dos cosas.

105
00:06:43,080 --> 00:06:45,330
Uno es elegir un número aleatorio.

106
00:06:45,810 --> 00:06:50,650
Entonces algo como 0 o 1 o 2 hasta el último índice de esta matriz.

107
00:06:51,180 --> 00:06:57,220
Y luego necesitamos usar ese número para acceder al color de esta matriz y devolver ese color.

108
00:06:57,300 --> 00:06:59,070
Así que comenzaremos por elegir un número aleatorio.

109
00:06:59,220 --> 00:07:05,160
Y la forma en que escogemos un número aleatorio en javascript es usando matemáticas al azar y las matemáticas

110
00:07:05,190 --> 00:07:09,420
al azar seleccionarán un número entre 0 y 1 y no incluye uno.

111
00:07:09,420 --> 00:07:11,420
Déjame mostrarte que las matemáticas no son

112
00:07:14,340 --> 00:07:16,620
aleatorias y es un decimal largo y largo.

113
00:07:16,620 --> 00:07:24,860
Entonces, si quisiéramos generar un número entre 0 y 6, por ejemplo, para imitar un Dayrell, haríamos

114
00:07:24,860 --> 00:07:28,850
las matemáticas al azar y luego las multiplicaríamos.

115
00:07:29,000 --> 00:07:36,560
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

116
00:07:36,670 --> 00:07:37,320
nueve nueve.

117
00:07:37,640 --> 00:07:44,790
Entonces, si queremos que ese número pase de uno arriba y diga seis, podemos multiplicarlo por

118
00:07:44,940 --> 00:07:48,350
seis y luego agregar uno al final.

119
00:07:48,380 --> 00:07:53,570
Ahora podemos llegar a seis puntos noventa y nueve y obtener un número entero.

120
00:07:53,580 --> 00:08:00,660
se devuelva de matemática al azar multiplicando por 6 agregando 1 y luego eliminar todo después del punto decimal.

121
00:08:00,660 --> 00:08:08,250
Entonces necesitamos cortar ese decimal para que podamos usar el último piso de matemáticas, que es otro método y que simplemente

122
00:08:08,250 --> 00:08:09,630
tomará cualquier cosa que

123
00:08:09,770 --> 00:08:13,790
Y eso nos da números aleatorios entre 1 y 6.

124
00:08:13,920 --> 00:08:18,460
Como puede ver, no necesariamente queremos solo entre 1 y 6.

125
00:08:18,540 --> 00:08:22,090
Esta matriz eventualmente podría tener solo tres elementos.

126
00:08:22,620 --> 00:08:25,800
Como puede ver cuando voy al modo fácil, solo hay tres colores.

127
00:08:25,920 --> 00:08:27,600
Entonces podría tener tres y podría tener seis.

128
00:08:27,690 --> 00:08:33,110
y luego multiplicarlo por la longitud de la matriz y eso es OK porque recuerda que no es inclusivo.

129
00:08:33,120 --> 00:08:38,460
Así que vamos a usar la longitud de la matriz para generar nuestro color, así se verá como

130
00:08:38,460 --> 00:08:42,690
este pensamiento matemático al azar vamos a generar un número entre 0 y 1

131
00:08:42,750 --> 00:08:47,330
Entonces, aunque la longitud de la matriz es una más que el índice más alto.

132
00:08:47,390 --> 00:08:48,970
Entonces la longitud es seis.

133
00:08:49,080 --> 00:08:51,040
Pero el número más alto que queremos es cinco.

134
00:08:51,410 --> 00:08:54,500
Porque el número aleatorio solo va entre 0 y 1.

135
00:08:54,500 --> 00:08:57,140
Pero no incluye uno, estamos en buena forma.

136
00:08:57,330 --> 00:09:03,900
punto decimal restante y luego, una vez que lo hayamos hecho, obtendremos un número aleatorio.

137
00:09:03,890 --> 00:09:11,070
Así que vamos a generar eso y luego haremos un cálculo de ese piso que cortará el

138
00:09:11,610 --> 00:09:18,810
Lo siguiente que debemos hacer es guardar esto en una variable y luego usar esa variable para acceder a un elemento

139
00:09:18,810 --> 00:09:20,990
de la matriz en ese índice.

140
00:09:21,000 --> 00:09:26,720
Entonces, vamos a decir colores de retorno al azar.

141
00:09:26,730 --> 00:09:33,230
Entonces, elige un número aleatorio como tres y luego devuelve colores de tres.

142
00:09:33,240 --> 00:09:33,630
Todo bien.

143
00:09:33,620 --> 00:09:35,420
Así que vamos a probar esto.

144
00:09:35,460 --> 00:09:36,490
Tenemos selección de color.

145
00:09:36,620 --> 00:09:39,150
Llamamos color de selección en la parte superior aquí.

146
00:09:39,480 --> 00:09:45,690
Así que si actualizo, deberíamos esperar que esto cambie y cambia a medida que actualizo.

147
00:09:45,720 --> 00:09:51,870
Puedes ver que a veces obtienes la misma porque solo hay seis y nunca cambian, pero

148
00:09:52,320 --> 00:09:54,170
cambia casi todas las veces.

149
00:09:54,170 --> 00:09:57,900
Ahora veamos si nuestra lógica rápida funciona de la misma manera.

150
00:09:57,890 --> 00:10:03,060
Entonces, si hago clic en este, es cero rojo, cero verde y todo azul.

151
00:10:03,060 --> 00:10:05,430
Intentemos hacer clic en cyan rojo.

152
00:10:05,420 --> 00:10:06,120
Bueno.

153
00:10:06,210 --> 00:10:08,130
Si hago clic en azul, es correcto