1
00:00:00,090 --> 00:00:01,280
Así que estamos en buena forma aquí.

2
00:00:01,370 --> 00:00:06,980
Lo que queremos hacer ahora es hacerlo de modo que no usemos los mismos seis colores cada vez.

3
00:00:07,230 --> 00:00:12,990
En su lugar, queremos generar seis colores aleatorios y llenar esta matriz con esos seis colores aleatorios

4
00:00:12,990 --> 00:00:15,620
y luego elegir uno para generar esos colores.

5
00:00:15,630 --> 00:00:18,320
De hecho, voy a escribir otra función para ayudarnos.

6
00:00:18,390 --> 00:00:24,360
Así que nuestra función Nener nuestra raza la matriz codificada y voy a establecer colores iguales a

7
00:00:24,360 --> 00:00:30,960
nuestra llamada de función que llamaremos generar colores aleatorios y todavía no existe y va a tomar un único

8
00:00:30,960 --> 00:00:34,590
argumento que decide cuántos colores para generar en la matriz.

9
00:00:34,590 --> 00:00:40,230
Entonces, si queremos una matriz con tres elementos que querremos eventualmente cuando lleguemos al modo fácil

10
00:00:40,230 --> 00:00:41,820
versus modo difícil, queremos 6.

11
00:00:42,060 --> 00:00:43,510
Entonces comenzaremos con 6.

12
00:00:43,560 --> 00:00:45,570
Eso es lo que queremos cuando se carga la página.

13
00:00:45,900 --> 00:00:51,900
Luego tenemos que crear la función generar colores aleatorios que toma un número y devuelve un número X

14
00:00:51,960 --> 00:00:54,430
de colores aleatorios en lugar de una matriz.

15
00:00:54,450 --> 00:00:57,900
Así que lo haré aquí abajo.

16
00:00:57,900 --> 00:01:08,730
función genera colores aleatorios y debería tomar el argumento de que simplemente llamaremos a entumecido y luego en lugar de aquí.

17
00:01:08,730 --> 00:01:09,060
La

18
00:01:09,060 --> 00:01:10,440
De acuerdo, mi pseudo código.

19
00:01:10,440 --> 00:01:12,550
Así que voy a hacer una matriz.

20
00:01:12,900 --> 00:01:22,410
Voy a agregar algunos colores aleatorios a la matriz y luego voy a devolver esa matriz al final.

21
00:01:24,120 --> 00:01:26,370
Entonces, comenzar esta es la parte más fácil.

22
00:01:26,370 --> 00:01:28,200
Haz una matriz simplemente vacía.

23
00:01:28,380 --> 00:01:34,590
Así que lo llamaremos simplemente una matriz vacía y luego, en la parte inferior, devolveremos

24
00:01:34,590 --> 00:01:35,980
la misma matriz.

25
00:01:36,000 --> 00:01:38,610
La parte difícil es la lógica que está en el medio.

26
00:01:38,640 --> 00:01:42,660
Entonces, aquí tenemos que agregar colores aleatorios conocidos.

27
00:01:42,690 --> 00:01:46,700
Entonces, ¿qué significa eso? Necesitamos repetir algo saber varias veces.

28
00:01:46,760 --> 00:01:49,000
Entonces seis o tres veces

29
00:01:49,230 --> 00:01:50,830
Entonces usaremos un bucle para hacer eso.

30
00:01:51,120 --> 00:01:55,540
Entonces comenzaremos con nuestro bucle de nuestro igual a cero.

31
00:01:56,430 --> 00:02:01,800
Estoy menos entumecido I plus plus.

32
00:02:02,100 --> 00:02:06,930
vamos a usar I, es solo una forma de recorrer tres veces seis veces Nahm veces.

33
00:02:07,410 --> 00:02:13,350
Y no importa si comenzamos en cero o si comenzamos en 1 y hacemos esto igual o menor porque en

