Transcripciones
1. Te damos la bienvenida a la clase.: Hola, bienvenidos a esta clase. Si eres principiante en desarrollo web y quieres simplemente saltar y construir algunos proyectos divertidos, has llegado al lugar correcto. La idea detrás de estas series es mostrarte lo que puedes hacer con HTML, CSS, y JavaScript regulares. No vamos a estar usando ningún marco, ningún bolerplate, ninguna biblioteca o ninguna plantilla. En cambio, vamos a estar construyendo todo completamente desde cero, paso a paso para mostrarte cómo funcionan todas estas tecnologías gratuitas. Este proyecto en particular va a ser un juego de partido numérica. Las reglas son bastante sencillas. Si hacemos clic en el botón de reproducción, entonces se
nos presenta una serie de imágenes, y entonces el usuario necesita decidir si el número de elementos en la imagen es el mismo que la pregunta sobre la izquierda. Si pensamos que esto es cierto damos click en la garrapata, Si creemos que esto es incorrecto, hacemos click en la cruz y luego nuestra puntuación se ajusta dependiendo de la respuesta correcta. Tenemos un cierto número de imágenes las cuales son todas únicas. También, podemos cambiar la duración del tiempo entre cada una de estas imágenes también. Al finalizar el juego también tendremos la oportunidad de comenzar un nuevo juego y también ver nuestro puntaje total también. Al igual que con todo el resto de los proyectos, creamos la interfaz de usuario usando HTML, y luego usamos nuestro CSS para el estilo y también el layout también. Trabajaremos con matrices de objetos, trabajando con retardos de tiempo, funciones, trabajando con el DOM. Establecer aleatoriamente la fuente del elemento de imagen, generar y mostrar en números aleatorios, comparar números, trabajar con tiempos de espera, actualizar la puntuación del usuario y también algunos pequeños toques agradables como algunos desvanecidos, animaciones también. Este es un gran proyecto, si eres principiante y recién llegado a HTML, CSS, y JavaScript, y espero que te interese este curso. Te veré en la primera lección.
2. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante
no acostumbrarse a seguirlo solo por el bien de
quitarse 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 de
proyecto después. Esto realmente te dará
una buena oportunidad de practicar lo que has aprendido de
la clase. También 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 Proyecto
y Recursos, donde no solo puedes
subir tu proyecto, sino que también puedes ver
otros proyectos de clase también. Con esta mente,
espero ver lo que
creas y subes
aquí en Skillshare.
3. Crear la interfaz de usuario: Para este próximo proyecto, que es el juego de match numérica, vamos a confiar en el uso de bastantes imágenes. Puedes usar tus propias imágenes para este curso, pero también he proporcionado una carpeta Imágenes si quieres usar las mismas que yo. Si te diriges a github y te diriges al repositorio para este curso, que es fun-javascript projects.com. Posteriormente te llevarán a una página donde podrás descargar el código completo, que incluirá todos los proyectos y también estas soluciones de pasos y también cualquier activo. Desde aquí podemos descargar los archivos zip, obtener el paquete completo. Entonces una vez descargado, si entramos al juego de match
numérica, verás una carpeta de imágenes. También estarán las soluciones frías para cada video también. Este va a ser el juego que vamos a crear. Es una interfaz de usuario bastante sencilla, solo
tenemos dos secciones. Tenemos una sección de bienvenida, donde vamos a dar click en el botón de reproducción y para empezar. Toda la idea de este proyecto es que vamos a recorrer una serie de imágenes, entonces
tendremos una cierta cantidad de artículos en cada una de estas imágenes, como dos tarjetas o velas de octavo cumpleaños. Entonces el usuario necesita decidir si el número de la izquierda es
el mismo múltiplo de elementos que en la imagen. Por ejemplo, tenemos dos pimientos, por lo que esto sería correcto. Hacemos click en la garrapata. Se trata de siete pinceles de pintura, así que eso va a estar mal, voy a dar click en
la X. La escala de tiempo para cada una de estas imágenes también se va a establecer dentro del proyecto. Esto es completamente ajustable. Si quieres que el juego sea más difícil, podemos reducir el tiempo abajo, y también podemos aumentarlo para que el juego sea más sencillo. El juego es efectivamente abrumar, recorremos todas las imágenes. En nuestro caso, proporcionamos 20 imágenes en la carpeta Imágenes. Una vez que lleguemos a través de 20 de estos, entonces
obtendrá una pantalla al final que le diga al usuario cuántos tienen correctos. Encima al escritorio y vamos a crear una nueva carpeta del proyecto. El nombre de éste va a ser una coincidencia numérica. Arrastra esto hacia tu editor de texto. Podemos comenzar con un nuevo archivo, que va a ser el index.HTML. De nuevo, necesitamos nuestra estructura HTML y voy a utilizar el comando emmet incorporado, que es HTML5, para luego agregar un título de documento, que es coincidencia numérica. Hagamos clic derecho y copiemos la ruta, y peguemos esto en una nueva pestaña del navegador. Pongamos a trabajar dentro de nuestra sección corporal. Esto va a contener una sección principal, que va a ser el envoltorio principal para todo el contenido. También vamos a hacer uso de esto dentro de JavaScript para que podamos darle a este un ID único. Yo quiero ir por área de juegos. Esta sección principal va a consistir en dos áreas principales. Vamos a tener la sección de inicio, que está a la izquierda, y a la derecha, vamos a tener el área de imagen. Esto entra en dos divs separados. El primero es para el lado izquierdo. Empieza toda la clase. El segundo div va a ser para el área de imagen a la clase de área de imagen. Estos son nuestros dos envoltorios principales para nuestra zona de juegos, y vamos a empezar por el lado izquierdo, que son estas estadísticas. Echando un vistazo a la versión final aquí, vamos a tener una puntuación que se va a actualizar dinámicamente a medida que el usuario los haga bien o mal. Entonces vamos a tener un número que se va a generar aleatoriamente, el nombre de la imagen, y luego nuestros dos botones. También justo como nota al margen también, cuando lleguemos a esto más adelante. El número que se genera justo aquí. Esta va a ser o la cantidad exacta de artículos en la imagen, o va a ser uno más alto, uno más bajo. Esto es para hacer el juego un poco más desafiante. Por ejemplo, no queremos ver 10 elementos en la pantalla. Entonces un número de uno en comparación con, ya que esto haría el juego bastante simple. En el área de inicios, abramos este div. Voy a empezar por arriba con un rumbo de nivel 3. Este post el texto de partitura. El puntaje del usuario será algo así como 2 sobre 20. Pero estas dos áreas van a ser dinámicas. El primero podemos crear un elemento span. Démosle una identificación, que va a ser nuestro puntaje actual. Justo después de la barra inclinada hacia adelante, esto puede ser una Sección 2 dinámica. Un segundo lapso elementos. Esto va a tener el DNI, que va a ser igual al total disponible. Esta va a ser la cantidad total de puntos que está disponible, que es el mismo número de imágenes que vamos a tener. También podemos agregar algunos valores de marcador de posición solo para que esto sea más visible. Vayamos por dos y 20. Así es como se ve dentro del navegador. El siguiente paso a hacer es pasar a nuestra siguiente sección. Si hacemos clic en “PLAY" este va a ser el número de elementos en la imagen seguido de los dos botones. Hagámoslo bajo el rubro de nivel 3. El texto va a tener la clase de artículos. Esto es para que podamos agregar algo de estilo dentro del CSS. Nuevamente, esto van a ser dos secciones dinámicas. Vamos a tener el número generado aleatoriamente, que es o bien el número de ítems uno más alto o uno más bajo. Hagámoslo dentro de un lapso con el ID de número. Podemos agregar un valor de tenedor de lugar dentro de aquí. Después un segundo lapso con el ID, que es igual al nombre del elemento. Un valor de marcador de posición dentro de aquí, así que estas serán las imágenes así que vamos por seis patos y un espacio en medio. A continuación, justo después del elemento p, podemos agregar una nueva sección div, que va a ser la envoltura de nuestros dos botones. A la clase que se va a utilizar en el CSS, esto va a ser igual a muchos botones. Entonces nuestro primer botón, el primer símbolo que vamos a usar o el primer carácter va a ser el tic, que va a ser utilizado como una pequeña entidad de cobertura con el código de los ampersands, el hash 10003 seguido del punto y coma. El segundo botón, que va a ser a través, y este va a ser un código de entidad HTML, que es el ampersand, el áspero 10007, y el punto y coma. El siguiente paso es agregar el área de imagen, que va a ser el lado derecho. Actualmente cuando apenas estamos iniciando el HTML esto puede parecer un poco desordenado porque necesitamos crear dos secciones. Necesitamos crear esta pantalla de bienvenida, y también necesitamos crear la sección de imágenes una vez que el juego esté en juego. Utilizamos JavaScript para mostrar y ocultar estas dos secciones. Empecemos si bajamos a nuestro segundo div justo después de que las estadísticas, que es área de imagen, llegarán a trabajar con nuestra pantalla de bienvenida al principio. En la parte superior, vamos a sumar un encabezado de nivel 3, que va a tener el ID de mensaje. Este va a ser un encabezado de nivel 3 vacío, y usaremos JavaScript más adelante para agregar un mensaje, cual va a decirle a la llamada de escritorio del usuario. Esta sección también sólo estará disponible al final del juego. A continuación una sección div, y este va a ser el envoltorio para nuestra pantalla de inicio. Dentro de aquí, esto sólo va a ser todo el contenido que veamos al principio. Entonces esconderemos esto y luego comenzaremos el juego. Para mantener esto único, podemos agregar un ID que es igual a la pantalla de inicio, y el contenido a comenzar será un encabezado de nivel 1. Este es el texto que veremos justo en la parte superior. También note cómo también se enfatiza la coincidencia del número de palabra. Ese es nuestro descenso. Entonces podemos envolver la coincidencia numérica en los elementos m. También se enfatiza el siguiente apartado. Podemos decir que las reglas son simples. De nuevo dentro de los m elementos. Entonces todo el resto del texto va a estar en los elementos p. Las siguientes dos líneas van a ser prefijadas con una entidad HTML para esta pequeña flecha. Esto va a tener el código de entidad que es igual al ampersand, los duros 96, 54, y luego el punto y coma, seguido del texto, todos de pulgares golpeados hacia arriba. Si el número de elementos coincide con el número mostrado. Después de esto, un segundo elementos p, vamos a volver a utilizar el mismo código de entidad HTML que el anterior. Ahora podemos descender, en el texto es pulgares hacia abajo si no hay coincidencia. El tercero, que es la última línea de texto es que tienes un cierto número de segundos para decidir. Este número también va a ser dinámico, por lo que podemos cambiar esto en el JavaScript. Tenemos que envolver este número en un lapso que va a tener el ID de ajuste de tiempo. En el elemento p que tienes, entonces crea un elemento span con este ID. Puedes agregar el número dentro aquí si quieres, seguido de segundos para decidir. Veamos cómo se ve dentro del navegador. Todo esto se ve bien, solo nos ayuda con el CSS más adelante. También vamos a añadir una clase cada una de estas líneas de texto. Esta va a ser una clase de espaciado donde
vamos a agregar algo de espaciado en la parte superior e inferior. Pasemos a nuestras líneas de texto, y empezaremos con la primera línea debajo del título. Voy a darnos una clase, que es space dash y, ya que esto se encarga de agregar algo de espacio y en el eje y. Copia esto y pega esto en los elementos p justo debajo. Esto nos dará algún espacio consistente en cuando agreguemos nuestro estilo. Después de esto, también tenemos un botón de reproducción abajo en la parte inferior. Almacenado en esta sección div, un botón con el ID de botón de reproducción, texto para reproducir. Este es ahora todo el contenido que necesitamos para toda esta pantalla de bienvenida. Lo siguiente que tenemos que hacer es agregar una imagen de marcador de posición, que va a ser para efectivamente la siguiente pantalla. Se echará un vistazo a la versión terminada justo aquí. Todo lo que tenemos que hacer aquí es rotar o recorrer en bicicleta alguna de estas imágenes. Todo lo que necesitamos, y esto es solo un marcador de posición, ve debajo del botón y luego fuera de nuestra sección de la pantalla de inicio. Un nuevo div, que va a ser el envoltorio para esta imagen con el ID de contenedor de imagen. Vamos a crear una imagen dinámicamente usando JavaScript. Pero por ahora podemos agregar una imagen de marcador de posición solo para
poder ver cómo se ve todo cuando venimos a agregar nuestro CSS. En primer lugar, podemos ir a la carpeta de imágenes, luego reenviar barra y el nombre de cualquiera de nuestras imágenes. Yo quiero ir por los macarrones. Podemos dejar el texto alt por ahora ya que esto se va a quitar muy pronto. A continuación, necesitamos realmente agregar estas imágenes a nuestra carpeta del proyecto. Podemos utilizar las mismas imágenes que he usado en este curso, o puedes descargar las tuyas propias. Voy a pegar estos en nuestros proyectos de coincidencia numérica. Esto debería dejarnos ahora con una imagen. Sí se ve un poco desordenado ya que estas dos secciones serán intercambiadas. También necesitamos agregar algo de estilo CSS, que vamos a hacer en el siguiente video.
4. Estilizar con CSS: Ahora estamos de vuelta con nuestro proyecto y en este momento vamos a aplicar algún estilo CSS para mejorar el aspecto y la sensación de este proyecto. Para ello como si vamos a crear una hoja de estilo dentro de nuestro directorio de proyectos. Nuevo archivo, y este es el styles.css. Podemos enlazar esto dentro de la sección de cabecera o página de índice con nuestro enlace. Esto está en el mismo nivel que nuestra página de índice. Este es simplemente el nombre de styles.css. Podemos ir a nuestras hojas de estilo y comenzar por crear la raíz de un tamaño dentro de nuestro selector HTML. Empecemos con el tamaño de fuente raíz, y voy a ir por un 10 píxeles, y también un color que se aplicará a todos los textos nuestro proyecto y vamos a anular uso selector de mayo. El Color a buscar va a ser 212560. Voy a ir puedo comprobar esto es trabajar en recargar el navegador, y esto ahora todo se ha hecho efectivo. Ahora vamos a pasar al área de juegos, que fue el envoltorio principal, y este es el envoltorio para ambas secciones de estadísticas vie y también el ImageArea. Esto no era identificación, por lo que usamos los duros. Ahora vamos a hacer aquí es establecer un poco de estilo de fuente y también el tamaño. Por lo que 1.6rems, algo de relleno. Vamos por el relleno en la parte superior de 3rems. Esto sólo nos dará algo de espaciado en la parte superior de la página justo aquí. La mayoría de nuestro estilo se va a romper en dos secciones. Ten la sección Stat, que es toda la información arriba en la parte superior aquí. Tenemos la puntuación, el número de ítems en la imagen, y también el tick y los botones cruzados, y luego abajo, que va a ser toda esta sección aquí. Este va a ser el área de imagen. En primer lugar, vamos a apuntar a ambas secciones y podemos establecer la altura mínima para la pantalla pequeña. Esta es la clase de área de imagen, y también la misma para las estadísticas. El estatura mínima, voy a ir por 30 vh, que es el 30 por ciento de los navegadores viewport visible. Esto va a hacer que nuestras secciones sean un poco más altas. Realmente no importa demasiado por el momento porque tendrás bastante contenido en la pantalla, pero más adelante en JavaScript, cuando cambiemos entre esta sección y la imagen, hay menos contenido en el pantalla. Para el área de imagen, voy a aplicar un gradiente como color de fondo, al
igual que la versión final. Este va a ser el óvalo de sección a la derecha o en la pantalla pequeña. Esta será la sección en la parte inferior. Bajando por el ImageArea, podemos hacerlo estableciendo un fondo como gradiente lineal. El primer color voy a seleccionar 859ede. Por el segundo valor, voy a ir por 6965de. Comprobemos esto es trabajar en. Esto está bien y esto nos da este gradiente lineal recto desde el tono más claro a más oscuro. Pero sólo voy a establecer un primer valor opcional de 70 grados seguido de una coma. Esto va a compensar nuestros gradientes estar a través de la página en 70 grados. A continuación, el radio fronterizo, que se va a aplicar tanto a la parte inferior izquierda como también a la inferior derecha en la vista móvil. Para ello podemos aplicar los cuatro valores y estos van en el sentido de las agujas del reloj desde la parte superior izquierda. Arriba izquierda de cero, la parte superior derecha de cero también y luego, tanto la parte inferior derecha como también la inferior izquierda valores de 3rem. Estos ya han entrado en vigor en el fondo de nuestra sección. Tan sólo para ver esto con mayor claridad, podemos quitar temporalmente nuestra imagen. Vamos a comentar esto. Es así como se verá el juego antes de que el usuario haga clic en el botón Jugar. De vuelta a nuestras hojas de estilo y aún dentro del ImageArea, vamos a hacer uso del tipo display de flex, que nos va a permitir posicionar todo este texto en el centro. En primer lugar, vamos a establecer la dirección del flex para que sea columna. Todo nuestro contenido se apila verticalmente, y luego podemos usar el contenido justificar, los espacios en el centro. Dado que este es nuestro eje principal de arriba a abajo, justifique el contenido enviará a esto verticalmente, vemos que tenemos algún espacio desigual en la parte superior e inferior. Esto se debe a algunos valores predeterminados del navegador en el encabezado de nivel 1. Echaremos un vistazo a arreglar esto muy pronto. Tan solo para rematar esta área de imagen, agreguemos algo de relleno por todas partes con el valor de 3rems. Este espacio desigual en la parte superior e inferior se debe a este rubro justo aquí dentro de nuestra página de índice. Si vamos a esta sección justo aquí, esto está dentro del rubro nivel 1. Vamos a entrar en las herramientas de desarrollador y podemos ver esto con más detalle. Da click en la flecha justo aquí, y luego si pasamos por encima de nuestro encabezado nivel uno, podemos ver por la sección naranja tenemos algún margen por defecto el cual se aplica tanto a la parte superior como a la inferior de nuestro rubro. Ahora el margen en la parte inferior de este rubro está bien porque este abastece algo de espaciado a nuestras texturas a continuación. No obstante, para mantener las cosas más centrales en nuestro contenedor, vamos a quitar el margen por defecto de la misma parte superior. Pasemos a nuestras hojas de estilo y ahora podemos eliminar los valores predeterminados del navegador. En primer lugar, nuestro rubro nivel 1. Podemos hacer esto restableciendo el margen en el top 0, y también vamos a darle a esto un nuevo tamaño de fuente de 2.4rems. Todavía podemos ver que hay más espaciado en la parte superior que en la inferior. Bueno, si volvemos a nuestra página de índice, esto se debe a que aún dentro de esta área de imagen, tenemos un encabezado de nivel 3 con el ID de mensaje. Esto se va a utilizar más adelante para aplicar un mensaje al usuario una vez terminado el juego. Pero por ahora esto sigue ocupando algún espacio dentro de la cúpula. Podemos hacer exactamente lo mismo. Podemos eliminar el margen predeterminado del navegador en la parte superior, restablecer esto, y solo para más adelante, también
podemos establecer el tamaño de fuente para que sea un valor de 2rems. Esto ahora deja nuestro espacio en más consistente. Esta sección es bastante completa, ahora
podemos pasar a estos transversales. Ya hemos apuntado al rumbo de nivel 3. Vamos a subir. El marcador también está dentro del rubro de nivel 3 que acabas de cuidar. Ahora pasemos a nuestros elementos P con la clase de artículos. Esto va a dejar que el usuario sepa el número con el que comparar. Todo lo que vamos a hacer es hacer que esto destaque un poco más, estableciendo font-size para que sea 2rems. la clase de artículos y ahí vamos. Bajando también tenemos aquí estos dos botones, y también el botón en la parte inferior también. En primer lugar, vamos a apuntar a nuestro selector de botones, y podemos añadir algunos estilos base, empezando por el ancho del botón y un valor de 8rems. Podemos eliminar cualquier borde por defecto que hubiera sido aplicado por el navegador. Pero aún así queremos que esto tenga algunas esquinas redondeadas. Podemos hacer esto con un radio de borde, algún espaciado para hacer el botón un poco más acolchado en el interior. Por lo que un valor de relleno de 1 rem. Entonces también necesitamos hacer estos diferentes colores y también quitar el color de fondo. Si echamos un vistazo al momento tenemos este botón de color gris claro uno dos hacen de estos botones simplemente básicamente un contorno como vemos en la versión final. Podemos hacer esto quitando el fondo configurando esto para que sea un color de transparente. Para esta sección de imágenes, esto permitirá que el color de fondo azul brille a través, y también lo mismo para la sección de estadísticas oval de la izquierda. Podemos entonces aplicar este color de borde o este contorno, a cada uno de nuestros botones. Dentro del selector de botones, podemos quitar el fondo configurando esto para que sea transparente. Entonces nuestra frontera. Esto va a ser de dos píxeles de ancho, una línea sólida, y luego el color que voy a usar va a ser a1e0e4. Por último, podemos cambiar el cursor del ratón para que sea un puntero cuando pasemos el cursor sobre cualquiera de estos botones. Todo lo que tenemos que hacer es configurar el cursor para que sea un puntero, y esto cambiará el ratón a medida que pases por encima. Tan solo para terminar estos botones, vamos a asegurarnos de que el botón cruzado tenga el color de fondo rojo. Al igual que vemos aquí, tenemos un color diferente para la garrapata y también para la cruz. Una forma en que podemos hacerlo es apuntando al segundo botón. Dentro de nuestra página de índice, aquí, tenemos dos botones que están agrupados uno al lado del otro, y como estos son uno al lado, podemos seleccionar ya sea el primero o el segundo hijo. Más abajo, también tenemos nuestro botón que está en la sección de imágenes justo aquí. Dado que esto está en una sección diferente en lugar de lado a lado, el enésimo niño no afectará esto. Veremos esto más claro si pasamos a nuestras hojas de estilo, podemos apuntar a nuestro botón y luego un punto. Entonces podemos apuntar al nésimo niño. Añadamos un valor de dos ya que estamos apuntando al segundo botón. Adelante y cambiemos la frontera. Seguimos queriendo que esto sea de dos píxeles y una línea sólida. Pero esta vez, queremos usar un color diferente, y voy a ir por un valor RGB. En primer lugar, rojo, un valor de 241, 152 para el verde, y 152 para el azul. Dado que estos botones ahora están uno al lado del otro en el DOM, esto va a apuntar al segundo botón. Si cambiamos esto a uno, esto apuntará al primero, número 3, y esto no afecta a nuestro tercer botón ya que este botón es completamente independiente y no está lado a lado con estos dos de aquí. Vamos a reinstaurar esto, queremos que este sea el segundo botón. Ahora, vamos a pasar a nuestras estadísticas que fue el envoltorio para esta sección superior. Esta es la zona justo aquí. Vamos a establecer el color de fondo y también aplicar un borde alrededor tanto de la esquina superior izquierda como también de la esquina superior derecha, luego también centrar todo este contenido en el medio de esta sección. Justo antes de añadir algo de estilo CSS a esta sección, queremos recortar todo el contenido dentro de las estadísticas, y agregar un segundo div anidado dentro. Este div va a tener un ID de contenido de estadísticas. Entonces podemos pegar en todos los contenidos justo dentro. Ahora, hay algunas razones por las que hemos hecho esto. En primer lugar, lo que vamos a hacer es configurar esta sección de stat para que sea un contenedor flex. Es decir, podemos empujar todo este contenido de estadísticas al centro. En segundo lugar, usando JavaScript más adelante, también
vamos a ocultar estos contenidos cuando el juego no se esté ejecutando. De vuelta a nuestras hojas de estilo, podemos apuntar a la sección stat y luego centrar todo el contenido debajo del botón. En primer lugar, un color de fondo, y vamos a ir por un valor de humo blanco. El borde, esto va a ser de dos píxeles, un color sólido, y un valor de 859ede. Este borde también debe redondearse en la parte superior izquierda y en la parte superior derecha. Podemos hacer esto con radio fronterizo. En primer lugar, el valor superior izquierdo de tres rems, la parte superior derecha de tres rems también. Entonces queremos cero en la parte inferior. A continuación, podemos establecer el tipo de visualización de flex. Esto ahora nos va a permitir centrar nuestro nuevo div en medio de esta sección. Al usar el flexbox, la dirección de
flex predeterminada va a ser fila que está a través de la página, y podemos centrarnos a través de este eje mediante el uso de justificar contenido y establecer el valor para ser centro. A continuación para cuidar la alineación en el eje transversal o en la sección vertical, podemos hacerlo estableciendo alinear elementos. A continuación, el relleno. Tres rems en la parte superior e inferior, y cero en la izquierda y la derecha. Entonces podemos establecer la línea de texto para que esté en el centro de nuestra sección. casi terminamos para este móvil para el estilo. Lo siguiente que voy a hacer es volver a nuestra página de índice. Si recuerdas, cuando configuramos todo este contenido, también
agregamos una clase de espacio-y. Agregamos esto a cada una de nuestras líneas de texto dentro de la pantalla de estadísticas. Hicimos esto para que podamos sumar algo de espacio en este eje y. Podemos hacerlo estableciendo algún margen en la parte superior e inferior. Espacio-y, el margen sumará dos valores. El primero es de tres rems en la parte superior e inferior, y cero en la izquierda y la derecha. Bien. Esto ahora está buscando como lo queremos. Ahora bien, si volvemos a nuestra página de índice, podemos empezar a trabajar con esta sección de imágenes. Para ello, necesitamos descomentar nuestra imagen de antes, y también podemos comentar nuestra pantalla de estadísticas. Esto simulará cómo se verá nuestro juego una vez que el juego haya comenzado. Vamos a apuntar al elemento de imagen, por lo que IMG. En primer lugar, el ancho del 100 por ciento, y también, vamos a redondear las esquinas con el radio de borde. Nuestro juego ahora luce como lo queremos en la vista móvil, pero ahora, cuando estiramos el navegador a una pantalla más amplia, queremos cambiar alrededor de nuestras dos secciones al igual que vemos aquí en la versión final. Para ello, vamos a agregar una consulta de medios dentro de nuestra hoja de estilos. En medios, todas las pantallas, y también el ancho mínimo de 600 píxeles. Todos estos estilos desde arriba serán predeterminados y aplicados desde el principio,
y luego todas estas reglas de estilo dentro de esta consulta de medios solo se aplicarán una vez que la pantalla alcance los 600 píxeles y superiores. El modo en que vamos a hacer esto es usando este flexbox y cambiando la dirección flex de estas dos secciones para que sean fila. Podemos hacer esto dentro de los elementos de los padres que es el área de juego. En primer lugar, necesitamos establecer el tipo de visualización para que sea flex, y la dirección de flex predeterminada es fila por lo que no necesitamos agregar esto. A continuación, el área de imagen, y también las estadísticas. Para estas dos áreas justo arriba, establecemos la altura mínima para que sea 30 por ciento de la altura de la ventanal. Ya que tenemos más espacio en pantalla disponible, voy a cambiar esto para que sea del 50 por ciento. Dentro de esta zona de imagen que está a la derecha, queremos que esto se superponga a la sección stat que está a la izquierda. Al igual que la versión final aquí, vemos que la sección correcta se superpone apenas un poco. Ahora, la forma en que podemos hacerlo es mediante el uso de una transformación CSS llamada translate. Traducir va a mover nuestra sección a través del eje x o el eje y. Echemos un vistazo a cómo funciona esto en nuestro CSS apuntando primero al área de imagen. En primer lugar, el radio fronterizo de tres rems. Se pueden ver esquinas redondeadas en los cuatro lados, y luego podemos establecer la transformación CSS. Vemos que hay montones de diferentes tipos de transformaciones que podemos usar. Hay cosas como escalar para escalar o reducir el tamaño de nuestros elementos. También podemos rotar nuestros elementos. Pero el que nos interesa es traducir. Dentro de aquí, podemos establecer Alpha, queremos mover nuestros elementos en el eje x y en el eje y. El primero es el eje x que está a través de la página de izquierda a derecha, por lo que 50 píxeles. Entonces el eje y que es de arriba a abajo, 500 píxeles. Esto ahora es empujado nuestros elementos por 50 píxeles y también por 500 píxeles hacia abajo. Sólo nos interesa mover nuestro elemento hacia la izquierda, por lo que sólo nos interesa el eje x. Solo usemos uno de estos valores, y en su lugar, podemos usar un valor negativo. Esto serían tres rems. Esto ahora tira de nuestra sección de imagen hacia la izquierda por tres rems por lo que se superpone ligeramente a la sección stat. Ahora, vamos a apuntar a la sección de estadísticas. En primer lugar, hacemos algo de espaciado, podemos usar la propiedad flex y un valor de uno. Si entonces establecemos el valor dentro del área de imagen en dos, nuestro área de imagen intentará entonces hacerse cargo del doble del espacio disponible que nuestra sección de estadísticas. Para esta zona, también necesitamos ajustar el radio fronterizo, por lo que solo tenemos esto en la parte superior izquierda y la inferior izquierda también. El frontero-radio, tres rems en la parte superior izquierda, cero, cero, y tres rems en la parte inferior izquierda también. Lo último que vamos a hacer dentro de esta consulta mediática es dar cuenta de este traductor. Pasamos por encima de esta sección de imágenes a la izquierda por tres rems. Es decir, ahora tenemos algún espaciado desigual a la izquierda y también a la derecha. Para compensar esto, vamos a sumar tres rems de margen en el lado izquierdo. Esto debería cuidar nuestro espaciado en el exterior del juego, pero también necesitamos cuidar el espaciado dentro de la sección stat. Podemos hacerlo agregando tres rems de relleno en el lado derecho. Esto es ahora por el estilo para este proyecto. A continuación, vamos a introducir algo de JavaScript generando algunas imágenes aleatorias.
5. Generar imágenes aleatorias: Una sola imagen en nuestra pantalla, igual que vemos aquí no va a ser buena para nuestro proyecto. Entonces lo que vamos a hacer en su lugar es seleccionar una imagen aleatoria de una matriz, y la forma en que vamos a hacerlo es con JavaScript, que podamos ir a nuestra carpeta del proyecto, crear un nuevo archivo, y este será el script.js, que luego necesitamos enlazar en nuestro índice. Justo encima de la etiqueta de cuerpo de cierre, crea el script con la fuente, y esto es simplemente script.js. Vamos a probar. Esto se vincula dentro del guión con una simple alerta, y solo diremos, cualquier mensaje dentro de aquí tan alto. Si recargamos el navegador, deberíamos ver el mensaje, si éste se vincula con éxito. Ahora vamos a mover esto. Ahora lo siguiente que tenemos que hacer es crear una matriz que va a incluir el nombre de la imagen y también el número de elementos. Esto también necesita corresponderse con todas las imágenes dentro de esta carpeta. Para ahorrar un poco de tiempo, si vamos a GitHub y usamos el mismo enlace que usamos antes. Dentro del juego de partido numérica, echa un
vistazo al archivo llamado array.js. Entonces dentro de aquí necesitamos copiar el contenido de esta matriz. Agarré todos estos elementos,
asegurándose de agarrar los corchetes en la parte superior e inferior, pegar esto en nuestros guiones, y todos estos nombres corresponden a las mismas imágenes que están dentro de la carpeta. Así que ten en cuenta si has utilizado tus propias imágenes, necesitarás cambiar el nombre de la imagen para que coincida con cada una. También necesitarás cambiar el número de artículos. Por ejemplo, usamos bananas.jpg como seis plátanos, y esto se establece en las siguientes líneas. Dado que se trata de una matriz, podemos seleccionar cada uno de estos objetos dentro de aquí por el número de índice. El número de índice es la posición dentro de la matriz, por lo que el primer elemento es la posición 0. Esta es la posición 1, posición 2, y así es como vamos a seleccionar una imagen para mostrar en nuestro proyecto. Por lo que abajo en la parte inferior y justo después de nuestra matriz, podemos seleccionar cada una de estas imágenes al azar. Necesitamos generar un número aleatorio. Empecemos esto dentro de una constante llámalo número aleatorio, y podemos usar una función matemática JavaScript, llamarlo aleatorio. Por lo que math.random. Esto generará un número aleatorio entre 0 y uno. El cero está incluido pero el número 1 no lo está. Esto pasará a 0.999 por ejemplo. Podemos registrar esto dentro de la consola para comprobar nuestra salida. Cerrar sesión nuestra constante en nuestro proyecto, y podemos recargar, hacer clic derecho e inspeccionar. Cada vez que recargamos, obtenemos un número aleatorio diferente. Dentro de esta matriz tenemos 20 imágenes separadas. La forma en que podemos comprobar cuántos elementos hay dentro de una matriz es seleccionando el nombre de la matriz, que es imágenes y luego dices propiedad que es longitud. Si recargamos esto, ahora
vemos que tenemos los 20 elementos dentro de nuestra matriz, por lo que ahora podemos usar esto para multiplicar nuestro número aleatorio. Probemos esto dentro de la consola y actualicemos. Esto ahora nos dará 20 opciones diferentes. Por lo que nuestro número o bien comenzará con un derecho 0 a 19. También podemos correr esto hacia abajo si recortamos esta sección, podemos usar una función JavaScript diferente llamada math.floor, y esto se va a redondear hacia abajo al número entero más cercano. Probemos esto en la consola. Ahora nos queda un número aleatorio entre 0 y 19, lo que nos da 20 opciones diferentes. El modo en que ahora podemos usar este número aleatorio, si eliminamos el registro de la consola es seleccionando nuestra matriz de imágenes, y podemos seleccionar cualquiera de estas imágenes por el número de índice. Número 2 como mencionamos antes, debe ser 0,1, y 2. Esto seleccionaría los bloques. Pero en lugar de codificar este valor, podemos escribir el número aleatorio. Después de esto, podemos usar la notación de puntos para seleccionar nombre de la imagen o el número de ítems. Queremos el nombre de la imagen y también podemos almacenar esto dentro de una constante llamada nombre de imagen aleatoria. Intentemos registrar esto en la consola. Agarra esto y pega esto en, seleccionando
aleatoriamente uno de nuestros nombres de imágenes. Entonces ahora sabemos que esto está funcionando, ahora
podemos usar esto para establecer nuestra fuente de imagen. En primer lugar vamos a crear un elemento de imagen, almacenar esto dentro de la constante de imagen, y podemos crear un elemento con document.CreateElements. El tipo de elemento que queremos crear es una imagen que es IMG. Entonces podemos agarrar nuestra variable de imagen y establecer los atributos de origen, y esta fuente de imagen necesita apuntar a nuestra carpeta de imágenes. Por lo que podemos establecer esto como una cadena de plantilla con las garrapatas traseras. Esto nos permitirá insertar nuestro nombre de imagen aleatoria como variable. Nuestra carpeta de imágenes, barra inclinada hacia adelante. Al igual que antes usamos el símbolo $ y las llaves para insertar nuestra variable. Esto ahora nos deja con un elemento de imagen creado, y lo siguiente que tenemos que hacer, si vamos a la página de índice es agregar esto dentro de nuestro contenedor de imágenes. Entonces justo arriba vamos a crear una constante llamada contenedor de imagen, y vamos a seleccionar esto con document.getElementById, el Id del contenedor de imagen. Ahora tenemos esta referencia podemos seleccionar nuestro contenedor de imágenes y luego AppendChild. El elemento hijo que queremos anexar es esta imagen desde justo arriba. Ahora deberíamos poder guardar esto y verlo en nuestro proyecto. Entonces cada vez que ahora cargamos vemos una imagen que se está mostrando dentro del navegador, y ésta está siendo seleccionada aleatoriamente de nuestra matriz. Todavía vemos esta imagen justo arriba porque esta es para reemplazar en nuestro index.html. Ahora podemos eliminar este elemento y ahora si actualizamos el navegador solo vemos una sola imagen aleatoria. Este es un paso importante, pero no queremos refrescar el navegador para obtener una nueva imagen cada vez. Entonces en el siguiente video, echaremos un vistazo a cómo podemos hacer esto con un temporizador.
6. Trabajar con temporizadores: Nuestro proyecto se encuentra ahora en una etapa en la que generará una imagen aleatoria diferente cada vez que recarguemos el navegador. Por supuesto, esta no es la forma en que queremos que nuestra app se desempeñe. Queremos llamar a una imagen aleatoria después de un cierto retraso de tiempo. El modo en que vamos a hacer esto es agarrando nuestro código que genera la imagen aleatoria. Vamos a colocar esto dentro de una función, luego llamar a esta función después de un cierto retraso de tiempo. Vamos a crear una nueva función justo por encima de esto. Voy a crear esta función usando una sintaxis ligeramente diferente a la del proyecto anterior. Vamos a crear lo que se llama una función de flecha ES6. Una función de flecha es básicamente una sintaxis diferente a las funciones regulares que hemos utilizado anteriormente. También hay algunas diferencias técnicas entre las dos sintaxas de función. A pesar de que no estaremos cubriendo estos dentro de
este curso, esta función va a contener toda la sintaxis justo aquí. De la forma en que
escribimos una función de flecha ES6, vamos a almacenar un nombre de función llamado generar dentro de una constante, y luego vamos a establecer esto igual a nuestra función. Establecemos la función de flecha así y luego las llaves. Dentro de estos corchetes
justo aquí, al igual que cuando miramos las funciones irregulares en los proyectos anteriores, también
podemos pasar argumentos dentro aquí también. Por ejemplo, si tuviéramos un valor, podríamos pasarlo así y luego acceder a nuestro valor dentro de la función. Pero todo lo que queremos hacer es agarrar estas líneas de código, y luego pegarlas en. Ahora tenemos esta función a la que ahora podemos llamar, y queremos llamar a esta función después de un cierto retraso de tiempo. Hagamos esto justo debajo, podemos crear una segunda función a la que voy a llamar un temporizador. El modo en que podemos ejecutar algún código dentro de un JavaScript es aprovechando SetIntervalo. setIntervalo es una función que toma dos argumentos. El primero es el código que se desea ejecutar. Ya tenemos el código disponible dentro de esta función generar. Podemos pasar en generar como primer argumento. Entonces el segundo es un retraso de tiempo. Este retardo de tiempo es en milisegundos, un segundo será igual a 1,000, dos segundos serán 2,000, y así sucesivamente. El modo en que podemos llamar a esta función es usando el botón Reproducir. Si volvemos a nuestra página de índice, tenemos el botón Play dentro de esta sección comentada. Vamos a reinstaurar esto. Entonces podemos llamar a esto desde nuestro botón Play. Haremos esto en un clic, así que pongamos el on click igual a nuestro temporizador. Pasado al navegador, recarguemos esto y pinchemos en el botón “Jugar”. Después de nuestro retraso de dos segundos, vemos que una nueva imagen se ha generado aleatoriamente y se ha colocado al final de nuestro div. Tan solo para recapitular, cuando hacemos clic en “Play”, llamamos a nuestra función de temporizador. Esta función de temporizador se ejecutará cada dos segundos, luego llamar a nuestra función de generar la cual genera una nueva imagen aleatoria. Como acabamos de ver, esto no es ideal porque queremos reemplazar la imagen existente en lugar de agregar esto al final de nuestro contenedor de imágenes. Una de las formas en que podemos arreglar esto es agregar una declaración if y comprobar si ya existe una imagen antes de seguir adelante y agregar una nueva. Justo antes de agregar esta imagen, podemos crear una declaración if, esto va a comprobar si nuestro contenedor de imágenes. Recuerda, este contenedor de imágenes era el envoltorio justo aquí el cual va a contener todas nuestras imágenes en su interior. Si nuestro contenedor de imágenes y entonces podemos decir.haschildNodes. Este es un método el cual va a comprobar si nuestro contenedor de imágenes contiene algún elemento hijo. Actualmente, no lo hace porque esté vacío, no
hay nada entre nuestro div. Pero si hay una imagen ahí en su lugar, vamos a ejecutar algún código que eliminará esto. En primer lugar, seleccionaremos nuestro contenedor de imágenes y luego podremos llamar a un método llamado removeChild. El modo en que podemos seleccionar qué elemento hijo queremos eliminar es mediante el uso de un método llamado FirstElementChild. Llamamos a esto en nuestro contenedor, por lo que nuestro ImageContainer, y luego seleccionamos el FirstElementChild. Aquí hemos visto que si nuestro ImageContainer tiene algo anidado en su interior, entonces
vamos a seguir quitando esto, y el elemento que queremos quitar es el primer elemento dentro. El primer elemento siempre va a ser nuestra imagen ya que no hay nada más dentro de nuestro div. Vamos a guardar esto y darle una oportunidad a esto, haga clic en “Jugar”. Ahora, sólo vemos una imagen a la vez. El siguiente tema que tenemos que tratar, si te darás cuenta al hacer click en “Play”, hay un retraso de tiempo antes de que aparezca nuestra primera imagen. Este retardo de tiempo son los dos segundos que fijamos justo aquí. Esto causará como un pequeño problema porque queremos iniciar el juego tan pronto como el usuario haya hecho clic en “Play”. El modo en que podemos arreglarlo es llamando a nuestra función de generar en cuanto se inicie el juego, y luego tan pronto como esto se esté ejecutando, podemos entonces confiar en nuestro temporizador para continuar con el resto de las imágenes. Vamos a crear una nueva constante justo debajo de la cual va a manejar esto. Esta va a ser una función llamada play. Una vez más, configuraremos nuestra función de flecha. Entonces vamos a llamar a esta función de juego en cuanto empiece el juego. En lugar de nuestro temporizador, cambiaremos esto para jugar. En cuanto comience el juego, vamos a llamar a nuestra función de generar. Esto se llamará una vez, entonces
llamaremos a nuestra función de temporizador. Vamos a probar esto. En cuanto hacemos click en “Jugar” dentro del navegador, deberíamos ver nuestra primera imagen que hacemos. Entonces después de nuestro retraso de tiempo, el resto de las imágenes comienza a generarse. De lo siguiente a cuidar es de realmente terminar nuestro juego. Si reducimos nuestro temporizador a un número realmente pequeño, digamos 300 milisegundos, luego haga clic en “Play”, esto luego recorrerá todas nuestras 20 imágenes pero seguirá adelante y no sabrá cuándo parar. Aquí vemos que hemos pasado más de 20 imágenes pero el juego sigue funcionando. Una de las formas en que podemos arreglarlo es reduciendo el número de imágenes o quitando una imagen después de que se haya generado una. Actualmente, generamos un número aleatorio. Es decir, nuestro número aleatorio puede generar 20 imágenes diferentes una vez que esta función se haya ejecutado. Si entonces quitáramos una imagen de nuestra matriz, esto nos dejará entonces con 19 opciones, y 18, y 17, y así sucesivamente. El modo en que podemos eliminar una imagen es seleccionando nuestro array de imágenes. Podemos usar un método de empalme JavaScript el cual va a eliminar un valor de nuestra matriz. Empalme va a tomar en dos valores separados. El primero en el que pases va a ser la imagen que queremos quitar. Si queremos quitar la primera imagen, ésta sería la posición 0, posición 1, y así sucesivamente. Ya sabemos con qué imagen estamos tratando actualmente porque tenemos esto almacenado dentro del número aleatorio. Pasemos esto adentro. Entonces el segundo valor es el número de artículos que desea eliminar. Sólo vamos a quitar un valor. Dejemos esto como uno. Tan solo para recapitular, estamos seleccionando aleatoriamente cualquiera de nuestras imágenes de la matriz. Entonces estamos empujando esto al DOM y mostrando esto dentro de nuestro proyecto, y luego finalmente, eliminaremos esta imagen de nuestra matriz para que pueda seleccionarse más de una vez. Esto ahora significa que si volvemos al navegador e
iniciamos nuestro juego, ahora solo deberíamos ver 20 imágenes aparecen en el navegador. Probemos esto. Ahí vamos. El juego ahora se detiene porque no tenemos más imágenes por las que recorrer. Esto ahora significa que nuestra matriz de imágenes ahora se reduce a cero, y ahora tenemos una forma de terminar el juego. Pero una cosa que tenemos que hacer es también detener nuestro tiempo a las dos. Por el momento, este tiempo de intervalo establecido no tiene forma de saber cuándo debe detenerse. Por lo tanto, necesitamos decirle a un intervalo establecido que se detenga manualmente para que no siga utilizando los recursos del navegador. Habíamos establecido intervalo aquí dentro. El modo en que podemos detener esto es llamando a un intervalo claro. También voy a almacenar esto dentro de una función llamada StopTimer. Todo lo que esta función va a hacer es llamar a nuestra función de intervalo claro. Después pasa en una referencia a nuestro temporizador dentro del intervalo claro. Podemos hacer esto pasándolo establecer intervalo a una variable. Llamemos a esta variable TimerRef. Entonces podemos configurar TimerRef para que sea igual a nuestro intervalo establecido. Ahora, tendremos esta referencia. Ahora podemos pasar esto a claro intervalo para que sepa a qué hora necesitamos despejar. El motivo por el que hemos declarado esta variable fuera de una función en lugar dentro es porque entonces podemos acceder a esto en cualquiera de las funciones. Si declaramos nuestra variable dentro de esta función, sólo
podríamos acceder a ella dentro de este temporizador lo que luego provocará un error cuando intentemos referirla en nuestro intervalo claro. Vamos a mover esto de nuevo afuera. Ahora, necesitamos llamar a nuestra función StopTimer al final de nuestro juego. Nuestro juego termina una vez que no nos quedan más imágenes en el array, porque las estamos quitando en cada generación. Dentro de nuestra función de generar, podemos comprobar si nuestras imágenes longitud de punto es igual a cero. Entonces podemos llamar a nuestra función StopTimer, y también usar la palabra clave de retorno, lo que significa que esto luego saldrá a nuestra función y el siguiente código ya no se ejecutará. Guardemos esto y probemos esto en el navegador, podemos hacer clic en “Play”, y ahora deberíamos recorrer 20 de nuestras imágenes, luego detener el temporizador. Bien. Con esto ahora en su lugar, pasaremos al siguiente video donde nos encargaremos de generar un número para mostrar al usuario.
7. Generar un número para comparar: Ahora vamos a crear nuestro número aleatorio el cual se va a mostrar al jugador, que puedan comparar el número de elementos dentro de la imagen. Este número va a ser una de tres cosas. Va a ser si la cantidad correcta de elementos que se muestra en la imagen son uno más alto o uno más bajo, cual es así que el juego es un poco más desafiante, y vamos a hacer esto de nuevo en nuestra función de generar. Por el momento nuestra función de generar está empezando a llenarse bastante. Podemos externalizar todo el código el cual es responsable de configurar nuestra imagen. Esto está agarrando nuestro contenedor de imágenes todo el camino hasta AppendChild. Vamos a aclarar esto, dejando en nuestro empalme. Voy a reemplazar esto por una función. A la función le voy a dar a esto un nombre de SetImagesRC, y luego crear esto poco por encima de la parte superior. Dentro de aquí podemos pegar en el contenido de una cotización de nuestra función de generar, pero para que esta función funcione también necesitamos recibir el nombre de la imagen aleatoria. Volver abajo a nuestra función de generar, tenemos aquí nuestro nombre de imagen aleatoria. Podemos copiar esto como esto a nuestra función y luego si recibimos esto como argumento, esto ahora está disponible dentro de esta función para usar. Antes de ir más lejos guardemos nuestro código y probemos esto en el navegador, y todo sigue funcionando como se esperaba. Ahora podemos pasar a generar este número aleatorio. Bajemos a nuestra función de generar. Justo debajo donde establecemos la fuente de la imagen, también
podemos crear una nueva función la cual
va a ser responsable de crear este número. Llamemos a esto generar más o menos. Todo lo que esta función va a hacer es o devolver un valor de uno positivo o negativo. Entonces podemos usar este número para añadirlo a un número real para hacerlo más desafiante. Vamos a crear esto justo arriba dentro de una función, así que generemos más o menos. Esto sólo necesita un igual justo después aquí. Para que esta función devuelva ya sea uno positivo o uno negativo, necesitamos generar dos opciones aleatorias. El modo en que podemos hacer esto igual que lo hemos visto antes es usar math.random. Para darnos dos opciones separadas o dos valores, podemos multiplicar esto por dos y luego envolver esto dentro de math.floor. Recuerda math.floor correrá por nuestro número aleatorio. Esto devolverá un valor de cero o uno. Vimos esto dentro de una constante a la que voy a llamar al número cero a uno. Ahora queremos devolver un valor a partir de esta función. Como acabamos de mencionar el número cero a uno o será un cero o uno. El modo en que podemos convertir esto
a uno positivo o negativo es haciendo uso del operador ternario JavaScript. Podemos seleccionar nuestra constante de números cero a uno, y podemos decir si esto es igual a cero, ahora
queremos proporcionar una opción. El operador ternario de JavaScript nos permitirá
proporcionar dos opciones si el valor es verdadero o falso. Funciona igual que una declaración if else. Si esta expresión aquí es verdadera, entonces si esto es igual a cero después del signo de interrogación, vamos a devolver un valor de uno negativo. Después agregamos un colon y proporcionamos opción si esto va a ser falso. Si esto es falso, agregaremos más uno, y devolveremos esto de nuevo desde nuestra función. Dado que esto se genera aleatoriamente tendremos una probabilidad de 50/50, pero esta función devolverá ya sea negativa o positiva. Ahora podemos desplazarnos hacia abajo y almacenar este valor de retorno dentro de una constante. Digamos más o menos y pongamos esto en el valor de retorno. Ahora tenemos o bien este número positivo o negativo. También ahora necesitamos agarrar el valor real de los elementos que contiene cada imagen. El modo en que podemos hacerlo si nos desplazamos hacia arriba, es seleccionar la propiedad llamada número de ítems. Estamos haciendo algo muy similar en esta función donde agarramos el nombre de la imagen aleatoria. Echemos un vistazo a esto. Justo aquí estamos agarrando nuestro nombre de imagen de una imagen aleatoria. Vamos a copiar esta línea aquí, pegarla en y en lugar de agarrar nuestro nombre de imagen aleatoria, ahora
podemos agarrar el número de ítems, y también cambiar este nombre constante para reflejar esto, así que número de ítems. Esto ahora nos deja con toda la información que necesitamos para generar nuestro número de pantalla igual que vemos aquí. Tenemos un valor de uno negativo o positivo, y también tenemos el número dos correcto. Ahora vamos a utilizar estos dos valores para pasar a nuestra función la cual va a generar este número de
visualización, mostrar nuestra función, donde vamos a pasar en nuestras dos constantes o nuestros dos valores desde arriba los cuales es más o menos y número de artículos. Desplázate hacia arriba y crea nuestra función llamada generar número de visualización. Esta vez recibimos en dos valores y el primero es número de ítems y el segundo es más o menos. Dentro de nuestra función queremos hacer una de dos cosas. Queremos o bien mostrar el número real, o alternativamente queremos mostrar un número que es uno más alto o uno más bajo. Para elegir cuál de estas opciones va a tomar esta función, necesitamos generar un número aleatorio. Al igual que abajo aquí vamos a generar dos números aleatorios así que entre cero o uno. Dentro de una constante, voy a llamar a esta división. Este número aleatorio ahora nos permitirá crear una sentencia if para comprobar si esto es cero o uno. Diremos que si la división es igual a cero, esto va a mostrar nuestro número real. El modo en que podemos hacerlo dentro de nuestra página de índice es encontrar nuestros elementos cualquiera que sea el valor que se almacene en su interior. Vemos este valor justo aquí para que podamos eliminar esto, y luego podemos apuntar a nuestro elemento con el id de número. Hacemos esto con document.getelementbyid. Seleccionaré que había número y luego configuraré el innerHTML y estableceré esto en nuestro número de ítems el cual se pasa a nuestra función justo arriba. Este es nuestro número correcto por lo que ahora podemos crear un número falso. Podemos decir otra cosa. Esto será si la división es igual a una. Al igual que arriba, también estableceremos el document.getelementbyid, seleccionaremos nuestro número y esto es igual a nuestro número real que es número de artículos. Entonces queremos agregar ya sea uno positivo o uno negativo a esto, que se almacena en un valor llamado más o menos. Probemos esto en el navegador. Si tengo que ser más claro, si sólo frenamos este juego, entonces tres segundos y recargar, vemos el valor de uno. Parece que tenemos un problema en alguna parte, así que volvamos a nuestra función. Tenemos un número aleatorio entre cero y uno. Si es cero, estableceremos el valor numérica para que sea nuestro número de artículos. De no ser así estableceremos que este sea nuestro número de artículos, ya sea positivos o negativos. Eso parece estar bien, así que vamos a bajar a generar, mostrar número. Creo que sólo necesitamos pasar esto en un orden correcto. Probemos esto ahora. Haga clic en jugar. Hay seis personas dentro de aquí y obtenemos el valor de siete, esa es una más alta. Este es el número correcto de ocho. Esta es una más alta. Sólo tenemos que esperar uno más bajo, siete, que es éste de aquí. Ahora vemos el número correcto de artículos. Vemos un valor más alto y también un valor más bajo también. Esto ahora funcionando, ahora vamos a pasar al siguiente video y vamos a sustituir el nombre de la imagen.
8. Fijar el nombre de la imagen: Cuando el usuario está jugando en el juego, ahora
hemos manejado una ruta de esta sección de visualización. Ahora hemos vinculado la imagen al número de ítems. Lo siguiente que quiero hacer es mostrar también el nombre de la imagen, así que por ejemplo, digamos ocho huevos, y qué cambia para cada imagen. Si volvemos a nuestro código en el script.js, dentro de nuestra función de generar, realidad ya
tenemos acceso a nuestro nombre de imagen aleatoria, y almacenamos en este interior de esta constante. Aquí dice, recorte en nuestra matriz de imágenes, como en nuestro número aleatorio, y luego seleccione la nueva propiedad de nombre de imagen como podemos ver justo aquí. Lo que voy a hacer ahora, podríamos, si usa nombre de imagen aleatoria para agregar la funcionalidad a esta función generar, pero en cambio para mantener las cosas más separadas voy a crear una nueva función. Añadamos esto a nuestra función de generar y llamemos a este nombre de imagen conjunto. Esta función va a tomar en nuestro nombre de imagen aleatoria, así que vamos a agarrar esto y pegarlo en y podemos usar esto fuera de nuestra función de generar. Digamos columnas. El nombre de la función de conjuntos, nombre de la
imagen y esto está tomando en nuestra variable de nombre de imagen aleatoria. Esta es una función de flecha. Antes de escribir nuestro código en esta función, hagamos un registro de consola y comprobemos que estamos recibiendo el nombre de la imagen aleatoria. Abre la consola, y nosotros “Click on play” para ver los huevos dot jpg, porque dot jpg. Lo que ahora queremos hacer es tomar este nombre y mostrar esto dentro de nuestra interfaz de usuario. Antes de hacer esto, sin embargo, necesitamos recortar la extensión de punto jpg del final de esta imagen. El modo en que podemos hacerlo es usando un método JavaScript que se llama Slice. Slice va a tomar una cadena de texto y ya tenemos un nombre de imagen aleatorio para nuestra cadena, y luego llamaremos a este método de corte, y esto devolverá una nueva cadena con cierta parte eliminada. Entonces, eliminemos nuestro registro de consola. Podemos acceder a nuestro nombre de imagen aleatoria llamado método Slice. Slice va a tomar dos valores, que va a ser el inicio de la imposición de los caracteres que se desea quitar. Si tuviéramos huevos punto jpg, queremos eliminar la palabra que es huevos, por lo que comenzaremos en el primer carácter, que es la posición de cero, y luego el segundo valor, que es opcional. Si dejáramos esto fuera, esto pasaría directo hasta el final de nuestra cuerda, pero en cambio queremos retroceder cuatro lugares. El modo en que podemos hacerlo es obteniendo toda la longitud de nuestra cuerda y luego retrocedemos cuatro lugares. En primer lugar, podemos obtener la longitud completa de la cadena usando el nombre de la imagen aleatoria, longitud de punto. Actualmente esto va desde el inicio de la letra E justo hasta el final de nuestra cadena, que es la letra G. Queremos retroceder cuatro lugares, así que usemos cuatro negativos. Podemos comprobar esto es trabajo en una lista de transeúntes dentro de una constante. Llamemos a esto el nombre de la imagen, por lo que esto igual al nuevo valor que se devuelve de nuestro método de empalme, y luego podemos hacer un registro de consola con nuestro nuevo nombre de imagen. Volver a la consola e inspeccionar. Haga clic en jugar. Ahora vemos punto jpg se ha eliminado de cada uno de nuestros nombres. Esto es bueno y esto es todo ahora están funcionando. Lo siguiente que tenemos que hacer es obtener la interfaz de usuario dentro de nuestro índice. Vayamos a nuestro marcador de posición y eliminemos esto. Entonces podemos apuntar al lapso con el ID del nombre del elemento, por lo que document.getElementById. El ID que era el nombre del elemento, y luego podemos decir al HTML interno, que es igual a nuestra variable de nombre de imagen. Justo después de esto también voy a agregar al final de una cadena, que es un signo de interrogación. Simplemente deja saber al usuario que se trata de una pregunta, así que esto dirá siete patos y luego un signo de interrogación, para que el usuario sepa que esta es la respuesta de una pregunta. Probemos esto por dentro del navegador. Haga clic en jugar, ver dos autos, eso es bueno, plátanos, patos. Todo esto ahora está funcionando bien. Con esto ahora cuidado, ahora pasemos al siguiente video, donde vamos a manejar la conjetura del usuario.
9. Comprobar una correspondencia: El siguiente paso dentro de nuestro juego es manejar la funcionalidad si el usuario hace clic en la garrapata o en la cruz. Vamos a proporcionar dos funciones las cuales se va a comprobar si la conjetura del usuario es correcta o incorrecta y actualizar la puntuación. Para hacer esto dentro de nuestro index.html, necesitamos agregar un manejador de clics a nuestros botones. Estos son nuestros dos botones dentro del área de partidos. Para el botón correcto, configuraremos una función que se activa con un manejador de eventos onclick llamado match. Entonces justo debajo de esto, también haremos lo mismo, pero esta vez la función se va a llamar NoMatch, y vamos a manejar qué hacer si el usuario piensa que su elección es incorrecta. Voy a nuestra transcripción, guardo este archivo, y antes de que lleguemos a trabajar con la adición de estas dos funciones, voy a crear algunas variables sobre la parte superior. Necesitamos almacenar tanto el número correcto de elementos en imagen como también el número que se muestra. Esto es así que vamos a comparar
ambos valores para ver si la elección del usuario fue correcta. La primera variable se va a llamar CurrenentiMageValue. Podemos establecer que esto sea igual a un valor inicial de cero, luego actualizarlos una vez que se haya generado una nueva imagen. Separados por coma, podemos crear una segunda variable llamada displayNumber, y de nuevo, inicializar esto como un valor de cero. Del mismo modo que una nota lateral rápida aquí, no
estamos usando la palabra clave let en ambas ocurrencias aquí porque los hemos separado por una coma, lo que esto está bien hacerlo de esta manera. Agrega una nueva coma justo después de nuestro número de visualización, y establecemos una variable para establecer la puntuación actual que se va a inicializar como cero. Ahora tenemos estos valores realmente necesitamos actualizarlos con los números correctos. Empecemos con nuestro valor de imagen actual. El modo en que podemos agarrar esto si bajamos a nuestra función, que es generar número de visualización, dentro de aquí tenemos la variable llamada NumberOfItems. Por lo tanto, podemos agarrar este número y establecer nuestro valor de imagen actual. Hagámoslo en el fondo de nuestra función. Podemos establecer nuestro valor de imagen actual para que sea igual a nuestro número de artículos. Ahora tenemos nuestro conjunto de valores de imagen actual, que es el número correcto de elementos en la imagen, pero ahora necesitamos actualizar también nuestro número de pantalla, que es el mismo número que el usuario ve en el juego. Recuerda, este es o bien el número correcto, que establecemos dentro de la sección if, o un valor falso que es uno más alto o más bajo, y lo estableceremos en la sección else. En primer lugar, dentro de si sección que era el número correcto. Con eso, nuestro número de pantalla para ser igual a número de artículos. Al igual que arriba donde configuramos esto a la interfaz de usuario. Justo debajo de esto dentro de la sección else, estamos mostrando el número de ítems, que es uno más alto o uno más bajo. Dentro de esta sección también podemos establecer nuestro número de visualización para que sea exactamente el mismo que es número de elementos, y luego uno más alto o uno más bajo. Justo antes de crear nuestras funciones las cuales están vinculadas a nuestros botones, vamos a comprobar que nuestras variables están funcionando actualmente. Dentro de la función de generar, podemos hacer dos logs de consola. El primero es el valor de imagen actual, que es el número correcto de elementos, luego el segundo es el número de visualización, que es el número con el que el usuario comparará. Dentro de la consola, haga clic derecho en “Inspeccionar”, y luego haga clic en “Jugar”. Para empezar, vemos el valor de cero,
cero ya que aún no hemos generado una imagen, por lo tanto tener una coincidencia correcta, una coincidencia correcta, nueve y 10 es incorrecta, incorrecta, incorrecta, etcétera. Ahora tenemos estos dos valores para comparar. Vamos a crear nuestras dos funciones para comprobar si el usuario es correcto o incorrecto. Eliminemos esto, y podemos crear nuestras dos funciones. El primer botón desencadena una función llamada match. La función de coincidencia va a ser responsable de comprobar si el valor actual de la imagen es igual a nuestro número de visualización. Si lo es, el usuario es correcto y actualizaremos nuestra puntuación. Podemos actualizar la puntuación mediante el uso de un operador ternario de JavaScript para que podamos comprobar si el valor actual de la imagen es igual al número de visualización. Después del signo de interrogación, esto significa que la sección es verdadera. Queremos actualizar la puntuación con marcador más plus. De lo contrario, agregamos un colon y la segunda condición. Queremos deducir el puntaje por el valor de uno. Si el usuario tiene esto correcto, la puntuación aumentará. De no ser así, el marcador disminuirá en uno, dos. Entonces también podemos actualizar el DOM con document.getElementById, y esta es la sección justo aquí que queremos actualizar. Pasado a nuestro index.html, podemos actualizar este lapso con el ID del puntaje actual, así que vamos a agarrar esto. También podemos eliminar el valor predeterminado en este extremo, y luego podemos establecer el innerHTML para que sea igual a nuestra variable de puntuación. A continuación tenemos el segundo botón el cual tiene el nombre de función llamado NoMatch. Esto va a ser bastante similar, así que vamos a copiar esto, pegarlo justo debajo. Esto se va a llamar NoMatch, y queremos hacer prácticamente lo contrario de lo que hemos hecho aquí. Queremos comprobar si el usuario cree que el valor actual de la imagen no es igual al número que se está mostrando. Podemos hacer esto más que el triple igual. Vamos a usar el signo de exclamación, y esto comprobará si el valor actual de la imagen no es igual a nuestro número de visualización. Si esto es correcto, esto significa que el usuario tiene estos derechos y actualizará la puntuación. Si se equivocan, deducirá un punto y luego actualizará el DOM. Vamos a intentarlo. Podemos dar click en “Jugar”. De hecho, solo
actualizaremos nuestro temporizador para darnos un poco más de tiempo, para que cinco segundos puedan jugar. Hay seis docs, así que vamos a dar click en la garrapata. Esto es correcto, y obtenemos una puntuación. Doce lápices, ese está bien. Hay siete pasteles, pero si haces click en la x, deberíamos ver que se ha deducido una puntuación. Bien. Ahora este es nuestro trabajo y podemos actualizar la puntuación. En el siguiente video, vamos a volver
al marcador y mostrarlo al usuario al final del juego.
10. Manejar el final del juego: Hey, bienvenido de nuevo. Ahora vamos a manejar exactamente lo que el usuario ve cuando termine el juego. Actualmente, cuando recorremos todas nuestras imágenes y llegamos a la última, actualmente
estamos deteniendo nuestro temporizador y además, no
estamos generando más imágenes. Durante el juego iniciado y condición de fin de juego, también
necesitamos mostrar y ocultar diversos elementos en la pantalla, y también al final, necesitamos mostrar un mensaje al usuario con su puntuación total. En primer lugar, vamos a llegar a trabajar dentro de esta función de juego y vamos a empezar por ocultar algunos elementos que no queremos ver cuando se está ejecutando el juego. Por ejemplo, si hacemos clic en “Jugar”, no
queremos ver toda esta sección de Bienvenida. No necesitamos ver el botón Reproducir. Basta con ver el área de estadísticas y también la imagen. Esto se debe a que dentro de nuestro index.html, tenemos esta área de imagen, y una vez que el juego está en juego, sólo
queremos mostrar este contenedor de imágenes. Vamos a ocultar nuestro área de mensajes. Vamos a ocultar nuestra pantalla de inicio. También vamos a ocultar el botón Play, ya que el juego ya está en juego. Vamos a sacar de todo esto por encima en nuestra función de juego. Esta función se llama tan pronto como comience nuestro juego, por lo que este es un buen lugar para ocultar todo nuestro contenido. En primer lugar, vamos a seleccionar el área de mensajes con getElementById. Voy a usar JavaScript para establecer el estilo y establecer la propiedad de visualización para que sea igual a ninguno. Esto es lo mismo que agregar el tipo de visualización en nuestras hojas de estilo, pero esto se está agregando dinámicamente con JavaScript. También vamos a copiar esto y pegar esto en dos veces más. Podemos utilizar este segundo dentro de
nuestra página de índice para agarrar nuestra sección de pantalla de inicio la cual contiene todo el texto. El número 2 es la pantalla de inicio. Entonces, por último, también necesitamos quitar el botón Play una vez que el juego haya comenzado. Este es el botón ID de Play. Parece que todo esto está funcionando. Una vez que hacemos clic en “Jugar”, ya no vemos todo nuestro texto en la parte superior. Ya no vemos la pantalla de inicio. Ya no vemos el botón Reproducir. También hemos escondido el área de mensajes para más adelante también. Esto es manejar la condición cuando se inicia el juego, y también necesitamos manejar lo que sucede cuando es el final del juego. Con esto, también vamos a crear una función personalizada a la que llamaremos justo al final. Tan constante, y esta función se va a llamar EndofGame, y esta sección también quiere mostrar y ocultar algunas áreas. Una vez que hayamos llegado al final del juego, queremos asegurarnos de que nuestro mensaje haya sido mostrado porque vamos a agregar un mensaje al usuario con su puntuación. Copiemos esto y peguemos en la sección de mensajes. Para que esto sea visible en la pantalla, vamos a cambiar el tipo de visualización para que sea bloque. El segundo que vamos a modificar va a ser nuestro contenedor de imágenes. Esto se debe a que una vez que el juego ha terminado, queremos eliminar la última imagen de nuestra pantalla y podemos hacerlo manteniendo este tipo de pantalla para ser igual a ninguno. Una vez que
eliminamos esta imagen, entonces queremos poblar nuestro mensaje con la puntuación de los usuarios. Si subimos justo a la parte superior donde creamos nuestras variables, tenemos la puntuación de usuario dentro de esta variable. También necesitamos crear una segunda variable también, que es el total de puntos disponibles. Esto va a ser igual al número de imágenes dentro de nuestra matriz. Podemos crear una variable justo debajo, separarla por una coma. Quiero llamar a esto el TotalAvailable. Establezca esto igual a la longitud de nuestras imágenes con images.length. Ahora podemos usar estas dos variables para mostrar un mensaje al usuario al final de nuestro juego. Volver a nuestra función EndofGame, vamos a agarrar nuestro área de mensajes con document.getElementById, el ID del mensaje. Entonces podemos establecer el mensaje con un innerHTML y vamos a establecer esto igual a una cadena de plantilla. Estamos en la parte de atrás [inaudible] por lo que podemos incluir nuestras dos variables. El mensaje que voy a mostrar va a ser, “Se acabó el juego, tu marcador fue”. Podemos entonces usar el símbolo $ y las llaves para generar nuestra variable de puntuación/, y luego hacemos uso de nuestra variable total disponible, cual acabamos de crear arriba. Esto va a mostrar nuestro mensaje al usuario. Redujamos nuestro temporizador. Vayamos por 300 milisegundos y comprobemos que todo esto está funcionando. Haga clic en “Jugar”. El marcador realmente no importa. Llegamos al final del juego y no pasa nada. Esto se debe a que hemos creado nuestra función de fin de ganancia, pero aún no la hemos llamado. El lugar al que queremos llamar a esta función es mirar dentro de nuestra función Generar. Esta es la misma ubicación dentro de la sentencia if, donde comprobamos si nuestras imágenes.length es igual a 0, y luego nos detenemos en nuestro temporizador. Dentro de aquí también está el mismo lugar que llamamos nuestra función EndofGame. Añadamos esto, y luego recorremos nuestras imágenes. Nuestra función EndofGame ahora ha sido llamada. Hemos eliminado el contenedor de imágenes y después hemos configurado el mensaje
al usuario con la puntuación total. Entonces esto es bueno. Todo esto está funcionando, pero ¿qué queremos hacer ahora? Bueno, tenemos un par de opciones. Podemos añadir nuestro botón Play de nuevo a la pantalla, que nos va a llevar de vuelta al inicio del juego. O simplemente podemos hacer algo como configurar este mensaje para que sea de tres segundos y luego volver a cargar el navegador. Lleva al usuario de vuelta a la pantalla de inicio. El modo en que podemos hacerlo es usando un tiempo de espera. Aquí utilizamos el setIntervalo, que va a llamar a una función después de un cierto retraso de tiempo. SetIntervalo también seguirá repitiendo esto hasta que le digamos lo contrario. No obstante, dentro de aquí, solo queremos ejecutar un código impresionante de función solo una vez. Para ello, podemos usar setTimeout. Dentro de aquí, también vamos a pasar en una función de flecha. Dentro de aquí, todo lo que queremos hacer es refrescar el navegador y la forma en que podemos hacerlo dentro de nuestro código es mediante el uso de location.reload. Esto es exactamente lo mismo que presionar el botón Recargar en nuestro navegador, pero en cambio, lo
estamos haciendo después de un retraso de tiempo, que voy a establecer como tres segundos. Vamos a probar esto. Haga clic en “Jugar”. Ahí está nuestro marcador, y después de tres segundos, deberíamos ver una recarga. Si bien también estamos lidiando con el fin de la condición del juego, también
podemos ocultar esta sección de Estadísticas a la izquierda. Vamos a ocultar esto al final del juego y luego reinstalarlo una vez que el juego haya comenzado. El modo en que podemos hacerlo es igual que lo hemos hecho anteriormente con getElementById, y el ID que queremos agarrar. Si nos desplazamos un poco a nuestra sección de inicio, recuerda cuando usamos estos CSS desde un principio, rodeamos todo este contenido de texto dentro de un div con el ID de contenido de estadísticas. Ahora podemos usar esto para mostrar y ocultar esta área en el guión. En primer lugar, vamos a copiar y pegar esta línea. Tenemos que seleccionar nuestros StatsContent. Entonces al final del juego, vamos a quitar esto con la exhibición de ninguno. Podemos agarrar esto y luego veremos que se inicia el juego. Queremos reinstaurar esto configurando esto para que sea un tipo de bloque de visualización. Vamos a recorrer nuestras imágenes y comprobemos que todo esto está funcionando en el navegador. Cuando se inicia el juego, vemos que está apareciendo nuestra sección. Entonces esto desaparece al final del juego. De hecho, probablemente ni siquiera necesitemos reinstaurar esto cuando comience el juego,
porque recuerden, estamos refrescando el navegador, que de inmediato nos colocará de nuevo en el DOM. Vamos a recorrer el ciclo. Nuestras estadísticas están todas exhibiendo. Se retiran de nuevo al final del juego. Con esto ahora cuidado, en el próximo video, vamos a manejar estos dos botones aquí, pero asegúrate de que el usuario solo pueda tener una selección cada vez que se muestre una imagen.
11. Evitar selecciones múltiples y actualizaciones de la UI: Nuestro juego casi está terminado y ahora solo necesitamos hacer algunos retoques finales. Una de las principales cosas que vamos a hacer en este video es asegurarnos de que el usuario solo
pueda hacer clic en uno de estos botones de selección una vez por imagen. Actualmente, si iniciamos un juego, podemos hacer clic en cualquiera de estos botones tantas veces como queramos para cada imagen. También queremos asegurarnos de que esta sección de puntuación y los botones no estén disponibles antes de que el juego incluso comience. En primer lugar, comenzaremos ocultando de nuevo esta sección de inicio en nuestro script.js. Yo quiero hacer esto justo por debajo de nuestras variables, por lo que bajo el total disponible. Agarramos nuestra sección de contenidos de estadísticas, que es el envoltorio justo aquí que guarda todas nuestras puntuaciones y botones. Document.getElementById, el nombre de ID es StatsContent. Entonces podemos ocultar esto estableciendo la propiedad de estilo de visibilidad para que sea igual a oculta. Ya que esto ya se ha ido, queremos reinstaurar esto una vez que comience el juego. Copiemos esto y si bajamos a nuestra función de juego, podemos agregar esto dentro de aquí, pero esta vez queremos que la visibilidad sea igual a visible. Por último, al final del juego también manipularemos esto, por lo que podemos sumar esto en. Una vez más, configurando esto para que se oculte una vez que el juego haya terminado. Guardemos esto y probemos esto en el navegador, puedes jugar y ahora nuestras estadísticas están mostrando [inaudible] el final del juego. Esto ahora se está escondiendo listo para el inicio del juego. A continuación, también podemos hacer dinámicos estos dos valores. Actualmente no tenemos un valor para comenzar con nuestra puntuación, y tendremos este valor codificado de 20 dentro de nuestro index.html. Eliminemos esto, y ahora podemos actualizarlos con el ID de puntuación actual, y también total disponible. Ya tenemos estos valores. Si nos desplazamos hacia arriba a nuestras variables en la parte superior, tenemos nuestra puntuación y también el total disponible, así que sumémoslas aquí ahora. Agarra los elementos por nuestro ID, que es el puntaje actual. Después establece el innerHTML para que sea igual a nuestra variable de puntuación. Voy a duplicar esto, y el siguiente de total tenía la ID del total disponible. La variable se almacena justo arriba, y eso es solo una aquí, así que vamos a tirar de esto. Pasado al navegador, ahora podemos probar esto si hacemos click en play. Todos los valores ahora actualizados y aún vemos el número dinámico de imágenes de 20. Si recuerdas desde temprano en el HTML, también
establecemos la sección justo aquí. Diremos cuántos segundos tiene el usuario para decidir. Esto sólo se mantendrá valor codificado duro de tres, que está terminado en nuestra página de índice, también
rodeamos este valor dentro de un lapso con el ID de TimeSetting. Ahora vamos a eliminar esto, es un valor codificado duro, ahora
podemos establecer esto como una variable. En la parte superior, voy a crear una constante, el nombre del retardo de tiempo que voy a establecer inicialmente en un valor de tres segundos. Ahora podemos usar este retardo de tiempo en dos lugares. En primer lugar, vamos a actualizar nuestro DOM justo aquí, y también podemos usar esto abajo. Dentro de nuestra función de temporizador, por lo que podemos reemplazar nuestro valor codificado por nuestra variable. Podemos entonces actualizar el DOM. Entonces duplicemos esta línea y el ID al que queremos apuntar es el ajuste de tiempo. Vamos a darle a esto un ahorro y comprobar si esto está funcionando. Está funcionando pero no se ve exactamente como queremos que lo haga, este es un valor de 3,000. Ya que esto es en milisegundos, así que todo lo que necesitamos hacer es dividir esto por 1,000 dándonos el valor de tres segundos. Comprobemos también que el temporizador está funcionando y veamos que tenemos tres segundos entre cada imagen. Eso se ve bien. Lo siguiente que tenemos que arreglar es el hecho de que están usando un clic en estos botones, varias veces para cada imagen. El modo en que vamos a arreglar esto es creando una variable llamada elegida, y estableceremos que esto sea cierto una vez que un usuario haga clic en el botón. Añadamos una coma justo después de esto, y luego podemos agregar una nueva variable llamada elegida, y estableceremos esto en un valor inicial de false. Ahora si nos desplazamos hacia abajo a las funciones que están habilitadas una vez que el usuario hace clic en los botones, esta es la función de coincidencia y no coincidencia. Sólo queremos ejecutar el código dentro de aquí, si el valor elegido es igual a falso. Entonces cortamos esto, busco escribir una declaración if. Podemos decir si no
elegimos, entonces podemos agregar nuestras llaves y ejecutar el código dentro. Haría exactamente lo mismo para nuestra función NoMatch justo debajo, así que recorta esto, crea nuestra declaración if, y luego ejecuta este código dentro. Inicialmente, ambas funciones se ejecutarán si hace clic en un botón porque hemos establecido nuestro valor elegido para que sea falso. Por lo que cualquiera de estas opciones funcionará desde el principio. Pero una vez que el usuario ha hecho clic en uno de estos, queremos entonces revertir esto y establecer nuestro valor elegido para que sea igual a verdadero. Haremos exactamente lo mismo en nuestra función NoMatch. Una vez que un usuario haya realizado alguna selección, elegida será igual a verdadera. Entonces queremos volver a hacer esto falso, que el usuario pueda hacer una nueva opción, y la forma en que podemos hacerlo es copia de seguridad en nuestra función de generar. Digamos que el elegido sea igual a falso, por lo que el valor de elegido sólo será siempre igual a falso una vez que comience el juego o una vez que generemos una nueva imagen. Esto significa que el usuario puede entonces hacer su elección porque esto será falso, y luego estableceremos esto para que sea cierto, por lo que no se pueden tomar más opciones. Dale esto más guardar y vamos a probar esto en el navegador. Ahora solo podemos hacer clic en cualquiera de estos botones una vez para esa imagen, una vez para esta imagen y todo esto está funcionando bien. Esta es ahora toda la funcionalidad que ahora se ha cuidado para nuestro juego número mucho. A continuación, vamos a terminar este proyecto agregando un efecto de desvanecimiento a nuestra imagen.
12. Fundir las animaciones: Terminas este proyecto, vamos a hacer que las transiciones entre cada una de nuestras imágenes sean un poco más fluidas. Actualmente, cada una de nuestras imágenes se acaba de colocar dentro del DOM. Pero vamos a hacer esto más suave agregando un efecto de desvanecimiento. El modo en que podemos hacerlo es agregando una clase a nuestra imagen. Una vez que esto se haya generado. Ahora podemos pasar a nuestro CSS y añadir esto como animación. Si nos dirigimos a nuestra función SetImageSource, dentro de aquí es donde generamos un nuevo elemento de imagen para mostrar dentro del navegador. Podemos acceder a nuestra variable de imagen y lo voy a hacer justo después de establecer la fuente. Podemos hacerlo seleccionando la propiedad ClassList, que tiene un método llamado add. Esto nos permitirá agregar un nuevo nombre de clase a nuestros elementos de imagen y vamos a ir por un nombre de fade. Ahora podemos usar esto más en nuestras hojas de estilo, así que dirígete a nuestro Styles.css. Podemos agregar esto en cualquier lugar dentro de nuestras hojas de estilo, voy a ir por justo encima de nuestra consulta de medios. Podríamos empezar a apuntar a nuestro elemento de desvanecido. Pero justo antes de hacer esto, necesitamos crear nuestra animación y podríamos hacerlo con la regla de fotogramas clave. Entonces le damos un nombre a nuestra animación y voy a ir por fade. Aquí dijimos, qué propiedad CSS queremos cambiar a lo largo de esta animación. A partir de esto, podemos usar desde y hacia dónde especificamos con qué
propiedades CSS queremos empezar y luego con cuáles queremos terminar. Entonces para crear un efecto de fade vamos a establecer la propiedad CSS, de la opacidad para ser igual a cero. Esto significa que esto es completamente transparente y no veremos nada en la pantalla. En nuestro caso, no veremos la imagen dentro del navegador. Al final de este fade o esta animación, queremos que la opacidad sea un valor de uno. Esto significa que nuestra imagen será completamente visible u opaca una vez que nuestra animación haya terminado. El modo en que podemos usar esto es arriba dentro de nuestra clase de desvanecimientos. Recordar fade es la clase que hemos agregado a nuestro elemento de imagen y podemos agregar nuestros fotogramas clave con el nombre de la animación. El nombre de la animación-se desvanece. Este es su nombre justo aquí y ahora tenemos una animación que va a ir de cero opacidad, a ser totalmente opaca o totalmente visible en la pantalla. Pero por el momento esto probablemente no va a crear ningún efecto. Solo comprobemos esto y recarguemos. No vemos nada diferente dentro del navegador. Esto se debe a que esto está sucediendo casi de inmediato y no
hay retraso de tiempo entre el inicio y el final de nuestra animación. Para ello, podemos establecer la duración de la animación y este es el número de segundos que queremos que esto suceda de nuevo. Queremos configurar esta animación para que suceda a lo largo de un segundo. Ahora si lo probamos en el navegador y hacemos clic en Play, vemos que cada imagen que se carga tiene una animación, que es de más de un segundo. Esto solo hace que el juego sea un poco más suave para el usuario final y por supuesto, puedes jugar con estos y hacer que estas animaciones sean más personalizadas y hacer que este proyecto sea tuyo. Este es ahora el final de nuestro juego Number Match, espero que lo hayan disfrutado. Gracias por ver.
13. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en share de habilidad, 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. Gracias una vez más, buena suerte, y ojalá te vuelva a ver en una futura clase.