1 00:00:00,180 --> 00:00:01,330 De acuerdo, bienvenido. 2 00:00:01,530 --> 00:00:03,330 Avancemos y comencemos con esto. 3 00:00:03,330 --> 00:00:05,160 RG está adivinando la aplicación del juego. 4 00:00:05,220 --> 00:00:10,270 Voy a hacer primero el archivo h tim y el C S y crear esta grilla simple. 5 00:00:10,290 --> 00:00:14,460 Así que no vamos a estilizarlo con los colores de fondo y las fuentes, y este 6 00:00:14,820 --> 00:00:19,980 pequeño ahora está aquí. Comenzaremos de manera simple con seis cuadrados y les daremos algunos colores de fondo, tal vez 7 00:00:19,980 --> 00:00:25,110 un pequeño espacio entre ellos, pero no lo haremos. hacer cosas como agregar las esquinas redondeadas, pero no vamos a 8 00:00:25,110 --> 00:00:26,340 agregar ninguna de las animaciones. 9 00:00:26,420 --> 00:00:31,710 El fundido de entrada y el fundido de salida todo lo que haremos es obtener seis cuadrados y luego agregaremos la lógica básica 10 00:00:31,710 --> 00:00:34,780 de los eventos rápidos y comprobaremos si obtiene el color correcto, y así sucesivamente. 11 00:00:34,950 --> 00:00:37,970 Así que primero tenemos que hacerle un borde al archivo que tengo aquí. 12 00:00:37,980 --> 00:00:42,910 Yo llamo a ese juego de colores cada vez, así que agregaremos a nuestro equipo aquí. 13 00:00:43,110 --> 00:00:44,070 La placa de la caldera. 14 00:00:44,430 --> 00:00:45,370 Dale un título. 15 00:00:45,420 --> 00:00:47,090 Haré un juego de color. 16 00:00:47,910 --> 00:00:50,450 Avancemos y agreguemos los seis cuadrados. 17 00:00:50,610 --> 00:00:51,790 Así que los haré divs. 18 00:00:51,810 --> 00:00:57,090 Cada uno es un div con una clase de cuadrado y usaremos esa clase cuadrada para darle un estilo posterior. 19 00:00:57,510 --> 00:01:05,610 De acuerdo, haremos que la clase Div sea igual a Square y no tengamos que poner nada dentro de ella y 20 00:01:05,610 --> 00:01:07,380 tendremos seis de ellas. 21 00:01:07,380 --> 00:01:12,660 Y luego solo para hacer esto más limpio voy a ponerlos todos en lugar de otro div que podemos 22 00:01:12,660 --> 00:01:13,410 diseñar más tarde. 23 00:01:13,560 --> 00:01:15,490 Voy a llamarlo contenedor. 24 00:01:15,810 --> 00:01:18,210 Entonces no va a hacer nada por adelantado. 25 00:01:18,240 --> 00:01:22,510 Eventualmente lo usaremos para que el sitio responda y para que la red se reduzca. 26 00:01:22,530 --> 00:01:26,640 Por ahora solo los va a agrupar, así que no solo tenemos 6 cuadrados flotando. 27 00:01:26,850 --> 00:01:28,970 OK, entonces tenemos nuestros seis cuadrados aquí. 28 00:01:29,160 --> 00:01:33,270 Si abrimos esto en el juego del navegador que borde a él. 29 00:01:33,600 --> 00:01:36,420 No vemos nada, por supuesto, por algunas razones. 30 00:01:36,430 --> 00:01:42,360 Uno a pesar de que tenemos seis divs que no tienen Con no hay margen, no hay color, así que no 31 00:01:42,360 --> 00:01:43,390 vemos nada en absoluto. 32 00:01:43,710 --> 00:01:46,520 Así que vamos a empezar por peinarlos de manera muy básica. 33 00:01:46,710 --> 00:01:52,800 Así que necesito agregar una hoja de estilos, así que primero estableceré un enlace a la hoja de estilos que no he creado y 34 00:01:52,800 --> 00:01:53,700 la agrandaré un poco. 35 00:01:53,820 --> 00:02:04,650 Así que voy a llamarlo juego de color ver SS y guardar y luego hacer ese archivo juego de color C Ss y lo primero que voy 36 00:02:04,650 --> 00:02:10,110 a hacer es simplemente agregar un color de fondo a todo nuestro cuerpo. 37 00:02:10,140 --> 00:02:17,600 Hasta ahora, el color de fondo y el color que voy a usar es un código hexadecimal. 38 00:02:17,730 --> 00:02:23,960 Es 2 3 2 3 2 3 y asegúrese de que esté conectado. 39 00:02:24,120 --> 00:02:24,510 Sí. 40 00:02:24,630 --> 00:02:26,810 Entonces obtenemos el color de fondo correcto. 41 00:02:26,820 --> 00:02:31,730 A continuación, avanzamos y empezamos a diseñar nuestros cuadrados. 42 00:02:32,040 --> 00:02:38,100 Vamos a utilizar la misma estrategia que utilizamos para crear este VSS para el sitio de portafolio de fotografía 43 00:02:38,100 --> 00:02:40,410 donde tenemos esa cuadrícula de imágenes cuadradas. 44 00:02:40,410 --> 00:02:41,640 Todos eran blancos y negros. 45 00:02:41,670 --> 00:02:43,400 ¿Puedes usar la misma idea aquí? 46 00:02:43,410 --> 00:02:49,770 Entonces, la forma en que vamos a hacer esto es que cada uno de ellos está dentro de un contenedor y cada uno 47 00:02:49,770 --> 00:02:51,870 ocupa el 30 por ciento de ese contenedor. 48 00:02:51,870 --> 00:02:55,000 Entonces el contenedor solo gira alrededor de estos cuadrados. 49 00:02:55,020 --> 00:02:58,100 No es todo el cuerpo aquí solo alrededor de las plazas. 50 00:02:58,140 --> 00:03:02,360 Toman un 30 por ciento y luego tenemos un margen entre ellos en todos los lados. 51 00:03:02,540 --> 00:03:04,180 1. 6 6 por ciento. 52 00:03:04,320 --> 00:03:07,770 Entonces, todo se suma al 100 por ciento del contenedor. 53 00:03:08,040 --> 00:03:13,880 Así que haremos ese primer cuadrado con un 30 por ciento. 54 00:03:14,460 --> 00:03:22,140 Y si podemos dejarlo así y darle un trasfondo, hagamos que sean morados y ahorremos y 55 00:03:22,140 --> 00:03:24,060 no veamos nada todavía. 56 00:03:24,150 --> 00:03:29,820 Y la razón por la que esto sucede, te mostraré si inspeccionamos nuestras vidas en la página. 57 00:03:29,850 --> 00:03:31,400 Ellos solo están vacíos. 58 00:03:31,410 --> 00:03:32,610 Qué necesitamos hacer. 59 00:03:32,640 --> 00:03:38,480 La última vez que tuvimos imágenes e imágenes tienen contenido, pero estos divs están vacíos. 60 00:03:38,640 --> 00:03:42,280 Así que vamos a agregar algo de espacio y vamos a usar fondo relleno. 61 00:03:42,330 --> 00:03:49,000 También podríamos usar la parte superior acolchada para acolchar la parte inferior, y eso también será un 30 por ciento. 62 00:03:49,410 --> 00:03:50,680 Entonces si me actualizo 63 00:03:51,080 --> 00:03:51,940 DE ACUERDO. 64 00:03:52,290 --> 00:03:57,480 Ahora tenemos seis cuadrados, aunque están todos en una línea que no es lo que queremos. 65 00:03:57,480 --> 00:03:59,280 Queremos que estén en la misma línea. 66 00:03:59,610 --> 00:04:03,420 Entonces tenemos que hacerlas flotar hacia la izquierda, que es lo que hicimos con la cuadrícula de imágenes también. 67 00:04:03,420 --> 00:04:06,480 Así que flotar a la izquierda y guardar, refrescamos. 68 00:04:06,750 --> 00:04:09,400 Y ahora terminamos con esta grilla masiva aquí. 69 00:04:09,670 --> 00:04:12,990 Oh adelante y en el margen para que pueda ver lo que está sucediendo. 70 00:04:13,020 --> 00:04:19,590 Entonces vamos a tener margen 1. 6 6 por ciento y guardar. 71 00:04:19,790 --> 00:04:25,630 Ahora puede ver que tenemos nuestra grilla aquí y esta cuadrícula ocupa toda la pantalla. 72 00:04:25,670 --> 00:04:27,530 Así que voy a cambiar eso un poco. 73 00:04:27,530 --> 00:04:29,400 No queremos que sea tan grande. 74 00:04:29,690 --> 00:04:35,270 Y lo que podemos hacer es usar ese contenedor que proporcionamos este contenedor de ID div. 75 00:04:35,450 --> 00:04:43,910 Entonces, si le damos un estilo al div con la idea de contenedor que seleccionaremos así, 76 00:04:43,910 --> 00:04:48,770 podemos comenzar diciéndole que su ancho máximo debería ser. 77 00:04:48,770 --> 00:04:51,200 Y creo que fui por 600 píxeles. 78 00:04:51,200 --> 00:04:52,510 Podemos jugar con ese número. 79 00:04:52,540 --> 00:04:56,350 Ahora si actualizo Ahora, puedes ver que es mucho más pequeño. 80 00:04:56,690 --> 00:04:57,810 Entonces eso es parte de eso 81 00:04:58,070 --> 00:05:00,030 Y luego, ¿qué es esto? También esto. 82 00:05:00,350 --> 00:05:03,000 Así que tendremos 2 márgenes. 83 00:05:03,380 --> 00:05:04,420 0 auto. 84 00:05:04,550 --> 00:05:09,860 Recuerde que este truco es el margen cero en la parte superior e inferior del contenedor y el automático a la izquierda 85 00:05:09,860 --> 00:05:13,100 y derecha lo hará de modo que tenga el mismo tamaño en cada lado. 86 00:05:13,130 --> 00:05:15,330 Y ahora tenemos esta bonita rejilla central. 87 00:05:15,500 --> 00:05:16,400 Todo bien. 88 00:05:16,400 --> 00:05:22,400 está en nuestro H-1 así que voy a tener un H1 aquí y solo voy a decir la gran R. 89 00:05:22,400 --> 00:05:27,920 Y hagamos una cosa más que GRAMO. ser un juego de color y comenzaremos así. 90 00:05:28,160 --> 00:05:31,110 Y si actualizamos, por supuesto, es realmente difícil de ver. 91 00:05:31,370 --> 00:05:37,440 Así que hagámoslo blanco H-1 de color blanco y ahorre. 92 00:05:37,820 --> 00:05:39,610 Y comenzaremos con eso. 93 00:05:39,620 --> 00:05:41,810 Así que ahora usemos algunos javascript. 94 00:05:41,810 --> 00:05:45,340 Vamos a configurar Javascript para dar a cada uno de estos un color diferente. 95 00:05:45,650 --> 00:05:50,830 Así que vamos a hacer un nuevo archivo y lo llamaremos juego de colores. 96 00:05:50,970 --> 00:05:53,360 J. S. y guarda. 97 00:05:53,360 --> 00:05:58,870 Y como siempre quiero hacer, agreguemos nuestra alerta que dice conectada. 98 00:05:58,880 --> 00:06:04,670 Ahora agreguemos el script en fuente igual a juego de colores. 99 00:06:04,750 --> 00:06:10,290 Sí, guarde la página y obtendremos nuestra alerta conectada. 100 00:06:10,790 --> 00:06:13,550 De acuerdo, voy a cambiar el tamaño de la ventana allí. 101 00:06:13,550 --> 00:06:16,400 Ahora agreguemos el código para darles diferentes colores. 102 00:06:16,580 --> 00:06:18,770 Por lo tanto, en el resultado final en el final del juego. 103 00:06:18,770 --> 00:06:25,870 Cada vez que la página se carga, elige seis colores aleatorios y luego asigna cada color a uno de los divs. 104 00:06:26,150 --> 00:06:30,350 el aspecto aleatorio y asignaremos seis colores que son siempre iguales. 105 00:06:30,350 --> 00:06:31,250 Comenzaremos por 106 00:06:31,400 --> 00:06:33,800 Y luego pasaremos a aleatorizarlos. 107 00:06:33,800 --> 00:06:39,680 Así que vamos a mi juego de color Sí y comenzaré haciendo una lista de colores y los 108 00:06:39,680 --> 00:06:40,430 llamaré colores. 109 00:06:40,430 --> 00:06:41,190 Es una matriz. 110 00:06:41,360 --> 00:06:45,610 Y recuerda que en nuestro producto final esta será una lista aleatoria de colores. 111 00:06:45,680 --> 00:06:48,820 Por ahora solo voy a agregar algo mío. 112 00:06:48,980 --> 00:06:52,050 Entonces G-B y yo comenzaremos con todo rojo. 113 00:06:52,070 --> 00:06:59,790 Entonces 2 5 5 0 0 y solo para que esto sea legible para ti, haremos todo esto en líneas separadas. 114 00:06:59,900 --> 00:07:02,240 Entonces tendremos seis de estos. 115 00:07:02,420 --> 00:07:08,710 Y el primero será todo rojo y luego tendremos otro que sea todo rojo y todo verde lo 116 00:07:08,710 --> 00:07:09,670 que haría amarillo. 117 00:07:09,830 --> 00:07:16,030 Y luego el siguiente será 0 rojo y todo verde. 118 00:07:16,970 --> 00:07:27,790 Y luego el siguiente después de eso será cero rojo o verde y todo azul y luego también lo hará. 119 00:07:27,830 --> 00:07:40,130 Entonces, lee 0 verde 255 azul y luego haremos 255 rojo 0 verde 255 azul y eso nos dará una matriz de 120 00:07:40,130 --> 00:07:42,680 seis colores como cadenas. 121 00:07:42,680 --> 00:07:48,770 Y luego, lo que queremos hacer es seleccionar los seis de estos cuadrados en bucle a través de ellos y luego asignar 122 00:07:48,770 --> 00:07:51,110 uno de estos colores al fondo de cada uno. 123 00:07:51,290 --> 00:07:58,640 Entonces, para pasar primero, debemos seleccionar hasta ahora y lo llamaremos "cuadrados equivale a documento" y tenemos 124 00:07:58,640 --> 00:07:59,710 muchas opciones aquí. 125 00:07:59,720 --> 00:08:02,010 Voy a utilizar un selector de consulta todo. 126 00:08:02,390 --> 00:08:05,810 Así que me aseguro de obtener los seis en lugar de solo el primero. 127 00:08:05,990 --> 00:08:08,930 Y vamos a seleccionar basado fuera del cuadrado de clase. 128 00:08:09,440 --> 00:08:13,930 Si acabáramos de hacerlo, recuerde que tenemos un contenedor div y no queremos seleccionarlo. 129 00:08:14,000 --> 00:08:23,030 Solo queremos estos seis cuadrados cuadrados tan cuadrados y luego recorreremos cuatro var es igual a cero. 130 00:08:23,450 --> 00:08:35,310 I menos que la longitud de los cuadrados y I más más en lugar de aquí, diremos que los cuadrados del fondo del punto I dot style son 131 00:08:35,420 --> 00:08:43,010 iguales y esta es la parte interesante que tomaremos ese ojo y lo usaremos para acceder a los 132 00:08:43,010 --> 00:08:43,710 colores. 133 00:08:44,750 --> 00:08:49,990 O este es Colt. Estoy aquí con una pequeña corrección que agrego después del hecho. 134 00:08:50,130 --> 00:08:51,080 Solo una nota rapida. 135 00:08:51,330 --> 00:08:58,650 Es mucho más preferible que el color de fondo de tu estilo, por lo que el color de fondo es una palabra con una C 136 00:08:58,710 --> 00:09:04,180 mayúscula en lugar de un fondo de puntos de estilo, que es lo que estoy usando en este video. 137 00:09:04,350 --> 00:09:08,230 Por lo tanto, cada vez que vea un fondo con estilo, cámbielo por el color de fondo. 138 00:09:08,400 --> 00:09:13,590 Y la razón de esto es que funcionará en todos los navegadores actuales, pero el 139 00:09:13,590 --> 00:09:17,880 fondo no funciona en Firefox, por lo que técnicamente funciona con estilo. 140 00:09:17,910 --> 00:09:23,160 Ese fondo funcionará en Chrome, por ejemplo, está bien y el juego funciona, pero he recibido muchas 141 00:09:23,160 --> 00:09:28,490 preguntas sobre lo que sucede en Firefox y este es realmente el principal color de fondo de 142 00:09:28,670 --> 00:09:29,200 estilo culpable. 143 00:09:29,400 --> 00:09:34,320 También me gustaría pensar que Del Anderson, uno de los estudiantes en los foros de 144 00:09:34,320 --> 00:09:37,450 discusión para señalar esto más recientemente, volveré a la codificación. 145 00:09:37,500 --> 00:09:45,300 Entonces, lo que estamos haciendo tenemos seis cuadrados y nuestro ojo va desde 0 1 2 3 4 5 y eso 146 00:09:45,300 --> 00:09:46,420 recorrerá cada cuadrado. 147 00:09:46,560 --> 00:09:51,890 Y luego, cuando llegue al primer cuadro, tomaré cero y le daré el color de fondo de los 148 00:09:51,890 --> 00:09:53,300 colores cero que está aquí. 149 00:09:53,340 --> 00:09:54,360 Entonces eso sería correcto. 150 00:09:54,630 --> 00:10:00,780 Y luego continuamos y tomamos uno para el segundo div y le damos el segundo color con índice de 1 151 00:10:00,780 --> 00:10:03,330 y seguimos haciéndolo hasta que lleguemos al final. 152 00:10:03,330 --> 00:10:08,010 divs estén en la página es el orden en que serán coloreados usando estos colores de la matriz. 153 00:10:08,490 --> 00:10:10,420 Así que básicamente vamos para que los 154 00:10:10,680 --> 00:10:16,170 Y si guardamos la actualización, verá que obtenemos nuestros seis colores básicos. 155 00:10:16,710 --> 00:10:20,740 Entonces tenemos magenta azul cian verde amarillo rojo. 156 00:10:20,970 --> 00:10:22,330 Así que está bien por ahora. 157 00:10:22,500 --> 00:10:24,730 Nos enfocaremos en aleatorizar los colores más tarde. 158 00:10:24,870 --> 00:10:30,420 Pero como una vista previa, aunque tenemos que hacer es generar tres números tres números diferentes 159 00:10:30,420 --> 00:10:32,960 de 0 a 255 y luego los combinamos. 160 00:10:33,210 --> 00:10:36,180 Entonces, son solo tres canales diferentes, todos aleatorios. 161 00:10:36,180 --> 00:10:40,340 Y luego los convertimos en una gran cadena con r. g B y paréntesis a su alrededor. 162 00:10:40,590 --> 00:10:42,720 Pero vamos a ir con estos colores por ahora. 163 00:10:42,720 --> 00:10:46,210 Lo siguiente que debemos hacer es cada vez que se carga la página. 164 00:10:46,300 --> 00:10:49,640 Te muestro aquí, no solo se escogen seis colores. 165 00:10:49,740 --> 00:10:55,590 Uno de esos colores se selecciona para ser el objetivo o el color que estamos buscando. 166 00:10:55,590 --> 00:10:58,490 Entonces, en este caso, este es un color que se elige. 167 00:10:58,500 --> 00:11:03,540 Así que vamos a hacer eso también y vamos a comenzar a codificar duro Portus y luego lo haremos 168 00:11:03,540 --> 00:11:04,310 al azar después. 169 00:11:04,410 --> 00:11:08,610 Entonces, comenzaremos diciendo que el color dorado es cian. 170 00:11:08,790 --> 00:11:11,940 Entonces ese es el cuarto índice de color de tres. 171 00:11:11,970 --> 00:11:20,070 Así que bien, la variable aquí var pick color equivale al índice de matriz de colores 3. 172 00:11:20,800 --> 00:11:23,900 Y eso elegirá Suyin o este color aquí R. GRAMO. SEGUNDO. 173 00:11:23,910 --> 00:11:31,380 0 2 5 5 2 5 5 y es una cadena, recuerda que lo que queríamos hacer es actualizar nuestra página para que diga 174 00:11:31,380 --> 00:11:33,690 que justo aquí como la tenemos aquí. 175 00:11:33,990 --> 00:11:38,030 Obviamente, no tiene el mismo estilo pero queremos que diga R. GRAMO. SEGUNDO. 176 00:11:38,040 --> 00:11:45,960 un poco si puede pensar en el juego de scorekeeper donde teníamos un H1 y estamos cambiando el. 177 00:11:45,960 --> 00:11:52,990 Y luego, entre paréntesis 0 2 5 5 5 5 para hacer eso, tendremos que cambiarlo 178 00:11:53,010 --> 00:11:55,670 Jugador jugador dos puntajes inicialmente. 179 00:11:56,040 --> 00:12:02,310 Acabamos de tener un avión H-1 Y cuando lo actualizamos automáticamente sobrescribió todo lo demás que estaba 180 00:12:02,310 --> 00:12:02,840 allí. 181 00:12:03,030 --> 00:12:04,160 Pero no queremos hacer eso. 182 00:12:04,170 --> 00:12:10,320 Queremos que el texto sea el mejor juego de color y nuestro color simplemente va aquí, pero no queremos tener un 183 00:12:10,320 --> 00:12:13,970 H-1 o algo por el estilo ya que estos irían en líneas separadas. 184 00:12:14,040 --> 00:12:20,070 Así que vamos a usar un lapso como lo hicimos en el juego de marcador y solo agregamos R. GRAMO. como un marcador de posición. 185 00:12:20,070 --> 00:12:21,180 estar ahí 186 00:12:21,180 --> 00:12:24,320 Entonces, nada se ve diferente pero si inspeccionamos. 187 00:12:25,110 --> 00:12:30,180 Puede ver que ahora tenemos un lapso que significa que puede seleccionarlo fácilmente y manipular el texto. 188 00:12:30,510 --> 00:12:33,250 Y vamos a darle una idea para que sea aún más fácil. 189 00:12:33,510 --> 00:12:34,950 Así que le daremos el id. 190 00:12:35,220 --> 00:12:37,850 Y vamos a llamarlo pantalla a color. 191 00:12:39,040 --> 00:12:41,720 Luego iremos a nuestro javascript y seleccionaremos eso. 192 00:12:41,890 --> 00:12:50,230 visualización en color es igual al documento y obtendremos el elemento por id solo para el elemento kid de sake de variedad por ID. 193 00:12:50,230 --> 00:12:51,400 Hasta ahora, la 194 00:12:51,730 --> 00:12:53,940 Y fue una pantalla a color. 195 00:12:54,610 --> 00:12:57,330 Y ahorraremos y haremos esto un poco más grande. 196 00:12:57,610 --> 00:13:04,640 Guarde el archivo y luego queremos actualizar la visualización en color para que diga este color que elegimos. 197 00:13:05,050 --> 00:13:17,880 Entonces, el contenido de texto de la pantalla a color equivale a elegir su color así y se actualizará. 198 00:13:17,920 --> 00:13:20,500 Y ahora terminamos con nuestro color aquí. 199 00:13:20,500 --> 00:13:21,030 Estupendo. 200 00:13:21,130 --> 00:13:23,280 Agreguemos la lógica ahora para los eventos de clic. 201 00:13:23,350 --> 00:13:28,660 Entonces, cuando hago clic en uno de estos cuadrados, queremos ejecutar un código que determine el color del 202 00:13:28,840 --> 00:13:30,470 cuadrado en el que hicimos clic. 203 00:13:30,640 --> 00:13:34,350 Y una vez que tenemos ese color, vamos a compararlo con el color del pix. 204 00:13:34,360 --> 00:13:35,430 Este aquí mismo. 205 00:13:35,740 --> 00:13:40,360 Y si son diferentes Vamos a cambiar el color de fondo de ese cuadrado para que 206 00:13:40,360 --> 00:13:42,740 vaya al mismo color que el fondo del cuerpo. 207 00:13:43,030 --> 00:13:46,930 Y si son iguales, eso significa que el jugador tiene uno. 208 00:13:46,930 --> 00:13:48,570 Y tenemos que hacer algunas cosas especiales. 209 00:13:48,640 --> 00:13:52,930 Y si son diferentes, eso significa que un jugador eligió el color incorrecto y también tendrá que 210 00:13:53,680 --> 00:13:54,320 manejarlo para comenzar. 211 00:13:54,370 --> 00:13:58,580 Agreguemos solo un controlador de evento de clic simple que solo nos alerta cuando hacemos clic. 212 00:13:58,870 --> 00:14:03,100 Así que vamos a agregar un controlador de eventos a cada uno de los cuadrados para que podamos usar 213 00:14:03,100 --> 00:14:04,140 el mismo bucle que tenemos. 214 00:14:04,360 --> 00:14:13,660 Así que añadiré un comentario aquí, agrego los colores iniciales a los cuadrados y luego la siguiente parte hará 215 00:14:15,850 --> 00:14:18,720 clic en los oyentes dos cuadrados. 216 00:14:18,760 --> 00:14:23,700 Entonces, otro de estos cuadrados I dot add event listener. 217 00:14:24,350 --> 00:14:28,720 Es hora de Click y nuestra función de devolución de llamada. 218 00:14:29,860 --> 00:14:37,830 Todo lo que haremos es alertar bastante bien y asegurarnos de que los seis nos alertarán. 219 00:14:37,860 --> 00:14:39,600 De acuerdo, haz clic en el cuadrado. 220 00:14:39,610 --> 00:14:44,130 De acuerdo, parece que todos funcionan bien como deben hacerlo. 221 00:14:44,350 --> 00:14:55,950 Entonces, lo que tenemos que hacer es tomar el color del cuadrado cliqueado y luego comparar el color para elegir el color. 222 00:14:55,960 --> 00:15:01,560 El color de imagen variable que definimos aparece para que empecemos a obtener ese color. 223 00:15:01,840 --> 00:15:06,450 Recuerde que podemos utilizar esto que se refiere al elemento que se hizo clic en el cuadrado. 224 00:15:06,580 --> 00:15:10,460 Entonces podemos decir este estilo de fondo. 225 00:15:10,780 --> 00:15:15,060 Y hagamos otra alerta aquí y veamos qué obtenemos. 226 00:15:15,070 --> 00:15:18,310 Entonces, si hago clic en el rojo, me alerta. 227 00:15:18,310 --> 00:15:25,510 RG B 2 5 5 0 0 y si hago clic en asignar uno R G B 0 2 5 5 2 5 5. 228 00:15:25,720 --> 00:15:26,850 Entonces esto está funcionando. 229 00:15:27,220 --> 00:15:34,630 Entonces, lo que haremos ahora es guardarlo en una variable que llamaremos color cliqueado así. 230 00:15:35,020 --> 00:15:41,260 Y luego vamos a escribir una declaración de IF para comparar los colores de Quick, así que si su 231 00:15:42,390 --> 00:15:48,770 color es igual a triple, elija la rima de color adecuada, si ese es el caso, la alerta será correcta. 232 00:15:49,590 --> 00:15:55,690 Y si no coinciden con o alertaremos mal. 233 00:15:57,240 --> 00:16:00,170 Vamos a darle una oportunidad de actualización. 234 00:16:00,290 --> 00:16:01,390 Hago clic en este. 235 00:16:01,410 --> 00:16:02,330 Incorrecto. 236 00:16:02,640 --> 00:16:03,210 Incorrecto. 237 00:16:03,210 --> 00:16:04,370 Y la verdadera prueba. 238 00:16:04,400 --> 00:16:07,310 Hago clic en el derecho que dice correcto. 239 00:16:07,350 --> 00:16:13,110 funciona, aunque no tengamos los colores aleatorios, en lo que sí tenemos es una matriz de seis colores 240 00:16:13,110 --> 00:16:18,600 que están codificados de manera rígida y asignamos un color a cada cuadrado y luego estamos eligiendo. 241 00:16:18,600 --> 00:16:19,640 Entonces, nuestra lógica 242 00:16:19,650 --> 00:16:25,050 En este caso, cian y esto será aleatorio, por supuesto, pero estamos eligiendo un color que es nuestra respuesta. 243 00:16:25,320 --> 00:16:30,570 Y luego agregamos un detector de eventos a cada cuadrado cuando el usuario hace clic en ese cuadrado o cualquier cuadrado. 244 00:16:30,570 --> 00:16:34,110 Comparamos el color del cuadrado dado con el color de la imagen si coinciden. 245 00:16:34,110 --> 00:16:35,010 Nosotros hacemos una cosa. 246 00:16:35,130 --> 00:16:39,840 Si no coinciden hacemos algo más en el próximo video, vamos a hablar sobre lo que realmente 247 00:16:39,840 --> 00:16:40,700 hacemos si coinciden. 248 00:16:40,710 --> 00:16:42,000 Y lo que hacemos si no coinciden.