Diviértete con JavaScript: Construir un juego de memoria

1. ¡Te damos la bienvenida a la clase!: Hola, bienvenidos a esta clase. Si eres un principiante en desarrollo web y solo querías saltar y construir algunos proyectos divertidos. Entonces esta es la clase para ti. La idea detrás de esta serie es mostrarte lo que podemos hacer cuando se combinan en HTML, CSS y JavaScript. No va a estar usando ninguna plantillas y en librerías, cualquier boilerplates o ningunos frameworks. En cambio, vamos a construir nuestros proyectos completamente desde cero usando estas tres tecnologías. Proyecto para esta clase es un juego de memoria. Y la idea es que tengamos una cuadrícula de cuadrados. El enlace de juego hace clic en un par de casillas para revelar los colores e intenta encontrar un partido. Si consiguen un partido incorrecto, las plazas una vez más se ocultan. El jugador debe tratar de recordar lo que cada completo premia para el siguiente intento. Los colores también al azar, por lo que están en una ubicación diferente para cada juego. Este juego se construirá completamente desde cero. Empezaremos construyendo la estructura HTML. Antes no tenía estilo y también el layout con CSS, junto con animaciones más ligeras agregando cuando hay un partido y también cuando no hay mucho. La mayor parte de nuestro tiempo se dedicará a escribir JavaScript, incluyendo generar los cuadrados con colores aleatorios, lidiar con partidos y sin partidos, empacar el marcador que sustenta el final del juego. Y mucho más. Cubriremos muchos de los fundamentos de JavaScript que necesita saber, como variables, funciones, trabajo con el DOM, eventos, condicionales y muchos más. Entonces gracias por revisar esta clase y nos vemos en la primera lección. 2. Qué necesitarás para clase: Bueno, voy a ir a la basura en cualquier momento en saltar y construir en nuestro proyecto. Justo antes de hacerlo sin embargo, hay un par de cosas que necesitamos para ponernos en marcha. En primer lugar, necesitamos un navegador web y puedes usar cualquier navegador web que prefieras, y lo que estés usando Google Chrome, pero puedes hacer uso de Firefox Safari o cualquiera de nosotros, así como esto, tambiénnecesitarás un editor de texto. Estaré usando Visual Studio Code, cual está disponible en code dot Visual Studio.com. Una vez que hayas descargado esto y abierto esto, verás una ventana de inicio igual que nosotros a la izquierda, pero no puedes usar ningún otro editor si lo prefieres. Entonces vamos ahora a saltar a la primera lección. Empezaremos creando nuestro proyecto. 3. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase, e incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare y no solo lo revisaré, sino que también inspirará a otros estudiantes también. Más información sobre el proyecto de clase, dirígete a la pestaña de proyecto y recursos, donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 4. Configuración de proyectos: Esta es la versión final del juego que ahora entramos en Build. Te ayudará a visualizar exactamente lo que vamos a crear. La idea de este juego de memoria es bastante simple. Tenemos una secuencia de cuadrados sin color de fondo. Para cada uno de estos tiene un color oculto unido a ella. Por lo que cuando pinchemos en cualquiera de estos, nos revelará el color. Y la idea es crear un par coincidente. Una vez que lo hacemos, nuestro puntaje se incrementa. Pequeños efectos de animación, y estos dos colores permanecerán en la pantalla. Seguidamente seguimos dando clic en las casillas adicionales y tratamos de seguir adelante hasta que se estén creando todos los partidos. Entonces para hacer esto, como siempre, saltará al escritorio y creará una nueva carpeta. Llamaré a esto el juego de la memoria. Arrastremos esto al código de Visual Studio. De acuerdo, y a partir de aquí, necesitamos crear nuestros archivos habituales para empezar, comenzaremos con la página de índice. Entonces saltemos a nuestra barra lateral. Haga clic en el icono de nuevo archivo o utilice Comando o Control N. Para crear nuestra página HTML de índice. Usamos el comando de atajo incorporado, que es HTML dos puntos cinco, que configurará todo el repetitivo que necesitamos para nuestro índice, es ese el título del juego de memoria? Y para ello, el contenido HTML es bastante sencillo. Todo lo que vamos a agregar si nos fijamos en la versión final, es un título en la parte superior, vamos a crear un elemento que actualmente no es visible, que mantendrá la partitura, agregará un botón que no podemos actualmente ver. Esto será para volver a jugar. control con JavaScript is putting solo aparecerá una vez que se hayan creado todos los partidos, lo que permite al usuario reiniciar el juego. También tendremos nuestra área de cuadrícula, que será una lista desordenada, y cada una de nuestras casillas será un elemento de lista. Tan bastante simple en cuanto al HTML. Entonces saltemos a la sección del cuerpo. Empezaremos las cosas con un encabezado de nivel uno, que va a ser el texto del juego de memoria a p. elementos. Y esto es recordar para nuestro puntaje, y lo estableceremos en un valor inicial de 0, colocando una identificación única de cráneo. Y usaremos esto para agarrar esta sección del curso dentro de JavaScript. Lo usaremos para mostrar y ocultar esta sección cuando sea necesaria. Y también para aumentar el puntaje cada vez que el usuario tenga un partido. Como se mencionó, también necesitaremos un botón y esto es para volver a jugar. También ocultaremos esto hasta que termine el juego. Y entonces si yo fuera cuadrados crearé una lista desordenada. En el próximo video, crearemos esta lista desordenada para que sea como una cuadrícula. Entonces por ahora va a estar vacío porque creamos cada uno de nuestros cuadrados usando JavaScript también nos da un ID único de cuadrados. Guarde esto, y luego abramos esto dentro del navegador. Por lo que nuestras opciones son ir a la carpeta del juego de memoria y hacer doble clic en la página de índice para abrir esto. O usando Visual Studio, también podemos hacer clic derecho en la pestaña, copiar la ruta, y pegar esto en el navegador. Por supuesto, esto no se ve muy bien en este momento. Necesitamos crear nuestro estilo en el próximo video. Y nos prepararemos para esto creando nuestro nuevo archivo en el que guardarlo. Así que cuando archivas, este es el css de puntos de estilos. Y por supuesto también necesitamos un archivo JavaScript para controlar nuestro juego. Así que crea un nuevo archivo también dentro de aquí. Se trata de los guiones dot js. Volveremos a esto en una fecha posterior, pero por ahora solo saltaremos a nuestra página de índice, baja por la barra lateral y enlazaremos a nuestros dos archivos. Entonces, antes que nada, en la cabeza, crearemos nuestro enlace a nuestras hojas de estilo. Y como esto está dentro de la misma carpeta junto a nuestro índice, podemos simplemente referencias por el título styles.css. Y luego abajo en la parte inferior de la sección del cuerpo, justo debajo de la lista desordenada, crea un enlace a nuestro script. La fuente es sólo el nombre del archivo script.js. Vamos a comprobar que esto está funcionando con una alerta. En cualquier texto dentro de aquí. Guarda nuestro archivo y actualiza el navegador. Y nuestro archivo JavaScript está correctamente vinculado. Podemos eliminar esto. Guardatodos nuestros archivos, y ahora pasaremos a la siguiente sección donde crearemos nuestros estilos para que nuestro juego luzca mucho más bonito. 5. Cómo aplicar estilo en CSS: Ahora es tu desactiva nuestras hojas de estilo, las cuales fueron creadas en el video anterior. Y la idea es hacer que esto se parezca más a la versión final. Y claro que puedes adaptarlo a tu propio estilo a lo que me voy a volver demasiado loco. Sólo vamos a crear algunos estilos y colores básicos para que se vea un poco más atractivo. Entonces, para empezar, saltaremos a nuestra hoja de estilo y apuntaremos a la sección del cuerpo. Y comenzaremos con la familia tipográfica. Por lo que de nuevo, puedes configurar cualquier color y las fuentes y tamaños que prefieras. Así que selecciona cualquiera de las familias de fuentes que te gustaría usar. Para comprobar esto se vincula correctamente dentro de nuestro índice. Dale a esto un guardado y actualiza el navegador, y deberías ver un cambio en nuestro texto. De acuerdo, a continuación, configuraremos el cuerpo para que tenga el tipo de pantalla de flex. Y esto nos permitirá establecer la dirección del flex para que sea columna. Esto le dará a todo nuestro contenido es vertical, apilado uno encima del otro diseños. Entonces tendremos el título, tendremos el cráneo, que actualmente es invisible, el botón que actualmente es invisible, seguido de nuestra lista desordenada. El display. Usa el FlexBox. Por defecto, la dirección flex va a estar en fila, por lo que todo aparecerá de izquierda a derecha a través de la página. Y podemos cambiar esto configurando la dirección flex por defecto para que sea columna. Coloca todo en el centro, como el texto y la partitura. Podemos establecer los artículos de línea en el centro. Cuando se utiliza la dirección de flexión de la columna. Esto empujará todo hacia abajo a la mitad del navegador, el fondo. El fondo. Voy a escoger, haremos uso de un gradiente lineal, que va a tomar en tres colores diferentes. Con gradiente lineal, podemos establecer la primera sección de nuestros gradientes para que sea el valor de cualquier ángulo que queramos que este aparezca. Así podemos cambiar el color de la parte superior izquierda a la inferior derecha, de izquierda a derecha, de arriba a abajo o cualquier otro ángulo que quieras, quiero ir por 90 grados y luego separados por una coma, colocando tres colores diferentes. Entonces el primero, este será el color de partida por encima de la izquierda, que es un valor RGB de 2015149. Por lo que esto comenzará desde el principio. Entonces colocaremos esto en 0 por ciento. Hagamos un poco más de espacio para que podamos ver esto en la página. ¿ De acuerdo? Entonces tenemos nuestro primer parámetro, voy a segundo uno, y luego otra coma justo después del 0 por ciento. El segundo valor RGB. Abra los corchetes. Este es 118248 a 0 gratis. Y después de esto, justo después de este corchete azul, colocando el porcentaje que es 50, comenzará en este color. 50 por ciento de manera a través de los gradientes tendrá este color y luego separados por coma, nuestro tercer y último valor. Nuevamente, un valor RGB, que va a ser rojo, valor de 70, verde, y azul, 249. Este es el color final. Entonces esto va a ser en la extrema derecha. Entonces colocaremos esto al 100%. Refresque la página. Empezaremos en 0, que es nuestro color más oscuro. Tenemos nuestro color medio. Entonces al 100%, cambiamos a este tercer valor, justo después de nuestro color de fondo, que se aplicará al texto. Y esto va a ser de nuevo, un valor RGB, lo colocará en un valor de 2073, luego 63 para el azul. Además, así como preferencia personal, voy a establecer algún espacio entre cada una de estas letras con un valor de dos pixeles, sólo para que el texto esté un poco más extendido. De acuerdo, entonces después de esto, voy a dejar el nivel uno rumbo tal como está. Y podemos movernos hacia abajo a la sección de partituras y también al botón de nuestra página de índice. Tenemos nuestra puntuación, que tiene la idea de puntuación. Entonces tenemos nuestro botón justo debajo. Hojas de estilo. Agarrar la partitura usando el hash, ya que este es un id, aumentará el tamaño de la fuente para ser de dos rems. El peso de la fuente sea un poco más oscuro. Por lo que esto puede ser audaz. Después algo de margen en la parte superior e inferior. Entonces un rem en la parte superior e inferior. Y dejaremos como margen 0 a la izquierda y a la derecha. A continuación, tenemos el botón, que nunca se ve bien por defecto. Entonces apuntaremos esto con el selector de botones. Y los botones no heredan automáticamente la familia de fuentes que se estableció del cuerpo. Por lo que podemos copiar esta misma familia de fuentes. Plazas en. Esto cambiará el texto del botón. De acuerdo, entonces lo que quiero hacer aquí es quitar el borde predeterminado. Agregaremos algunas esquinas redondeadas. Y también vamos a establecer un poco de relleno para que sea un poco más grande. Y también es bueno cambiar su cursor para que sea puntero. Entonces comenzaremos con las esquinas redondeadas usando el radio de borde de cinco pixeles. Quite este borde negro predeterminado. Al establecer esto para que sea ninguno. De acuerdo, necesita un poco más de espaciado, que podemos agregar relleno. Recuerda que el relleno agrega el espacio en el interior del elemento. Entonces si agrego dos valores, el padding, el primer valor de 0.5 rems, lo aplicaremos a la parte superior e inferior. Y el segundo valor se aplicará a la izquierda y a la derecha. El tamaño de fuente a aplicar al texto de una memoria RAM. Algo de espaciado entre letras de un píxel, y cambiar el cursor para que sea un puntero. Por lo que estas dos últimas propiedades espaciarán el texto y también nos darán este puntero de mano cada vez que el usuario pasa por encima de este botón. Así que volvamos a nuestra página de índice. Lo siguiente que tenemos, el estilo es nuestra lista desordenada. Como podemos ver, no tenemos ninguna de nuestras plazas dentro de la lista desordenada con la que trabajar. Por lo que comenzaremos agregando algunos elementos vacíos de la lista solo para simular cómo se verá esto cuando agreguemos estos con JavaScript. Entonces colocando un elemento de lista y puedes duplicar esto tantas veces como quieras. Actualmente siempre vemos es que estos puntos pasarán a nuestras hojas de estilo y comenzaremos a trabajar con nuestra lista desordenada. En primer lugar, de repente tipo de pantalla para ser una cuadrícula. La grilla nos permitirá establecer nuestras plazas tal y como vemos en esta versión final. Entonces vamos a establecer cuántas filas y cuántas columnas queremos, y también el tamaño para cada uno de estos cuadrados. Hacemos esto configurando primero las columnas de la plantilla de cuadrícula y podemos establecer tantos valores como queramos dentro de aquí. Entonces por ejemplo, si agregamos un 100 pixeles y 200 pixeles, esto nos dará dos columnas, la primera o 100 pixeles, y después la segunda de 200 pixeles. Pero como vamos a estar creando cuatro cuadrados diferentes, que es de igual tamaño, podemos hacer uso de la función de repetición. La función de repetición va a tomar en dos cosas. El primero es el número de columnas separadas por una coma. El segundo valor es el tamaño de cada uno. Por lo que 100 pixeles. Y si copiamos y pegamos esto, podemos cambiar esto para que sean filas de plantilla de cuadrícula. Esto para cerrar. También queremos cuatro filas o 200 píxeles de altura. Esto efectivamente nos da una cuadrícula de cuatro por cuatro, dejándonos con 16 espacios individuales. Y veremos esto con más claridad muy pronto una vez que lleguemos al ítem de la lista, el hueco alrededor de cada uno de diez pixeles. También eliminaré el valor de relleno predeterminado estableciendo esto para que sea igual a 0. Y luego bajar al elemento de la lista, elemento de lista. Tenemos que mover estos puntos. Son estas viñetas estableciendo el estilo de lista para que sea igual a ninguno. Eso se deshace de esos. Establecemosuna frontera. Y el grosor del borde hará que esto sea bastante delgado. Entonces 0.5 pixeles, un color de línea sólida. El color de la línea. Usamos un valor RGB de 2036, lo que nos da nuestra primera fila. Y como sólo tenemos cuatro ítems de lista, es sólo ocupar los primeros cuatro espacios. Sigamos adelante y dupliquemos estos cuatro artículos. Hacer ocho. Ahora tenemos espacio para ocho artículos diferentes y estos aparecerán ahora en el segundo rollo. Bueno, por lo que para romper las esquinas de cada uno de estos cuadrados, podemos colocar en algún radio de borde de diez pixeles. Y también establecer el cursor para que sea un puntero. Ya que queremos que el usuario pueda dar clic en cada uno de estos. Bueno. Entonces este es nuestro estilo básico por ahora. Volveremos a esto más adelante y agregaremos algunas animaciones. Configurará dos animaciones diferentes. Y la primera será si el usuario consigue la suposición correcta, yo soy uno si también se equivocan. 6. Selección de colores aleatorios: De acuerdo, entonces ahora tenemos nuestra página de índice con nuestro marcado, tenemos nuestra hoja de estilo, y así es como se ve nuestro juego actualmente. También tenemos nuestro script, que actualmente está vacío y estamos enlazados en la parte inferior de nuestra página de índice. Por lo que el objetivo de este video es crear una matriz que contendrá todos los colores que desea utilizar para todos nuestros 16 cuadrados hará 16 cuadrados. Por lo que necesitamos ocho pares de colores para crear un lote. Entonces, por ejemplo, tenemos una matriz con dos rojos, dos amarillos, dos azules, y así sucesivamente. El segundo objetivo es crear una función que seleccionará aleatoriamente uno de estos colores, asignará ese color a un cuadrado en particular, luego ese color será eliminado de la matriz. Entonces no tenemos ningún duplicado. Entonces, en primer lugar, el paso uno es crear una matriz llamada colores e iniciar ocho pares de colores dentro de aquí. Así que saltando en nuestros guiones, crea nuestra matriz llamada colores. Y cada uno de estos va a ser una cuerda. Entonces puedes cambiar estos colores para sean cualquier diferente que quieras, también puedes cambiarlo para que sea un color RGB, pero quiero usar un color hexágono como cuerda. Así que hay todos sólo valores CSS, para que comiencen con el hash. Y el primer valor que he elegido es 3333. Separado con una coma duplicará éste. Entonces tenemos un par porque queremos que sea de 16 colores, pero habrá ocho colores diferentes para hacer pares. Después de esto, el segundo color, nuevamente, un color hexadecimal, será doble F9 será para D. Y luego duplica éste. El tercer color, este va a ser un 0, C-C doble F una coma, y duplicar este. El siguiente. Doble F, doble seis. Duplica siguiente doble F4, D para duplicar. A continuación, doble F en una, en una coma copiar y pegar. Vaya, no olviden las cenizas al inicio de cada una de estas. Y la siguiente va a ser todas las d's. Por lo que 60 días. Después de esto, tendremos 000099. Duplicados. Debe ser todo lo que necesitamos. Tenemos nuestro primer par, 2345678 pares ahí. Por lo que esto nos da 16 colores diferentes a cada una de nuestras plazas. A continuación, justo después de esto, crearemos una función. Y el trabajo de esta función es seleccionar un color aleatorio de esta matriz, y luego lo eliminaremos. Por lo que comienza, sólo vamos a crear nuestro cuerpo de función llamado Seleccionar color. Y para seleccionar aleatoriamente uno de nuestros 16 valores de la matriz, podemos crear un número aleatorio que contenga 16 opciones. Por lo que usamos la función de mapa, genera un número aleatorio. Y podríamos, si quisiéramos multiplicar esto por 16, o en su lugar, sólo voy a hacer uso de la matriz de colores y seleccionar la propiedad length. Entonces colores, la tierra. Y si decidimos cambiar esto en el futuro, esto lo recogerá automáticamente. Recuerda que Math.random nos da un número aleatorio entre 010 está incluido, pero el valor de uno no lo está. Sube a 0.999, por ejemplo. Y lo que tenemos que hacer es conseguir algunos números enteros para poder redondear esto a la baja. Vamos a cortar fuera de lugar todo este acceso matemática.Pasta de piso en nuestro número aleatorio. Esto va a redondear esto a la baja. Por lo que esto nos dará un número entre 015, resultando en 16 opciones. Almacene esto dentro de una variable o constante llamada aleatoria. Simplemente haré un comentario. Entonces esto es de 0 a 15. Y ahora podemos usar este número aleatorio para seleccionar cualquiera de nuestros colores en la matriz de colores. Así que selecciona colores. Y al igual que con cualquier otra matriz, podemos pasar en un número de índice para seleccionar un color en particular. Pero vamos a pasar en nuestro valor aleatorio para darnos una selección aleatoria. Esto dentro de una constante llamada seleccionada. Luego después de seleccionar cada uno de estos valores aleatorios, podemos eliminar esto de nuestra matriz de colores de empalme de puntos de colores. método de empalme eliminará cualquiera de nuestros valores. Entonces, antes que nada, el número de índice, con el que vamos a empezar. Entonces si partimos de aquí, podemos incluso eliminar el valor único o podemos mover cada valor justo después. Entonces la posición inicial es nuestro número aleatorio para nuestra posición de índice. Y ya que solo queremos eliminar un solo valor a la vez o, colocando un valor de uno para solo eliminar este único valor. Después de esto, retorno, nuestro valor seleccionado. Entonces podemos probar esto llamando a nuestra función justo debajo. Entonces lo he llamado por el nombre. Llamaremos a esto dos veces para que podamos ver cuántos de estos valores se han eliminado. También se coloca en un registro de consola para nuestra matriz de colores. Pase al navegador y abra herramientas de desarrollador con el botón derecho e inspeccione. Salta a la consola. Refrescar. Y podemos ver que tenemos una matriz que contiene 14 valores. Recuerde que nuestra matriz original que contiene esos 16 valores. Después ejecutamos nuestra función dos veces. Y en cada llamada de función eliminó un solo valor de una posición aleatoria. Por lo tanto, para el momento en que llega al registro de la consola se han eliminado dos posiciones. Copiemos y peguemos. Esto debería dar lugar ahora a 13 valores. Y quitando uno cada vez que hemos seleccionado. Significa que nos vamos a quedar con valores únicos. También hará una prueba más, cortará fuera de lugar. Una de nuestras llamadas a funciones, coloca dentro del log de la consola. Basta con quitar el punto y coma. Y cada vez que ahora nos refrescamos, deberíamos ver uno de nuestros valores de matriz seleccionados al azar. Alma buena con nuestro valor aleatorio de nuestra matriz ahora seleccionado. A continuación podemos usar este color aleatorio dentro de un bucle para crear los 16 cuadrados que necesitamos mostrar para nuestro juego. 7. Creación de la cuadrícula de los cuadrados: Bienvenido a la siguiente parte. El objetivo de este video es crear un loop que se va a ejecutar 16 veces. Esto en combinación con el CSS que ya tienes en nuestra hoja de estilo, se usará para crear nuestra cuadrícula de cuadrados, que necesitamos 16 cuadrados, que es cuatro filas de Foursquare. Además de esto, cada una de nuestras plazas necesita un atributo personalizado para almacenar el color que se supone que debe ser. Recuerden, tenemos todos nuestros valores hexagonales justo aquí. No queremos que estos se apliquen al color de fondo de nuestras plazas, porque obviamente esto haría que el juego no tenga sentido porque el usuario podrá dar clic en los colores que puede ver. Nosotros queremos poder esconder estos. Entonces para hacer eso, eliminaremos el color de fondo y también almacenaremos estos como atributos para saber cuál de nuestros cuadrados podemos emparejar. Oops, mientras estamos aquí, también solo agregaremos el hashtag, ambos de estos dos colores. Así que si ya no lo has hecho, comenzaremos por ir a nuestro index.html y podremos mover todos los elementos vacíos de la lista que lo creamos solo para ver cómo se vería con el estilo. Así que elimina todos los elementos de la lista, y luego vuelve a nuestro script. Comenzaremos seleccionando nuestra lista desordenada de nuestra página de índice, que tiene el ID de cuadrados. La parte superior. Crear una constante para mantener estos en el contenedor llamado cuadrados. Usamos QuerySelector. Así documento selector de consulta de puntos. Pasando cómo cadena, que es el hash, ya que este es un ID y el nombre de los cuadrados. Simplemente creo un poco más de espacio para que podamos ver todo esto en una sola línea. Y luego crearemos una variable almacenada en una constante llamada número de cuadrados. Queremos 16 plazas. Y luego otra variable llamada I, que va a ser igual a un valor inicial de 0. Y usaremos esto para el bucle while, que estamos a punto de configurar. De acuerdo, así que baja a la parte inferior y solo sopla nuestra función de seleccionar Color, que vamos a usar en combinación con nuestro bucle. Haremos uso de un bucle while. Esto correrá mientras yo sea menor que la variable llamada número de cuadrados. Así que recuerden el I actualmente es igual a 0 y número de cuadrados es 16. Así que efectivamente esto comenzará corriendo y diremos, mientras que el número 0 es menor que 16, ejecute el código dentro. Y luego antes de que me olvide, correré I plus, plus. Esto va a aumentar el valor de I en cada bucle. Para comenzar, 0 es menor que 16. Por lo que el código dentro correrá, luego aumentará yo para ser igual a 11 sigue siendo menor que 16. Por lo que el código seguirá ejecutándolo 16 veces. Pero, ¿qué código necesitamos para correr dentro de aquí? Bueno, ya que tenemos en nuestra página de índice y lista desordenada, y parece que hemos seleccionado nuestra lista desordenada. En lo más alto. Vamos a crear una lista de artículos para colocar en su interior. Y estos son igual que los elementos de la lista que agregamos dentro de aquí. Entonces es crear estos con JavaScript. Usamos elementos de creación de punto de documento, pasando el nombre de etiqueta de LI para crear un elemento de lista, y luego almacenar esto dentro de una constante llamada cuadrado. De acuerdo, entonces ahora tenemos el contenedor y también necesitamos un color al azar. Para esto, tenemos nuestra función arriba llamada Seleccionar color. Y esto va a devolver un valor seleccionado de nuestra matriz. Almacene esto dentro de una constante llamada color, que es igual al valor de retorno de nuestra función llamada select color. También podemos eliminar o comentar este código desde abajo. Y comprobaremos que todo esto está funcionando añadiendo estos colores a nuestros cuadrados. Entonces accede a r al cuadrado, que es el elemento de la lista. Podemos establecer el fondo del estilo para que sea igual a o color aleatorio. De acuerdo, así que ahora tenemos nuestro elemento de lista que estamos creando. Ahora podemos agregar esto a nuestro contenedor de cuadrados. Puede hacer esto accediendo a un niño de pluma. Así que accede al contenedor o al contenedor de plazas de oro de los padres. El método append child para agregar nuestro nuevo elemento de lista, que es la variable llamada Square. Refrescar. Esto ahora crea yo era 16 elementos de la lista y hemos establecido el color de fondo para que sea igual a o valores aleatorios. Lo recuerdo ya que después estamos quitando cada uno de estos valores aleatorios, solo vemos dos de cada uno de estos colores. Bueno. Entonces tenemos estos cuadrados que queremos, pero en realidad no queremos ver el color de fondo así. Comentaremos esto y en su lugar accederemos, a cada una de nuestras plazas. Se establecerá el atributo, que va a ser igual a un atributo personalizado llamado color de guión de datos. El valor va a ser igual a nuestro color. Esta pieza extra de información o este atributo se va a agregar a cada una de nuestras plazas. Entonces podemos ver esto si entramos en las herramientas del desarrollador, clic derecho e inspeccionamos elementos, saltamos a la sección de cuerpo, abrimos la lista desordenada. Y vamos a ver que cada uno de nuestros artículos de lista que creamos tiene este atributos personalizados con el color hexágono. 8. Escuchar los clics: Ahora, ¿qué tal 16 cuadrados en la pantalla? Ahora vamos a agregar un oyente de eventos a cada uno de estos cuadrados, lo que activará una función cuando se haga clic en, el juego se jugará en parejas. Entonces i e, cuando pinchemos en dos cuadrados, vamos a comparar los colores de cada uno. Esto necesitamos almacenar el color tanto de los cuadrados en los que se hace clic y luego rastrear si es el primero o el segundo cuadrado seleccionado. Teléfonos comparan ambos solo si es el segundo clic. Entonces si tenemos dos cuadrados seleccionados, compararemos los colores de ambos. Entonces, para empezar, saltaremos hasta justo debajo de nuestro bucle while. Lo que vamos a hacer es seleccionar todos nuestros cuadrados que se almacenan en los elementos de la lista. Así que agarrar todos estos, sería selector de consulta todo bucle sobre estos, y luego añadir un oyente de eventos. Así vio estos dentro de una constante llamada cuadrados luego hará uso de punto de documento, selector de consulta. Todos seleccionarán todos los artículos de nuestra lista. Esto va a contener una referencia a nuestros 16 cuadrados de ítems de lista. Entonces debajo de esto haremos uso de un for, of loop to loop sobre cada uno de nuestros cuadrados y agregaremos un oyente de eventos. Entonces un for, of loop comienza igual que un bucle for. Dentro de aquí dirás const plaza de plazas. Esto significa que pasaremos por encima de todos nuestros cuadrados, que son nuestros 16 elementos de la lista. Y entonces podemos acceder a cada uno individualmente con esta variable cuadrada. Así que accede a nuestros puntos cuadrados agregar evento oyente quiere escuchar un clic en cada uno de estos, que se ejecutará una función personalizada llamada cuadrado clicked. De acuerdo, Así que justo antes crear esta función de clic cuadrado, vamos a ir hasta la parte superior y añadir un par de variables más para almacenar la información que necesitamos. La información que necesitamos son las dos patadas en plazas. Por lo que comenzará a jugar. Daremos clic en el primero y luego haremos clic en el segundo. Yo instalo estos dentro de dos variables. Entonces vamos a cuadrar uno. Separado por comas también creará una variable llamada square to. Estos no necesitan ningún valor inicial. Y también como sólo queremos dar clic en dos cuadrados a la vez, vamos a hacer un seguimiento de esto con una variable llamada click count, que será igual a 0. Igual a 0. Daremos clic en la primera plaza. Esto entonces se incrementará para calentarse. Da clic en el segundo, esto se incrementará a dos. Vamos a comprobar si tanto. Y luego restablecemos esto de nuevo a 0, deteniendo al usuario haciendo clic en un tercer cuadrado. De acuerdo, Así que volvamos a nuestra función que necesitamos crear, que se llama cuadrado clicked. Vamos a configurar esto, pero justo debajo. Como se mencionó, para cada uno de estos clics, necesitamos aumentar nuestra variable de conteo de clics. Nos gustaría plus. Entonces este click en variable va a ser realmente útil porque necesitamos saber si es el primero o el segundo cuadrado con el que estamos tratando. El primer clic va a establecer nuestra variable cuadrada uno. Y al segundo clic pondremos nuestra plaza dos. ¿ Va a contener toda la información de nuestro elemento de lista que fueron creados, incluyendo el atributo que contiene el color. Pero justo antes de hacer esto, ¿cómo averiguamos en qué plaza se ha hecho clic? Una forma de hacer esto, que es posible que lo hayas visto en el pasado, es pasar la información del evento a la función. Y podemos acceder a esto con objetivos E dot. U otra forma es acceder a algo llamado Esto. Verá el valor de esto. Si pasamos esto a una consola, registramos, guardamos y refrescamos. Salta a las herramientas de desarrollador en la consola. De acuerdo, Así que da clic en cualquiera de nuestras plazas. Podemos ver un elemento de la lista o dar clic en un segundo cuadrado, nuestro segundo elemento de lista. Ambos apuntan a diferentes atributos de datos. Entonces la palabra clave esta, puede ser una cosa compleja en JavaScript, significa cosas diferentes en diferentes contextos. Pero para nuestro caso de uso, podemos ver que registra el valor del elemento de la lista en el que hicimos clic. Entonces podemos usar esto para establecer nuestras variables. Podemos hacer esto con un operador condicional de JavaScript. El operador condicional, a menudo referido como el ternario, hará una pregunta, dirá, es el conteo de clics igual a uno? Hacer una pregunta si es igual a uno o quiere hacer es establecer el cuadrado una variable para que sea igual a esto. O si no, si esto es igual a dos, establecemos cuadrado para que sea igual a esto, estableciendo nuestras dos variables. Y no te preocupes, si ahorras en código de Visual Studio automáticamente agrega entre estos paréntesis. Esto está completamente bien. De acuerdo, así que para probar esto, podemos colocar en un registro de consola el valor de cuadrado uno y luego cuadrado para refrescar y abrir la consola. Da clic en el primero. ver como solo hemos hecho clic en una, se establece la primera variable cuadrada una y la segunda sigue sin definir. Haga clic en cualquiera de la plaza, obtendrá el valor de dos elementos de la lista diferentes. Como sabemos, todas nuestras plazas son apenas actualmente un contorno. Necesitaré revelar el color de fondo cuando se haga clic en cada uno de estos, hacerle saber al usuario de qué color era en realidad, no lo recordaran para la próxima vez. Entonces para hacer esto, pasaremos una sentencia if, eliminaremos el log de la consola. Y diremos si el conteo de clics es igual a uno, por lo que se ha seleccionado el primer cuadrado. Lo que haremos es agarrar nuestra primera variable cuadrada. Establecemos el fondo de punto de estilo. Recuerda que esto es justo lo que hicimos como una medida temporal dentro de nuestro bucle while para establecer los colores. Pondremos esto igual al cuadrado uno. Agarraremos nuestros atributos, que establecemos aquí, donde obtiene atributos. Los atributos que desea seleccionar es este personalizado llamado color de datos. Pasa esto como una cuerda. Si no, esto es igual a nuestros segundos clics o pasarlo en l estados de cuenta. Copia esta línea de código. No quiero hacer aquí es cambiar esto para que sea igual a raíz cuadrada dos. Entonces así como un resumen o primer clic en cualquiera de nuestros cuadrados, estamos corriendo, nuestra función aumentará el contador de clics sea igual a uno. Si esto es igual a uno. O establece el cuadrado uno para que sea igual al elemento de la lista en el que se hizo clic. Si no es así, es el segundo clic donde pondremos cuadrado a. Nuevamente, comprobando si el conteo es igual a uno. Se está haciendo clic en el primer cuadrado. Cambiaremos el color de fondo para que sea igual al atributo de color de datos, que se almacena dentro del elemento de la lista. Si es el segundo clic, establecemos esto igual al cuadrado de dos colores. Por lo que ambos serán revelados en nuestro juego. Probemos esto. Refrescar. Haga clic en el color. Y el cuadrado tiene su fondo configurado para ser igual a nuestros atributos. El segundo, ambos de estos colores ahora están configurados correctamente. Notarás todo lo que podemos seguir adelante y haciendo clic en el resto de los colores, pesar de que solo queremos lidiar con ello de dos a la vez. Pero esto es algo de lo que trataremos en el futuro. A continuación, nos encargaremos de qué hacer si los colores son mucho o si son diferentes. 9. Comprobar una correspondencia: como sugiere el título de este video, el objetivo ahora es esperar hasta que se hayan seleccionado dos casillas. Y entonces podemos comprobar si son un partido I, II, ambos tienen los mismos atributos de color. Esto bajará a la función r al cuadrado clicked. Y dentro de esta función, la sección L se ejecutará si se seleccionan dos cuadrados. Entonces hago clic en conteo es igual a dos, luego se ejecutará el código else. Entonces este es el lugar para comprobar si hay un partido y podemos agregar el código directamente dentro de aquí. Son en cambio voy a crear una función separada. Por lo que esta función se va a llamar cheque match, que ahora creará. Así que ve justo debajo de nuestra función de clic cuadrado y crea esta función. Verificar coincidencia. Entonces, ¿cómo vamos realmente a revisar si ambos son coincidentes? Bueno, la forma de hacer esto es acceder a la plaza uno y plaza a igual que hicimos arriba. Usaremos el método get attribute para cubrir el valor de cada uno de los colores. Entonces podemos comprobar si estos son iguales y almacenarlos dentro de una variable. Al igual que hicimos aquí. X es nuestra variable llamada en el cuadrado uno, obtendrá los atributos, que se llama color de datos. Y comprobaremos que esto es igual a este mismo usando el cuadrado dos. Así que esto va a comparar tanto para los atributos y esto devolverá un valor booleano de true o false, que podemos almacenar dentro de una variable llamada match. Entonces el valor de match determinará cuál a las siguientes funciones vamos a ejecutar. Entonces vamos a crear dos nuevas funciones. El primero, si no hay mucho, entonces éste lo va a ser, si hay partido. Para determinar cuál se va a ejecutar, podemos colocar en una sentencia if. Dentro de aquí, comprobaremos si no hay mucho, que se ejecutará si esto es igual a false, entonces ejecutaremos nuestra función coincidente y cold know mucho más ejecutará nuestra segunda función. Y de hecho lo llamaremos a esto es mucho solo cambios. Uno es mucho. Por lo que sólo una de estas funciones se ejecutará a la vez. Y nosotros, volveremos a la mayoría de este contenido en los próximos videos. Pero por ahora, lo que ambas necesitan es reiniciar para hacer click count. Ya que ambos solo se ejecutan si estamos en el segundo clic. Entonces eso significa que tenemos dos cuadrados seleccionados. Por lo que necesitamos restablecer el contador de clics, estar de nuevo a 0. Entonces primero hagamos esto. El recuento de clics es igual a 0 y lo mismo es una coincidencia. Ahora lo haremos, todo lo que haremos dentro de ambas funciones es colocar en un log de consola para comprobar que esto está funcionando. El primero de ningún partido. El segundo es un partido. De acuerdo, probemos esto. Refresca la página en la consola. En primer lugar, haremos clic en dos casillas cualquiera. Podemos ver claramente por el color de estos y no un fósforo. Y la función correcta ha corrido. Por lo que trataremos de crear un partido. Este todavía no es mucho. Pero si da clic en nuestros dos greens, este va a ser un partido. 10. Manejo de un partido: Por el momento, podemos dar clic en cualquier número de cuadrados y luego se revelan los colores. Tenemos que limitar esto a sólo trabajar con dos cuadrados a la vez. Entonces no vemos lo que estamos teniendo actualmente. Anteriormente, creamos dos funciones, que es manejar el partido y las condiciones de partido de la nota. Todo lo que hacemos es aumentar el contador de clics en cada uno y hacer un registro de consola para fines de prueba. Todo lo que hacemos ahora es extender estas funciones para hacer frente a estos resultados, comenzando con la función de coincidencia de notas. Así que si no hay muchas ganas de hacer, por ejemplo, solo aquí es que queremos seleccionar dos de nuestros cuadrados y luego si no son mucho, necesitamos luego voltearlos de nuevo para ocultar efectivamente el colores de fondo. Entonces para hacer esto, justo encima de nuestro click cuenta, lo que haremos es acceder a nuestras dos plazas. Deja caer la propiedad style, donde estableceremos el fondo para que sea igual a una cadena vacía. Haremos lo mismo para el número cuadrado para guardar esto, y probemos esto. No sabíamos mucho. Así que da clic en cualquiera de estos. Y podemos ver en cuanto no tengas partido, este es para que esté bien. No tenemos un partido como este. El segundo desaparece tan rápido que no podemos ver de qué color era. Ahora bien, esto no es bueno para nuestro juego porque la idea es que queremos que los usuarios puedan dar clic en estos colores. No recuerdo cuál era cuál. Entonces, para ralentizar las cosas, lo que podemos hacer justo antes la llamada no son función de coincidencia. Podemos envolver esta llamada a la función con un tiempo de espera. Vamos a cortar esto. Colocar en un setTimeout de JavaScript, que ejecutará una función. Esta función separada por coma se ejecutará después de una cierta cantidad de tiempo. Entonces esto es en milisegundos. Entonces 500 milisegundos es la mitad de un segundo. Y luego dentro del cuerpo de la función, pegar de nuevo en nuestra llamada de función. Recarga el navegador y probemos esto. Vayamos por el pagador que no coincide. Podemos ver que ambos de los colores se revelan, y luego esperan 2.5º antes de retirar. Esto le da al jugador la oportunidad de recordar qué color fue seleccionado para que pueda usarlo en el futuro. Entonces podemos comenzar a comparar nuestro próximo par de cuadrados. Lo que entonces vamos a hacer justo encima del contador de clics es restablecer también el cuadrado uno. Restablecer la variable para que sea una cadena o más bien una cadena vacía. Y haremos lo mismo para el cuadrado dos. Nos dieron un lienzo en blanco con el que trabajar para nuestro próximo intento. Entonces esto es todo lo que necesitamos para nuestra función de no match. Así que abajo a la es mucho la función que se va a ejecutar si dos colores son los mismos. Entonces qué lo vamos a hacer si hay un partido que ya pusimos en el color de fondo. Entonces vamos a quitar este borde que ya tenemos, y también eliminar el oyente de eventos para que no interfiera con el resto del juego. Justo por encima del conteo de clics. Agarra el cuadrado. Elestilo de la propiedad. Bueno, vamos a poner la frontera para que sea igual a non. Copia y pega esto. Hacerla misma plaza para. A continuación, eliminaremos el oyente de eventos para que ya no podamos hacer clic derecho en estas casillas, lo que interferirá con el resto del juego. Cuadrado uno. En esta ocasión llamaremos a remove event listener. Y esto necesita tomar en los mismos parámetros que uno de la primera configuración, este oyente de eventos. Así que si subimos a la sección de escucha de eventos, que está justo aquí, tenemos que pasarlo en los mismos parámetros exactos. Así que esto incluye el tipo de oyente de eventos que actualmente es clic, y también la función que se va a llamar. Voy a pegar esto en. Copia y pega el cuadrado dos. Ahora tratemos de resolverlo encontrando un naranja mucho azul oscuro. Tenemos dos naranjas. Entonces vamos a dar clic en este, este formulario, tenemos un partido. Estos permanecen en el juego y podemos ver si miramos de cerca, no tenemos esta frontera rodeando a cada uno. Demos click en uno de estos cuadrados revelados. Ahora para dar clic a un segundo. Dado que el oyente de eventos se ha eliminado del primero, todavía tenemos que hacer clic en otro cuadrado para hacer un par. Entonces las cosas están empezando a funcionar como deberían ahora, pero hay algunos pequeños temas que tenemos que resolver. Uno de ellos se trata de hacer clic en la misma plaza dos veces. Si tuviéramos que hacer esto y dar clic en la misma plaza dos veces, tal como lo hemos hecho aquí. Podemos ver que el tablero se ha eliminado y esto se considera un partido ya que obviamente ambos tienen el mismo atributo de color de datos. Para arreglar esto, subamos a nuestra plaza. Así que esto se ejecuta cada vez que hago clic en cualquiera de nuestros cuadrados en la cuadrícula, podemos saltar a nuestra función y agregar una sentencia if. Y esta declaración if primero va a comprobar si el cuadrado es igual a esto. Entonces lo que esto significa es que si ya hemos hecho clic en un cuadrado, este será igual al cuadrado uno. Y luego cuando pinchamos en un segundo cuadrado, de nuevo, si hago clic en el mismo, este será igual al cuadrado alfa. Si este es el caso. Luego volveremos fuera de esta función antes de ejecutar cualquier código adicional. Otro tema es que también podemos dar clic rápidamente en Más de dos plazas. Por lo que saltando clic 123. Y antes de que se complete el retraso 2.5o, da clic en Más de dos casillas. Entonces para esto, vamos a hacer algo muy similar volverá fuera de esta función si algo es cierto. Pero esta vez lo haremos justo debajo de nuestro conteo de clics. Hacemos esto porque si actualmente tenemos dos casillas clicadas, la tarjeta clicada será igual a dos. Por lo tanto, podemos colocar en un if declaraciones, que va a comprobar si el recuento de clics es mayor que el valor de dos, entonces volveremos de nuevo, alteramos la disfunción. Vamos a probar esto. Refrescar cuando Haga clic en el mismo cuadrado varias veces y no tenga ningún efecto. Podemos dar clic rápidamente en Más de dos plazas. ignoran más de dos clics. 11. Seguimiento de la partitura y el final del juego: El objetivo ahora para este video será hacer un seguimiento de la partitura y hacer uso de estos p elementos, que creamos en un video anterior. Vamos a actualizar esto cada vez que tengamos un partido, también lo ocultaremos cuando no tengamos ningún marcador actual. Además, una vez que el juego ha terminado y todas las casillas se emparejan con un mango esto y dejar que el usuario reinicie el juego para empezar de nuevo. Entonces, para empezar de nuevo en nuestro guión, lo que vamos a hacer es crear una nueva variable para hacer seguimiento de la partitura. Utilizarálecciones. Podemos actualizar esto e inicialmente establecemos el marcador para que sea igual a 0. Como se mencionó, no queremos que esto se muestre como 0 antes de que comience el juego. Para que podamos ocultar esto accediendo al documento. Selector de consultas. Recuerde, que es p elementos que muestra la partitura, tiene esta idea de partitura. Para que podamos agarrar esto como una cuerda. Establezca que la visibilidad del punto de estilo sea igual a oculta. Entonces la razón por la que vamos a cambiar la visibilidad en lugar del tipo de pantalla es porque queremos también mantener este espacio dentro de nuestro código. Si configuramos la pantalla para que sea none, esto luego eliminará este elemento del navegador y empujará hacia arriba todos los juegos que el muy superior. Y además, cuando sí restablecemos esto para mostrar el marcador, esto luego empujaría todo el juego hacia abajo y lo haría parecer muy agitado. Ok, entonces ahora necesitamos actualizar la variable score y también reinstalar esto. Tenemos nuestro primer partido. Así que baja a la función de partido, que está justo aquí. Stefan es llamar score plus plus aumenta por el valor de uno. Usaremos el selector de consultas de puntos de documento para agarrar nuestros elementos de Scott y establecemos el texto interno para que sea igual a nuestra puntuación. Eso también es copiar y pegar esta línea. Agarra todos los elementos p una vez más. Esta vez establecemos la visibilidad de puntos de estilo para que sea igual a visible. Esto anulará la propiedad oculta que establecemos en la parte superior. Así que vamos a guardar esto y probar esto. En un principio, cuando recargamos por primera vez el juego, se ha eliminado el marcador porque establecemos que la visibilidad sea igual a oculta. Ahora cuando refresquemos, vamos a tratar de conseguir mucho. Tengo dos rosadas. Voy a anotar ya está actualizado. A continuación vamos a crear una nueva función la cual va a comprobar si el juego ha terminado. Y esto significa que todas las parejas han sido igualadas. Entonces para esta nueva función, que se llama check game terminó, y vamos a ejecutar esta función cada vez que tengamos un par coincidente. Por lo que necesitamos saber exactamente qué causa que nuestro juego haya terminado. Entonces este va a ser nuestro número de cuadrados, que se establece en 16. Y entonces divida esto por dos. Ya que estamos igualando estos deteriores. Guarde esto dentro de una variable o una constante llamada objetivo. Por lo que este resultado es efectivamente ocho. Entonces necesitamos crear una segunda constante, que va a ser un valor booleano llamado GameOver. Podemos hacer uso del operador condicional JavaScript. Por lo que comprobaremos si el marcador es igual o superior al objetivo. Haz la pregunta. Siesto es cierto, GameOver será igual a true. Entonces, básicamente, si el marcador es igual a ocho, volverá verdadero. Si no, ahorraremos el valor de false. Entonces podemos ejecutar una sentencia if para comprobar si game over es igual a true y luego ejecutar algún código dentro. Así que dentro de esta declaración if querrá hacer es reiniciar un juego mostrando este botón de jugar de nuevo. Actualmente aún no lo hemos ocultado. Entonces volveremos a esto en un momento. Ahora lo que haremos es ejecutar nuestra función dentro de la función de coincidencia de cheques. Así que revisa mucho. Esto se ejecuta cada vez que tendremos un par de cuadrados seleccionados. Y sólo queremos comprobar esto si tenemos un partido. Así que justo después de que hayamos comprobado si hay un partido, entonces se ejecutará esta función. Entonces como se mencionó, si esto es cierto, esto va a desencadenar nuestro botón Reproducir otra vez. Por lo que primero tenemos que ocultar esto antes de que termine el juego. Saltemos hasta lo más alto. Agarra esto, instala esto dentro de una constante llamada botón Play Again. Voy a agarrar esto con documentos selector de consultas de puntos, cadena. Si pasamos a nuestra página de índice, podemos ver que esto no tiene clases ni IDs. Así que podemos agarrar esto simplemente por el nombre de la etiqueta del botón. Accederá a esta variable, establecerá que el estilo de visibilidad de punto sea igual a a1. Esto significa que en cuanto refrescamos la página, no vemos el botón. Por lo que una vez terminado el juego, sí necesitamos hacer lo contrario de esto estableciendo la visibilidad para que sea igual a visible. Pero justo antes de hacer esto, también accederemos a nuestro botón Reproducir de nuevo. Agregaremos un oyente de eventos, que va a enumerar ahora para un clic y ejecutar una función llamada play nuevamente. De acuerdo, entonces ahora para redondear las cosas, lo que vamos a hacer es configurar nuestro botón para que sea igual a visible una vez que termine el juego. Y también va a crear esta función de juego de nuevo. Empecemos por la visibilidad. Vuelve a bajar a nuestra función check game ended. Así que si el juego ha terminado, si esto es igual a true, accederá a todo el botón de jugar de nuevo y hará lo contrario estableciendo la visibilidad del punto de estilo para que sea igual a visible. Entonces finalmente, vamos a mover este código comentado y crear nuestra función que se ejecuta cada vez que hago clic en el botón. Agregamos al oyente de eventos para esto y llamamos de nuevo a esta obra de teatro. El código para esto va a ser bastante sencillo. Todo lo que vamos a hacer es recargar la página seleccionando ubicación del punto de la ventana y luego llamando al método reload. Guarda esto y actualiza la página. Entonces lo que tenemos que hacer ahora es completar el juego haciendo coincidir todas estas casillas. El gris, verde, azul claro . Ahí vamos. Por lo que en cuanto termine el juego con el botón NCD play again, haga clic en esto. Esto llama al método de recarga y luego reinicia el juego. 12. Animaciones: Para rematar el proyecto, ahora podemos agregar algunos efectos de animación. Habrá una animación de sacudida si el partido es incorrecto. Y para una coincidencia correcta, agregaremos un efecto pop. Entonces para esto, pasemos a nuestra hoja de estilo y podemos agregar nuestras animaciones dentro de ahí. Así que abajo en la parte inferior, lo que vamos a hacer es configurar primero dos clases diferentes, que podemos insertar con JavaScript. El primero es si el partido es incorrecto, quieren hacer que ambas plazas hagan un pequeño temblor. Entonces para esto, agregaremos un efecto de animación. llamaremos un batido. Y vamos a configurar esto en tan sólo un segundo. Haré que esto suceda a lo largo de 0.1 segundos. Entonces será sacudida realmente rápida, y luego las plazas volverán a la normalidad. Si el partido es correcto. Haremos un efecto pop. Al igual que arriba. Crearemos nuestra animación que se llamará POP, hará que esto sea un poco más largo. Esto será más de 2.5th. Entonces, tanto para la forma como también para este pop, necesitamos configurar los fotogramas clave. Por lo que hacemos esto con agregar fotogramas clave. Me pasa el nombre de batido. Entonces dentro de estos marcos clave, lo que hacemos es querer configurar las diversas etapas de la animación. Para que podamos configurar esto desde el principio hasta el final, o también podemos agregar diferentes etapas a medida que avanzamos. Entonces por ejemplo, al 0%, la animación puede ser cierto estado, después veinticinco por ciento, cincuenta 75% por ciento, y finalmente, 100 por ciento. Entonces, si no has usado estos fotogramas clave antes, todo lo que necesitamos hacer dentro de estas llaves es agregar cualquiera de nuestras propiedades CSS. Y podemos cambiar estos son estados diferentes. Entonces por ejemplo, tal vez podríamos decir algo de color para ser un color dentro de aquí. Sólo di color rojo. Y entonces al veinticinco por ciento, podríamos cambiar esto por ser de color azul. Y esto funciona para cualquiera de nuestras propiedades CSS. Pero para nuestro caso hacer el efecto de sacudida o quiere hacer es usar el rotar, que va a rotar los elementos en cierta cantidad de grados. Entonces, para hacer esto, configura una transformada llamada Rotar. Y como este es el comienzo mismo, vamos a establecer esto en 0 grados. Copiemos esta sección. Pega esto en él al veinticinco por ciento. Para este negativo tres grados, a mitad de camino el 50 por ciento restablecerá esto de nuevo a la media. Esto girará negativo, y luego de nuevo en el centro. tres cuartas partes del camino, agregaremos esto como un valor positivo de los grados libres. Y luego al final, reinstalaremos la plaza. Entonces todo esto va a suceder realmente rápido ya que hemos establecido que esto suceda durante la duración de 0.1 segundos. Por lo que giraremos rápidamente a la izquierda y a la derecha y luego colocaremos un cuadrado de nuevo en el centro a 0 grados. El siguiente, el efecto pop. Haremosalgo similar. Necesitamos configurar los fotogramas clave con la regla de fotogramas clave. Este se llamaba pop. Entonces 0%. Para éste, no necesita tantas etapas. Todo lo que vamos a hacer es escalar los elementos para hacerlo un poco más grande, y luego escalarlo de nuevo al tamaño normal. Entonces necesitamos tres etapas, el principio, el medio, y también el final. Entonces si esto también hará uso de transform, este va a usar escala. Entonces cuando usamos escala, el valor de uno es tamaño irregular del elemento. Entonces esta es efectivamente la posición de partida. Copiemos esto. Y queremos hacer de esto un efecto bastante sutil. Podemos hacer esto dos veces el tamaño de tres veces el tamaño o cualquier cosa que quieras. Pero todo lo que voy a hacer es hacer un pop un poco sutil, lo que hará que el elemento sea un poco más grande y luego se restablezca de nuevo a su tamaño normal. El valor por el que quiero ir es de 1.06. Entonces al final de la transformada, esta de vuelta al tamaño regular. Todo esto sucederá durante la duración de 2.5th. Entonces volvamos a nuestro guión. En primer lugar, tratar si hay un partido, vamos a añadir la clase pop hacia abajo a la función. Sólo para, Sí, Y luego todo lo que tenemos que hacer dentro de aquí es agregar la clase de pop. Entonces vamos a añadir esto. Justo después de establecer la visibilidad de acceso cuadrado una variable. La lista de clases. Usamos la función add para agregar nuestra clase de pop, copiar y pegar esto, y luego cambiarlo para que sea raíz cuadrada dos. Así que voy a clase pop añadido y también tenemos que añadir la clase de forma. Entonces para ello, iremos a nuestra función donde comprobamos el partido. Recuerda que dentro de aquí tenemos nuestras dos secciones. El primero es donde comprobamos si no hay partido. Si no hay mucho. Justo antes del tiempo de espera, podemos acceder a nuestra plaza uno. Lista de clases de puntos. Dot add agregará el efecto de batido. Duplicar este cuadrado dos. Por lo que aquí le agregamos el efecto de batido. Después esperamos 2.5th, llamamos a la función no match. Y luego dentro de la función de partido, podemos entonces eliminar estos efectos de batido. Así que baja a la función de no match. De acuerdo, esto dentro de la figura. Entonces quitamos la clase de forma porque los cuadrados pueden estar equivocados varias veces. Por lo que agregar y quitar la clase activará el efecto de sacudida en cada intento. Así que vamos a hacer esta rara lista de clases de un punto cuadrado. Pero esta vez llamaremos a la función remove. Jacque también hará lo mismo para la casilla dos. Esto ahora debería agregarse y eliminarse. Entonces, si esta clase solo fue agregada y nunca eliminada, solo se llamará una vez. Entonces, por ejemplo, si tuviéramos un incorrecto mucho igual a este, próxima vez que intentáramos hacer la coincidencia incorrecta, no obtendríamos el efecto de sacudida. De acuerdo, así que asegúrate de que todos los archivos estén guardados. Refresquemos la página y empezaremos. Esta es una coincidencia incorrecta. Entonces podemos ver que tenemos este efecto de sacudida, que es realmente rápido y está sobre la duración de 0.1 segundos. Probemos el efecto pop creando un match. Verdes. Ahora cuando tenemos un partido, obtenemos este efecto pop que hace que los elementos sean un poco más grandes y luego vuelve a la talla normal. 13. ¡Sígueme en Skillshare!: Una enorme felicitación de mi parte por llegar al final de esta clase. Espero que realmente lo hayan disfrutado y adquieran algún conocimiento de ello. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Entonces gracias una vez más, buena suerte, y ojalá te vuelva a ver en una futura clase.