34
00:02:13,350 --> 00:02:13,910
realidad no

35
00:02:14,130 --> 00:02:23,010
Y luego aquí vamos a obtener el color aleatorio y presionar en la matriz.

36
00:02:23,070 --> 00:02:28,190
Así que esta línea es en realidad simplemente repetir tiempos entumecidos.

37
00:02:28,590 --> 00:02:33,360
Así que voy a hacer una función separada que generará el color aleatorio para

38
00:02:33,360 --> 00:02:36,190
nosotros y voy a llamar a ese color aleatorio.

39
00:02:36,270 --> 00:02:41,990
Así que funciona al azar y lo que está viendo es que tengo una función aquí.

40
00:02:42,090 --> 00:02:47,310
llamando a otra función que simplemente se llama color aleatorio y eso es solo para romper un código.

41
00:02:47,310 --> 00:02:49,860
Genero colores aleatorios que llamo dentro de ese. Estoy

42
00:02:49,860 --> 00:02:55,410
Deje en claro que lo que hace modular todo lo que podríamos tener sin ninguna función en absoluto podría ser lo que

43
00:02:55,950 --> 00:02:58,680
la gente llamaría código de espagueti que está por todos lados.

44
00:02:58,830 --> 00:03:01,760
Así que vamos a agregar algunas funciones aquí para agregar algo de estructura.

45
00:03:01,920 --> 00:03:06,540
Y nuevamente al final de este proyecto cuando lo tenemos completo se ve bien, toda la funcionalidad

46
00:03:06,540 --> 00:03:07,090
está ahí.

47
00:03:07,230 --> 00:03:12,690
Tendré un video opcional sobre la refacturación y hablaré sobre cómo puede cambiar las cosas para que

48
00:03:12,690 --> 00:03:18,080
sean un poco más limpias, un poco más bonitas, pero funcionarán exactamente de la misma manera.

49
00:03:18,090 --> 00:03:30,210
Entonces, para empezar colores aleatorias para hacer un color aleatorio, tendremos que elegir una lectura de 0 a 5 5 repeticiones de 0 2 a 5 5 y

50
00:03:31,020 --> 00:03:38,250
luego tenemos que elegir un verde de cero a 2 5 5 y luego un azul .

51
00:03:39,210 --> 00:03:45,490
Y para elegir cualquier número del 0 al 255 también necesitamos usar matemáticas no al azar.

52
00:03:45,570 --> 00:03:49,230
Entonces, las matemáticas no serán aleatorias.

53
00:03:49,350 --> 00:03:51,760
Eso nos da entre 0 y 1.

54
00:03:51,870 --> 00:03:53,070
No incluye uno.

55
00:03:53,220 --> 00:03:57,900
Necesitamos multiplicar por 256 porque recuerde que estamos redondeando hacia abajo.

56
00:03:58,050 --> 00:04:05,910
número posible para que muchos multipliquen por uno más 256 y luego tenemos que plantar ese piso de matemáticas.

57
00:04:05,910 --> 00:04:08,730
Entonces queremos que 255 sea el mayor

58
00:04:08,900 --> 00:04:16,290
Así que vaya a mi consejo y pegue este código que puede ver si obtenemos un número aleatorio entre 0 y 255

59
00:04:16,650 --> 00:04:19,630
y probablemente no verá que realmente va a 255.

60
00:04:19,660 --> 00:04:21,770
Tendremos que confiar en mí en eso.

61
00:04:21,900 --> 00:04:23,700
Pero puedes ver que al menos se acerca.

62
00:04:23,700 --> 00:04:25,590
Creo que vimos 253.

63
00:04:25,590 --> 00:04:26,770
Eso es suficiente por ahora.

64
00:04:27,060 --> 00:04:33,000
que todos los cuadrados se volvieron púrpuras y eso es porque nuestra generación de colores aleatorios no devuelve nada.

65
00:04:33,000 --> 00:04:33,920
Y también ves

