De acuerdo, bienvenido.
Avancemos y comencemos con esto.
RG está adivinando la aplicación del juego.
Voy a hacer primero el archivo h tim y el C S y crear esta grilla simple.
Así que no vamos a estilizarlo con los colores de fondo y las fuentes, y este
pequeño ahora está aquí. Comenzaremos de manera simple con seis cuadrados y les daremos algunos colores de fondo, tal vez
un pequeño espacio entre ellos, pero no lo haremos. hacer cosas como agregar las esquinas redondeadas, pero no vamos a
agregar ninguna de las animaciones.
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
de los eventos rápidos y comprobaremos si obtiene el color correcto, y así sucesivamente.
Así que primero tenemos que hacerle un borde al archivo que tengo aquí.
Yo llamo a ese juego de colores cada vez, así que agregaremos a nuestro equipo aquí.
La placa de la caldera.
Dale un título.
Haré un juego de color.
Avancemos y agreguemos los seis cuadrados.
Así que los haré divs.
Cada uno es un div con una clase de cuadrado y usaremos esa clase cuadrada para darle un estilo posterior.
De acuerdo, haremos que la clase Div sea igual a Square y no tengamos que poner nada dentro de ella y
tendremos seis de ellas.
Y luego solo para hacer esto más limpio voy a ponerlos todos en lugar de otro div que podemos
diseñar más tarde.
Voy a llamarlo contenedor.
Entonces no va a hacer nada por adelantado.
Eventualmente lo usaremos para que el sitio responda y para que la red se reduzca.
Por ahora solo los va a agrupar, así que no solo tenemos 6 cuadrados flotando.
OK, entonces tenemos nuestros seis cuadrados aquí.
Si abrimos esto en el juego del navegador que borde a él.
No vemos nada, por supuesto, por algunas razones.
Uno a pesar de que tenemos seis divs que no tienen Con no hay margen, no hay color, así que no
vemos nada en absoluto.
Así que vamos a empezar por peinarlos de manera muy básica.
Así que necesito agregar una hoja de estilos, así que primero estableceré un enlace a la hoja de estilos que no he creado y
la agrandaré un poco.
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
a hacer es simplemente agregar un color de fondo a todo nuestro cuerpo.
Hasta ahora, el color de fondo y el color que voy a usar es un código hexadecimal.
Es 2 3 2 3 2 3 y asegúrese de que esté conectado.
Sí.
Entonces obtenemos el color de fondo correcto.
A continuación, avanzamos y empezamos a diseñar nuestros cuadrados.
Vamos a utilizar la misma estrategia que utilizamos para crear este VSS para el sitio de portafolio de fotografía
donde tenemos esa cuadrícula de imágenes cuadradas.
Todos eran blancos y negros.
¿Puedes usar la misma idea aquí?
Entonces, la forma en que vamos a hacer esto es que cada uno de ellos está dentro de un contenedor y cada uno
ocupa el 30 por ciento de ese contenedor.
Entonces el contenedor solo gira alrededor de estos cuadrados.
No es todo el cuerpo aquí solo alrededor de las plazas.
Toman un 30 por ciento y luego tenemos un margen entre ellos en todos los lados.
1. 6 6 por ciento.
Entonces, todo se suma al 100 por ciento del contenedor.
Así que haremos ese primer cuadrado con un 30 por ciento.
Y si podemos dejarlo así y darle un trasfondo, hagamos que sean morados y ahorremos y
no veamos nada todavía.
Y la razón por la que esto sucede, te mostraré si inspeccionamos nuestras vidas en la página.
Ellos solo están vacíos.
Qué necesitamos hacer.
La última vez que tuvimos imágenes e imágenes tienen contenido, pero estos divs están vacíos.
Así que vamos a agregar algo de espacio y vamos a usar fondo relleno.
También podríamos usar la parte superior acolchada para acolchar la parte inferior, y eso también será un 30 por ciento.
Entonces si me actualizo
DE ACUERDO.
Ahora tenemos seis cuadrados, aunque están todos en una línea que no es lo que queremos.
Queremos que estén en la misma línea.
Entonces tenemos que hacerlas flotar hacia la izquierda, que es lo que hicimos con la cuadrícula de imágenes también.
Así que flotar a la izquierda y guardar, refrescamos.
Y ahora terminamos con esta grilla masiva aquí.
Oh adelante y en el margen para que pueda ver lo que está sucediendo.
Entonces vamos a tener margen 1. 6 6 por ciento y guardar.
Ahora puede ver que tenemos nuestra grilla aquí y esta cuadrícula ocupa toda la pantalla.
Así que voy a cambiar eso un poco.
No queremos que sea tan grande.
Y lo que podemos hacer es usar ese contenedor que proporcionamos este contenedor de ID div.
Entonces, si le damos un estilo al div con la idea de contenedor que seleccionaremos así,
podemos comenzar diciéndole que su ancho máximo debería ser.
Y creo que fui por 600 píxeles.
Podemos jugar con ese número.
Ahora si actualizo Ahora, puedes ver que es mucho más pequeño.
Entonces eso es parte de eso
Y luego, ¿qué es esto? También esto.
Así que tendremos 2 márgenes.
0 auto.
Recuerde que este truco es el margen cero en la parte superior e inferior del contenedor y el automático a la izquierda
y derecha lo hará de modo que tenga el mismo tamaño en cada lado.
Y ahora tenemos esta bonita rejilla central.
Todo bien.
está en nuestro H-1 así que voy a tener un H1 aquí y solo voy a decir la gran R.
Y hagamos una cosa más que GRAMO. ser un juego de color y comenzaremos así.
Y si actualizamos, por supuesto, es realmente difícil de ver.
Así que hagámoslo blanco H-1 de color blanco y ahorre.
Y comenzaremos con eso.
Así que ahora usemos algunos javascript.
Vamos a configurar Javascript para dar a cada uno de estos un color diferente.
Así que vamos a hacer un nuevo archivo y lo llamaremos juego de colores.
J. S. y guarda.
Y como siempre quiero hacer, agreguemos nuestra alerta que dice conectada.
Ahora agreguemos el script en fuente igual a juego de colores.
Sí, guarde la página y obtendremos nuestra alerta conectada.
De acuerdo, voy a cambiar el tamaño de la ventana allí.
Ahora agreguemos el código para darles diferentes colores.
Por lo tanto, en el resultado final en el final del juego.
Cada vez que la página se carga, elige seis colores aleatorios y luego asigna cada color a uno de los divs.
el aspecto aleatorio y asignaremos seis colores que son siempre iguales.
Comenzaremos por
Y luego pasaremos a aleatorizarlos.
Así que vamos a mi juego de color Sí y comenzaré haciendo una lista de colores y los
llamaré colores.
Es una matriz.
Y recuerda que en nuestro producto final esta será una lista aleatoria de colores.
Por ahora solo voy a agregar algo mío.
Entonces G-B y yo comenzaremos con todo rojo.
Entonces 2 5 5 0 0 y solo para que esto sea legible para ti, haremos todo esto en líneas separadas.
Entonces tendremos seis de estos.
Y el primero será todo rojo y luego tendremos otro que sea todo rojo y todo verde lo
que haría amarillo.
Y luego el siguiente será 0 rojo y todo verde.
Y luego el siguiente después de eso será cero rojo o verde y todo azul y luego también lo hará.
Entonces, lee 0 verde 255 azul y luego haremos 255 rojo 0 verde 255 azul y eso nos dará una matriz de
seis colores como cadenas.
Y luego, lo que queremos hacer es seleccionar los seis de estos cuadrados en bucle a través de ellos y luego asignar
uno de estos colores al fondo de cada uno.
Entonces, para pasar primero, debemos seleccionar hasta ahora y lo llamaremos "cuadrados equivale a documento" y tenemos
muchas opciones aquí.
Voy a utilizar un selector de consulta todo.
Así que me aseguro de obtener los seis en lugar de solo el primero.
Y vamos a seleccionar basado fuera del cuadrado de clase.
Si acabáramos de hacerlo, recuerde que tenemos un contenedor div y no queremos seleccionarlo.
Solo queremos estos seis cuadrados cuadrados tan cuadrados y luego recorreremos cuatro var es igual a cero.
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
iguales y esta es la parte interesante que tomaremos ese ojo y lo usaremos para acceder a los
colores.
O este es Colt. Estoy aquí con una pequeña corrección que agrego después del hecho.
Solo una nota rapida.
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
mayúscula en lugar de un fondo de puntos de estilo, que es lo que estoy usando en este video.
Por lo tanto, cada vez que vea un fondo con estilo, cámbielo por el color de fondo.
Y la razón de esto es que funcionará en todos los navegadores actuales, pero el
fondo no funciona en Firefox, por lo que técnicamente funciona con estilo.
Ese fondo funcionará en Chrome, por ejemplo, está bien y el juego funciona, pero he recibido muchas
preguntas sobre lo que sucede en Firefox y este es realmente el principal color de fondo de
estilo culpable.
También me gustaría pensar que Del Anderson, uno de los estudiantes en los foros de
discusión para señalar esto más recientemente, volveré a la codificación.
Entonces, lo que estamos haciendo tenemos seis cuadrados y nuestro ojo va desde 0 1 2 3 4 5 y eso
recorrerá cada cuadrado.
Y luego, cuando llegue al primer cuadro, tomaré cero y le daré el color de fondo de los
colores cero que está aquí.
Entonces eso sería correcto.
Y luego continuamos y tomamos uno para el segundo div y le damos el segundo color con índice de 1
y seguimos haciéndolo hasta que lleguemos al final.
divs estén en la página es el orden en que serán coloreados usando estos colores de la matriz.
Así que básicamente vamos para que los
Y si guardamos la actualización, verá que obtenemos nuestros seis colores básicos.
Entonces tenemos magenta azul cian verde amarillo rojo.
Así que está bien por ahora.
Nos enfocaremos en aleatorizar los colores más tarde.
Pero como una vista previa, aunque tenemos que hacer es generar tres números tres números diferentes
de 0 a 255 y luego los combinamos.
Entonces, son solo tres canales diferentes, todos aleatorios.
Y luego los convertimos en una gran cadena con r. g B y paréntesis a su alrededor.
Pero vamos a ir con estos colores por ahora.
Lo siguiente que debemos hacer es cada vez que se carga la página.
Te muestro aquí, no solo se escogen seis colores.
Uno de esos colores se selecciona para ser el objetivo o el color que estamos buscando.
Entonces, en este caso, este es un color que se elige.
Así que vamos a hacer eso también y vamos a comenzar a codificar duro Portus y luego lo haremos
al azar después.
Entonces, comenzaremos diciendo que el color dorado es cian.
Entonces ese es el cuarto índice de color de tres.
Así que bien, la variable aquí var pick color equivale al índice de matriz de colores 3.
Y eso elegirá Suyin o este color aquí R. GRAMO. SEGUNDO.
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
que justo aquí como la tenemos aquí.
Obviamente, no tiene el mismo estilo pero queremos que diga R. GRAMO. SEGUNDO.
un poco si puede pensar en el juego de scorekeeper donde teníamos un H1 y estamos cambiando el.
Y luego, entre paréntesis 0 2 5 5 5 5 para hacer eso, tendremos que cambiarlo
Jugador jugador dos puntajes inicialmente.
Acabamos de tener un avión H-1 Y cuando lo actualizamos automáticamente sobrescribió todo lo demás que estaba
allí.
Pero no queremos hacer eso.
Queremos que el texto sea el mejor juego de color y nuestro color simplemente va aquí, pero no queremos tener un
H-1 o algo por el estilo ya que estos irían en líneas separadas.
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.
estar ahí
Entonces, nada se ve diferente pero si inspeccionamos.
Puede ver que ahora tenemos un lapso que significa que puede seleccionarlo fácilmente y manipular el texto.
Y vamos a darle una idea para que sea aún más fácil.
Así que le daremos el id.
Y vamos a llamarlo pantalla a color.
Luego iremos a nuestro javascript y seleccionaremos eso.
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.
Hasta ahora, la
Y fue una pantalla a color.
Y ahorraremos y haremos esto un poco más grande.
Guarde el archivo y luego queremos actualizar la visualización en color para que diga este color que elegimos.
Entonces, el contenido de texto de la pantalla a color equivale a elegir su color así y se actualizará.
Y ahora terminamos con nuestro color aquí.
Estupendo.
Agreguemos la lógica ahora para los eventos de clic.
Entonces, cuando hago clic en uno de estos cuadrados, queremos ejecutar un código que determine el color del
cuadrado en el que hicimos clic.
Y una vez que tenemos ese color, vamos a compararlo con el color del pix.
Este aquí mismo.
Y si son diferentes Vamos a cambiar el color de fondo de ese cuadrado para que
vaya al mismo color que el fondo del cuerpo.
Y si son iguales, eso significa que el jugador tiene uno.
Y tenemos que hacer algunas cosas especiales.
Y si son diferentes, eso significa que un jugador eligió el color incorrecto y también tendrá que
manejarlo para comenzar.
Agreguemos solo un controlador de evento de clic simple que solo nos alerta cuando hacemos clic.
Así que vamos a agregar un controlador de eventos a cada uno de los cuadrados para que podamos usar
el mismo bucle que tenemos.
Así que añadiré un comentario aquí, agrego los colores iniciales a los cuadrados y luego la siguiente parte hará
clic en los oyentes dos cuadrados.
Entonces, otro de estos cuadrados I dot add event listener.
Es hora de Click y nuestra función de devolución de llamada.
Todo lo que haremos es alertar bastante bien y asegurarnos de que los seis nos alertarán.
De acuerdo, haz clic en el cuadrado.
De acuerdo, parece que todos funcionan bien como deben hacerlo.
Entonces, lo que tenemos que hacer es tomar el color del cuadrado cliqueado y luego comparar el color para elegir el color.
El color de imagen variable que definimos aparece para que empecemos a obtener ese color.
Recuerde que podemos utilizar esto que se refiere al elemento que se hizo clic en el cuadrado.
Entonces podemos decir este estilo de fondo.
Y hagamos otra alerta aquí y veamos qué obtenemos.
Entonces, si hago clic en el rojo, me alerta.
RG B 2 5 5 0 0 y si hago clic en asignar uno R G B 0 2 5 5 2 5 5.
Entonces esto está funcionando.
Entonces, lo que haremos ahora es guardarlo en una variable que llamaremos color cliqueado así.
Y luego vamos a escribir una declaración de IF para comparar los colores de Quick, así que si su
color es igual a triple, elija la rima de color adecuada, si ese es el caso, la alerta será correcta.
Y si no coinciden con o alertaremos mal.
Vamos a darle una oportunidad de actualización.
Hago clic en este.
Incorrecto.
Y la verdadera prueba.
Hago clic en el derecho que dice correcto.
funciona, aunque no tengamos los colores aleatorios, en lo que sí tenemos es una matriz de seis colores
que están codificados de manera rígida y asignamos un color a cada cuadrado y luego estamos eligiendo.
Entonces, nuestra lógica
En este caso, cian y esto será aleatorio, por supuesto, pero estamos eligiendo un color que es nuestra respuesta.
Y luego agregamos un detector de eventos a cada cuadrado cuando el usuario hace clic en ese cuadrado o cualquier cuadrado.
Comparamos el color del cuadrado dado con el color de la imagen si coinciden.
Nosotros hacemos una cosa.
Si no coinciden hacemos algo más en el próximo video, vamos a hablar sobre lo que realmente
hacemos si coinciden.
Y lo que hacemos si no coinciden.