66
00:04:33,930 --> 00:04:36,240
Entonces solo devuelve una cadena vacía.

67
00:04:36,300 --> 00:04:39,300
Entonces, realmente no estamos dando vueltas y dando un color a cada uno.

68
00:04:39,300 --> 00:04:44,360
Así que es solo tomar el morado predeterminado de C Ss solo una nota al margen.

69
00:04:44,700 --> 00:04:48,480
Entonces esto generará un número de 0 a 255.

70
00:04:48,870 --> 00:04:58,080
Lo guardaremos en una variable llamada R y luego haremos lo mismo para el verde y el azul, así como

71
00:04:58,080 --> 00:05:05,730
este espacio correctamente y cambiaremos los nombres, así que G y B nos darán tres números del

72
00:05:05,730 --> 00:05:07,250
0 al 255.

73
00:05:07,530 --> 00:05:14,850
Y la peor parte es sintetizarlos en esta gran cadena que sigue el formato de R. GRAMO. B paréntesis y luego los

74
00:05:14,970 --> 00:05:18,640
números dentro de R G y B.

75
00:05:18,900 --> 00:05:22,260
Y eso significa una gran cantidad de cadenas de apertura y cierre y signos más.

76
00:05:22,260 --> 00:05:25,390
Empecemos con lo que se parece a esto.

77
00:05:25,410 --> 00:05:32,350
Vamos a tener nuestro G-B y luego abrir el paréntesis y luego el canal rojo.

78
00:05:32,370 --> 00:05:45,720
Este número de 0 a 2 5 5 más una coma más el valor de G más otra coma más el valor de B más

79
00:05:46,770 --> 00:05:48,980
nuestros paréntesis de cierre.

80
00:05:49,620 --> 00:05:51,230
Y deberíamos estar listos para irnos ahora.

81
00:05:51,340 --> 00:05:52,530
Esta gran cuerda.

82
00:05:52,680 --> 00:05:58,570
Y lo que queremos hacer es devolver esa cadena así.

83
00:05:58,590 --> 00:06:03,350
Así que devuelve esta cadena grande y eso generará colores aleatorios.

84
00:06:03,360 --> 00:06:05,090
Entonces, es mucho trabajo para un color.

85
00:06:05,100 --> 00:06:07,650
Tres números diferentes 0 2 2 5 5.

86
00:06:07,650 --> 00:06:12,450
Los ponemos juntos con comas entre ellos paréntesis a su alrededor las letras R. GRAMO. SEGUNDO.

87
00:06:12,660 --> 00:06:15,650
Y luego regresamos para que podamos usarlo aquí.

88
00:06:15,660 --> 00:06:21,330
página, diríjase a nuestro cónsul y simplemente intente llamar al azar y eso se ve bien para mí.

89
00:06:21,330 --> 00:06:25,600
Y si solo queremos probar si funciona, vamos a continuar y actualizar la

90
00:06:25,620 --> 00:06:26,770
Estamos obteniendo un color aleatorio.

91
00:06:26,790 --> 00:06:27,910
Los paréntesis son correctos.

92
00:06:27,990 --> 00:06:29,910
Las comas son todas buenas.

93
00:06:29,910 --> 00:06:33,510
Vámonos ahora y use eso aquí.

94
00:06:34,170 --> 00:06:39,990
Así que vamos a llamar a ese color aleatorio y vamos a insertar eso en nuestra matriz.

95
00:06:39,990 --> 00:06:41,240
Aquí están.

96
00:06:41,280 --> 00:06:46,510
Entonces nuestro DOT push y no tenemos que usar push, pero eso va a hacer aquí.

97
00:06:46,710 --> 00:06:49,820
Y esto ahora nos construirá una buena variedad de colores.

98
00:06:50,210 --> 00:06:52,580
Así que genera colores aleatorios 6.

99
00:06:52,770 --> 00:06:56,740
Llamamos a esto repeticiones seis veces cada vez.

100
00:06:56,910 --> 00:06:59,230
Impulsa un color aleatorio a la matriz.

101
00:06:59,430 --> 00:07:02,440
Así que voy a mover nuestro comentario aquí.

102
00:07:02,460 --> 00:07:03,260
Aquí vamos.

103
00:07:03,600 --> 00:07:06,040
Y para verificar que eso funciona si actualizamos.

104
00:07:06,180 --> 00:07:13,050
colores aleatorios y no solo eso son colores aleatorios que elegimos el color que elegimos de la matriz también cambia.

105
00:07:13,050 --> 00:07:15,250
Puedes ver ahora que obtenemos seis

106
00:07:15,270 --> 00:07:16,520
Entonces no rompimos eso.

107
00:07:16,530 --> 00:07:19,190
Todo sigue funcionando o lo hace.

108
00:07:19,200 --> 00:07:20,000
Veamos.

109
00:07:20,000 --> 00:07:25,510
Entonces, si hago clic en algunos de estos colores, inténtalo de nuevo, inténtalo de nuevo, inténtalo de nuevo, tal vez solo tengo un libro

110
00:07:25,860 --> 00:07:27,210
realmente malo, pero no pasa nada.

111
00:07:27,400 --> 00:07:28,920
Entonces el problema es un poco complicado.

112
00:07:29,130 --> 00:07:34,830
al error que mencioné cuando hicimos el juego de anotador cuando estábamos comparando cosas aquí.

113
00:07:34,830 --> 00:07:36,500
Es un poco similar

114
00:07:36,930 --> 00:07:42,260
Si estamos comprobando si el usuario tiene razón si escogen el color correcto, algo va mal antes de que

115
00:07:42,300 --> 00:07:43,110
tengamos un número.

116
00:07:43,110 --> 00:07:44,880
Y lo estábamos comparando con una cadena.

117
00:07:45,030 --> 00:07:46,760
En este caso, es un poco diferente.

118
00:07:46,920 --> 00:07:53,000
Déjame mostrarte que vas a hacer otra estafa. el registro de correa hace clic para colorear y luego elige el color.

119
00:07:53,250 --> 00:07:56,190
Y veamos qué aspecto tienen, tal vez sean ligeramente diferentes.

120
00:07:56,340 --> 00:08:00,570
Vamos a actualizar la página y abrir la estafa. Y empecemos a hacer clic.

121
00:08:00,570 --> 00:08:06,120
Esta es una cantidad mediana de Fred, un poco verde y bastante azul.

122
00:08:06,300 --> 00:08:07,510
Hagamos clic en algunos.

123
00:08:08,160 --> 00:08:12,700
Y observe los números a la izquierda, la cadena RGV y la de la derecha.

124
00:08:12,990 --> 00:08:15,180
Y, por supuesto, estos no coinciden.

125
00:08:15,840 --> 00:08:21,930
Pero si haces clic en el de la derecha, puedes ver que cuando coinciden, aún cree que estamos equivocados.

126
00:08:21,960 --> 00:08:23,220
Dice intentarlo de nuevo.

127
00:08:23,490 --> 00:08:28,080
Y si compara las dos cadenas aquí, esta es el color cliqueado.

128
00:08:28,080 --> 00:08:29,420
Esto es lo que regresa

129
00:08:29,550 --> 00:08:36,810
Cuando hacemos clic en un elemento, pedimos este fondo marcado por puntos y este es el color que

130
00:08:36,810 --> 00:08:38,290
elegimos de la matriz.

131
00:08:38,400 --> 00:08:40,380
Entonces de alguna manera son un poco diferentes.

132
00:08:40,380 --> 00:08:46,740
Y lo que sucede es que cuando realmente establecemos el color de fondo de un elemento, el SS

133
00:08:46,740 --> 00:08:50,620
automáticamente agrega en el dormitorio automáticamente agregue 10 espacios entre ellos.

134
00:08:50,970 --> 00:08:59,370
Entonces, para arreglar que lo que queremos hacer es solo agregar espacios aquí entre nuestros números, así que después de los cometas y si

135
00:08:59,370 --> 00:09:02,930
hacemos eso, entonces se compararán y serán iguales entre sí.

136
00:09:02,970 --> 00:09:04,890
Entonces eso es una especie de error complicado.

137
00:09:04,920 --> 00:09:10,080
Simplemente tiene que ver con la forma en que estamos comparando cosas con triples iguales y no es que el

138
00:09:10,080 --> 00:09:11,740
doble igual lo arregle de todos modos.

139
00:09:11,820 --> 00:09:15,660
Duplicar las llamadas no ignora espacios ni nada, pero es solo un problema con la forma en

140
00:09:15,660 --> 00:09:16,460
que generamos los colores.

141
00:09:16,740 --> 00:09:19,240
Entonces, si intentamos esto de nuevo y refrescamos.

142
00:09:19,410 --> 00:09:20,990
Ahora hagamos clic aquí.

143
00:09:21,120 --> 00:09:24,780
Puedes ver que nuestros espacios están aquí y estos definitivamente coincidirán.

144
00:09:24,780 --> 00:09:32,060
Una vez que hacemos clic en el color correcto, que es el último y obtenemos nuestro correcto.

145
00:09:32,100 --> 00:09:34,650
Así que definitivamente es un error complicado para terminar.

146
00:09:34,650 --> 00:09:40,110
Intentemos jugar un juego y una pantalla completa y deshacernos de la consola y actualizar y

147
00:09:40,110 --> 00:09:41,280
admirar nuestros colores aleatorios.

148
00:09:41,280 --> 00:09:48,210
Lo último que podemos hacer es que, cuando lo solucionemos correctamente, también podamos cambiar el fondo H-1 como lo

149
00:09:48,210 --> 00:09:48,950
hice aquí.

150
00:09:49,110 --> 00:09:52,940
Entonces, cuando adivinas el color correcto, también cambia el color de fondo.

151
00:09:53,040 --> 00:09:54,910
Y ese es un cambio simple.

152
00:09:54,960 --> 00:09:57,540
Todo lo que tenemos que hacer es seleccionar el H-1.

153
00:09:58,080 --> 00:10:01,920
Así que H-1 y podemos simplemente seleccionarlo como el único H-1 en la página.

154
00:10:01,950 --> 00:10:09,750
Así que aquí solo voy a seleccionar en la parte inferior var H-1 es igual al documento que el

155
00:10:13,470 --> 00:10:16,200
selector de consultas H-1 guarda eso.

156
00:10:16,200 --> 00:10:25,470
Y luego, cuando el usuario adivine correctamente cuál es el correcto aquí, vamos a cambiar el fondo del H-1 DOD

157
00:10:25,620 --> 00:10:28,460
o al estilo de ese fondo.

158
00:10:29,610 --> 00:10:39,860
Y eso ahora debería ser igual a recoger el color y guardaremos eso para ir a la versión correcta de la actualización de nuestro

159
00:10:40,080 --> 00:10:42,060
juego e intentemos hacer clic.

160
00:10:42,930 --> 00:10:47,880
tenemos un camino por recorrer con nuestro estilo en comparación con esto, pero estamos llegando allí con la lógica.

161
00:10:47,880 --> 00:10:48,950
Y ahí vamos definitivamente,

162
00:10:49,200 --> 00:10:53,120
Entonces, adivinas incorrectamente que desaparecen simplemente cambiando el color de fondo.

163
00:10:53,400 --> 00:10:58,240
Y si lo adivinaste correctamente, todos cambian de color y el H-1 también cambia.

164
00:10:58,620 --> 00:11:03,690
En el siguiente video vamos a agregar la funcionalidad de reproducción nuevamente y agregaremos un poco más de estilo.