Diversión en Javascript: ¡Construye un juego de adivinar el número!

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 frameworks, ningún boilerplate, ninguna librería, ni ninguna plantilla, en cambio, vamos a estar construyendo todo completamente desde cero, paso a paso, para mostrarte cómo estas tres tecnologías todos trabajan juntos. El proyecto de esta clase va a ser una conjetura el juego de números. Una computadora generará un número aleatorio entre uno y 100, y luego podremos seleccionar si queremos intentar adivinar esto en cinco o 10 intentos. Cuando seleccionamos una de estas opciones, esta [inaudible] nuestra vista de juego donde podemos agregar cualquier conjetura a esta entrada que sustituirá a un valor como 50 dentro de aquí. Vemos que nuestra conjetura es demasiado alta. Esto ahora significa que ya que nuestra conjetura es demasiado alta, el número correcto está ahora en el rango actual de 1-50. Podemos entonces añadir una segunda conjetura. Esto también es demasiado alto, por lo que esto ahora significa que nuestro rango está entre uno y 25. Vamos por cinco, es demasiado bajo, 12, y empezaremos a reducir este rango entre 12-25. Al estar haciendo estas conjeturas, también estamos registrando el número, los intentos anteriores, así como las conjeturas anteriores para que podamos hacer un seguimiento de las cosas a medida que avanzamos. Ahora tenemos seis intentos más para hacer bien esto. Vamos por 20, 22, y en esta ocasión, la conjetura correcta fue 23. Ya ves que tenemos esto correcto en ocho intentos. Tenemos entonces la opción de iniciar un nuevo juego que nos llevará de vuelta a nuestra pantalla de inicio. Este juego está construido completamente desde cero. Utilizamos HTML regular para construir toda la interfaz de usuario. Después de esto, aprovechamos el CSS para estilizar, posicionar y maquetar. Después te presentamos JavaScript para hacer que nuestro juego sea totalmente interactivo. Manejamos toda la funcionalidad con JavaScript regular. Necesitamos capturar la entrada del usuario. Necesitamos generar un número aleatorio entre uno y 100, luego comparar esto con la conjetura del usuario. Tenemos que registrar todos los intentos anteriores. Necesitamos agregar ajustes de dificultad. Tenemos que manejar qué hacer cuando termine el juego y también actualizar el deslizador de rango también, aunque el usuario puede reducirlo después de cada una de sus conjeturas. Entonces esto es lo que vamos a estar construyendo. A mí me emociona enseñarte este. Saltemos en él a la primera lección. 2. 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 desviarte 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 fuera de la clase. También recuerda compartir tu proyecto también aquí en Skillshare y solo lo revisaré, pero también inspirará a otros estudiantes también. Para obtener 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 subas aquí en Skillshare. 3. Crear la interfaz de usuario: Hey, bienvenidos al inicio de este nuevo juego y esta nueva sección. Esta es una primera mirada a lo que vamos a estar construyendo. Se trata de un juego de números aleatorios, donde el usuario va a generar un número aleatorio entre 1-100, y luego ya sea a 10 intentos o cinco intentos, cualquiera que elija el usuario. Tendremos entonces la oportunidad de adivinar qué número ha generado la computadora. Por lo que el 1-100 es una gama bastante amplia, por lo que durante el juego, también obtenemos algunos punteros, háganoslo saber si estamos demasiado altos o demasiado bajos. Nuestra conjetura de 50 es demasiado alta, lo que significa que nuestro rango actual está ahora en 0-50, y el número está en algún lugar de esta sección. También vemos el número de intentos anteriores en la parte inferior y también hacemos un registro de las conjeturas anteriores para que el usuario sepa cuáles han seleccionado en el pasado. Vayamos por 20, 10, y 1. Ahora, nuestro número está entre uno y 10. Vamos por 5, 2, y ahora tenemos esto en seis intentos. El número fue de dos. Después tenemos la opción de seleccionar un nuevo juego y empezar de nuevo con el modo fácil o el duro. Como siempre, vamos a empezar por crear la interfaz de usuario con HTML. Vamos a crear esta sección aquí, que es un envoltorio, y luego dentro, vamos a crear dos secciones. El primero va a ser el envoltorio para todo lo que veamos en la pantalla de inicio justo aquí, incluyendo el texto y también los dos botones. El segundo apartado va a ser el área de juegos que se ve aquí. Empecemos de nuevo en el escritorio creando una nueva carpeta de proyecto. Queremos llamar a éste Adivina un Número. A continuación, arrastre esto sobre el editor de texto para abrir esto. Podemos o crear un nuevo archivo haciendo clic en este icono justo aquí, o usar Command o Control N para crear un nuevo archivo, que va a ser el index.html. Añadamos alguna estructura HTML a este documento. Voy a utilizar el comando Emmet, que es HTML:5. El título del documento de adivinar un juego de números. Después abajo en el cuerpo, crearemos nuestra sección principal, que es el envoltorio tanto para nuestra pantalla de inicio como también para el área de juegos. Crearemos nuestro div, que va a ser la pantalla de bienvenida. Demos a esto una ID de pantalla de bienvenida, y también justo después de esto, crearemos nuestra segunda sección. Este tendrá una identificación de área de juego. Empecemos en la primera sección, que es la pantalla de bienvenida, y esta es la sección que se ve justo aquí. Empezaremos en la parte superior con un rumbo. Añadamos esto dentro de nuestro primer div. El texto es, adivina el número aleatorio. Entonces vamos a añadir una etiqueta de break, solo para colocar la siguiente línea justo debajo, así que entre uno y 100. Entonces justo después de esto, voy a crear una sección que va a tener el título de dificultad y también los dos botones. El primero va a tener el texto de ajuste de dificultad selecta dentro del elemento P. Seguido de un div que va a ser el envoltorio para ambos de nuestros botones. Dentro de esto en el CSS, vamos a darle a esto una clase, que es igual a button-wrapper, y luego dentro podemos colocar nuestros dos botones. El botón superior es para nuestro ajuste fácil. Podemos agregar el texto de fácil y también 10 intentos. Seguido de un segundo botón, y éste es para el modo duro, y éste son cinco intentos. Abramos esto en el navegador y veamos cómo se ve esto. Copiemos la ruta de nuestro índice, y luego peguemos esto en una nueva pestaña. Una pantalla de inicio bastante simple. Simplemente tenemos nuestro texto y nuestros botones, y luego vamos a bajar a nuestra zona de juegos justo debajo. Si hacemos clic en alguno de estos botones, entonces nos llevan a nuestra zona de juegos, que vamos a empezar a construir ahora. Pero en la parte superior, vamos a empezar con el texto de tu conjetura. Pero si recuerdas desde la demo temprano, también tenemos un botón en la parte superior, que va a estar oculto durante el juego. Esto nos va a permitir iniciar un nuevo juego una vez que el juego haya terminado. El primer elemento que vamos a tener dentro de nuestra zona de juegos será un botón, y lo mostraremos y ocultaremos dentro de nuestro JavaScript. Vamos a crear un ID de nuevo botón de juego. Este botón tenía el texto de nuevo juego. Después de esto, agregaremos una sección que va a ser el envoltorio para texto en la parte superior de tu conjetura y también la entrada. A nivel 3 rumbo con el texto de tu conjetura. Este encabezado de nivel 3 también va a ser reemplazado durante el juego para que el usuario sepa si su conjetura era demasiado alta o demasiado baja. Para ello, también podemos agregar un ID, así podemos etiquetar esto con JavaScript, y la ID que voy a dar esto es salida de texto. Seguido de nuestra entrada justo debajo, con el tipo de número. El ID que va a ser igual al cuadro de entrada, que usaremos más adelante para agarrar la entrada del usuario. Entonces como nuestro juego está entre uno y 100, vamos a sumar los atributos min y max. Por lo que el mínimo de uno y el valor máximo es de 100. Echemos un vistazo. Pero ahora esto también va a estar en la misma página ya que no hemos usado JavaScript para mostrar y ocultar ninguna de estas secciones todavía, pero eso está completamente bien por ahora. De vuelta a nuestra zona de juegos, y justo después de la sección aquí, vamos a pasar a nuestra sección de rango. Tenemos el texto de rango actual. Después actualizaremos nuestra sección justo aquí ya que el usuario agrega conjeturas, y luego también una sección para la barra de progreso. Envolvamos esto en una nueva sección, y el elemento P del rango actual, seguido de un elemento span que va a ser para nuestro texto, que actualmente es 1-100. Este texto también se actualiza durante el juego para que podamos agregar un ID a este lapso. Podemos cambiar esto con JavaScript, y el ID que voy a buscar es la salida de rango. Después de esto, vamos a crear nuestra área de rango. Ahora, esto se va a crear usando un div como envoltorio, y luego anidado dentro, vamos a crear tres secciones. Añadamos algunas conjeturas dentro de aquí. Entonces vamos por 50 y 90. Vamos a tener esta sección verde en el medio, que es el rango actual, en el que se encuentra el usuario en medio. Actualmente, nuestro número está entre 50 y 90, por lo que queremos tener esta sección de espacio justo aquí. Entonces a ambos lados vamos a tener una sección alta y baja para llenar el resto del espacio. Este div aquí es para nuestro envoltorio y le daremos un ID de rango. Después anidados por dentro, vamos a crear tres elementos de span separados. El primero va a ser para nuestra sección baja, y vamos a duplicar esto dos veces más. El medio es nuestra sección verde y llamaremos a este espacio, y luego al final, esto es alto. Esta será nuestra primera sección roja a la izquierda, la sección verde en el medio, y luego la sección roja sobre a la derecha. Nuestra sección final justo en la parte inferior va a ser para nuestras estadísticas. Esto va a ser registrando nuestro número anterior de intentos y también las conjeturas anteriores. El primero de esta sección va a ser estadísticas, y luego anidado por dentro, esto tendrá dos divs. El primer div va a ser por el número de intentos anteriores y le vamos a dar una clase de info, con el texto de número de intentos anteriores. Entonces tendremos un lapso justo después y esto va a ser para este número que vemos aquí. Por ahora, solo agregaremos un valor de cero, y luego lo actualizaremos en JavaScript más adelante seleccionando el ID de intentos. El apartado siguiente sólo va a ser más o menos igual, por lo que podemos copiar esta sección div, pegar esto en. Esto también tiene la misma clase de información, por lo que tiene CSS consistente. Pero esta vez, el texto es tus conjeturas anteriores. El ID también va a ser conjeturas, luego mostrar un guión dentro del navegador. Echemos un vistazo a esto recargando, y esto deja todo nuestro contenido HTML en su lugar, listo para nuestro estilo en el siguiente video. 4. Aplicar estilo con CSS: Ahora vamos a trabajar creando nuestras hojas de estilo dentro de la barra lateral. Un nuevo archivo al lado de nuestro index.html, que vamos a llamar el styles.css. Cierra esto hacia abajo. También podemos vincular esto hacia arriba en nuestro índice dentro de nuestra sección de cabeza. Crear un enlace con el href de styles.css. Empecemos con el HTML dentro de nuestra hoja de estilos. Dentro de aquí vamos a introducir nuestro tamaño de fuente. Voy a establecer el mío para que sea de 10 píxeles, y también un valor por defecto en el peso, y voy a usar 300. Justo antes de seguir adelante y crear el resto de nuestros estilos para este proyecto, voy a introducir algo que puede ahorrar un poco de tiempo. Bueno, este va a ser un plugin llamado Live Server, y esto nos va a ahorrar refrescando el navegador cada vez que hagamos algún cambio. Podemos hacer cambios en nuestro código, guardar el archivo, y esto se actualizará al instante. Esto es completamente opcional. No es necesario instalar este plugin, y si estás usando un editor de texto diferente, es posible que no tengas el mismo disponible. Para introducir esto, tenemos que pasar a la barra lateral. Si estás usando un Código de Visual Studio, haz clic en las “Extensiones”, y luego usa la Búsqueda en la parte superior. Damos una búsqueda del Live Server, y luego dentro de aquí puede tener múltiples opciones. El que estoy usando actualmente es éste justo aquí, y luego necesitarás instalar y habilitar. Una vez que esto esté habilitado, deberías ver un botón abajo en la parte inferior que dice Go Live. Después puede hacer clic en esto para iniciar el Live Server, y esto luego abrirá esto dentro del navegador. Si no ves este icono en la parte inferior, puedes ir a Ver, Paleta de comandos, y luego hacer una búsqueda Live Server donde tendremos las opciones para abrir esto con nuestro Live Server. Esto es completamente opcional y puedes continuar con la misma forma que hemos estado usando anteriormente. Pero ahora si entramos en nuestro próximo [inaudible], que es el cuerpo, voy a poner algunas propiedades dentro de aquí. Establezcamos el ancho de nuestro cuerpo para que sea el 90 por ciento de la ventanilla. Podemos centrar esto con margen cero auto. Entonces voy a establecer un fondo el cual será un gradiente radial. Vamos a usar esto para fundir entre dos colores diferentes. Esto se va a fundir en un movimiento circular desde el centro hasta el final de la página. El gradiente radial va a tomar en dos valores. El primero, voy a usar 343e63, y luego separado por una coma la segunda va a ser 2a3352. Dale a esto un guardado y al instante vemos los cambios dentro del navegador. Después de esto, vamos por nuestra sección principal que es el envoltorio para todo nuestro juego. Podemos crear un envoltorio el cual va a establecer la alineación del texto para que esté en el centro, un fondo-color f8f1e9, un borde que va a envolver nuestro juego a la izquierda, la parte inferior, y también a la derecha. En primer lugar, necesitamos establecer el color del borde y también establecer esto para que sea una línea sólida. Podemos entonces establecer esto para que vaya por tres lados diferentes. Nuestra frontera va a ser una línea sólida, y nuestro color, que va a ser igual a ef7b54. Si guardamos esto, actualmente, vemos que la frontera se coloca en los cuatro lados. Para seleccionar esto en múltiples lados podemos utilizar la propiedad border-width y luego ingresar el ancho queremos el borde en cuatro lados diferentes. El primero es el de arriba. Queremos cero en la parte superior, ocho píxeles en la derecha, ocho píxeles en la parte inferior, y también para la izquierda también. Hagamos que esta sección sea un poco más alta con la altura mínima del 80 por ciento de la altura de la ventanilla. También podemos redondear estas fronteras en la parte inferior izquierda y derecha con nuestro radio fronterizo. El superior izquierdo en la parte superior derecha es cero, luego tres rems en la parte inferior derecha, y también en la parte inferior izquierda. También, un rem de relleno para darle algún espaciado dentro de la sección. El valor text-color que voy a usar va a ser 1f2933. Entonces esta es nuestra sección principal y ahora vamos a apuntar a algunos de los elementos que están anidados por dentro. Empezando en la parte superior de nuestra pantalla de bienvenida tenemos este rubro de nivel 2. Entonces también podemos seleccionar nuestros elementos de texto también. En primer lugar, vamos por nuestro h2. Podemos establecer el tamaño de la fuente para que sea un poco más grande, por lo que 2.2 rems. Además, podemos crear algún espaciado en la parte superior e inferior. Voy a darle a esto un poco de espaciado en la parte superior e inferior, y luego cero en la izquierda y la derecha, luego nuestro texto que está dentro de los elementos p. También podemos aumentar el tamaño de fuente para ser 1.8 rems. Pegándose con esta sección de pantalla de bienvenida, a continuación tenemos este área de botones el cual tiene una clase de botón envoltorio. Actualmente estos dos botones se colocan uno al lado del otro, por lo que podemos cambiar esto configurando el tipo de pantalla para que sea flex, la flex-direction para ser columna. A continuación, podemos apuntar a los botones individuales con el elemento botón. Tengo que mover el borde por defecto con ninguno. También podemos configurar el cursor para que sea un puntero una vez que use un cursor sobre este botón. Entonces el fondo de color para nuestros botones. Vamos por un valor hexadecimal. Este va a ser un color verde con la sombra de 83e1d0. Algún relleno en el interior del botón de dos rems. Entonces vamos a aplicar algún radio fronterizo en la parte superior de nuestro primer botón, y luego la parte inferior de nuestro segundo botón. Esto nos va a dar este efecto redondeado que vemos en los botones justo aquí. Por ahora vamos a apuntar al primer botón dentro de este selector. Podemos establecer el radio fronterizo en la parte superior. Entonces una rem en la parte superior izquierda, una rem en la parte superior derecha, y luego cero en la parte inferior. Actualmente esto se va a aplicar a todos nuestros botones. Ahora podemos anular esto seleccionando al último hijo. último niño va a apuntar al último de todos los tipos de botones, que está dentro de esta envoltura. Si tuviéramos un tercer botón, eso apuntaría al tercer botón, si tuviéramos un cuarto botón, eso apuntaría al cuarto, y así sucesivamente. Sólo tenemos nuestros dos botones, así que último hijo se va a aplicar a este botón duro justo aquí. Podemos anular el fondo, y voy a hacer uso del mismo color rojo que tenemos para esta frontera. También usaremos el mismo color rojo para nuestro deslizador de rango durante el juego también. Esto significa que ahora estamos usando un mismo color varias veces. Podríamos seguir adelante e incluir el mismo color, pero también podemos usar algo que se llama variables CSS también conocidas como propiedades personalizadas. Al igual que cuando se usa JavaScript, podemos usar propiedades personalizadas CSS para crear una variable y usar esta varias veces dentro de todo archivo. De la forma en que podemos hacerlo, si vamos a la cima, voy a crear una sección que va a contener todas nuestras variables. Lo primero que voy a hacer es apuntar a la raíz. Esto nos va a permitir crear nuestras variables que podemos utilizar a través de toda nuestra página. El modo en que creamos una variable dentro de CSS es mediante el uso de los guiones dobles. Después utilizamos un nombre de variable como el verde, y luego podemos seleccionar nuestro valor. El valor verde que estamos usando actualmente es éste justo aquí para nuestros botones. Podemos copiar esto, pegarlo en, y añadir un punto y coma. También podemos declarar nuestro color rojo, que vamos a reutilizar, que tiene un valor de ef7b54. A continuación, también podemos establecer el color para nuestro fondo, así que guión, fondo de tablero, y este va a ser el color para toda la sección principal. El apartado principal, si nos desplazamos hacia abajo, hay uno que está justo aquí, podemos agarrar esto y establecer esto como una variable. Si quisiéramos, también podríamos establecer los colores para nuestros gradientes radiales. Copiemos estos, gradient-1 y también el gradient-2. Ahora tenemos nuestras variables declaradas arriba en la parte superior. ¿ Cómo usamos ahora estos en nuestro proyecto? usamos en lugar de nuestros colores, así que eliminemos estos primeros gradientes radiales. Después ponemos estos dentro de una función var y luego declaramos el nombre que le dimos justo arriba. Este era gradient-1, y entonces el segundo valor va a ser gradiente-2. Nuevamente, dentro de nuestra función var. Guarde esto, y ahora nuestro gradiente, ahora siendo restablecido. Abajo a la sección principal, podemos reemplazar nuestro fondo también por nuestra variable. Tú frontera. También tenemos esto almacenado dentro de una variable, y ésta es de color rojo. Todavía funciona bien dentro del navegador. Ahora si nos desplazamos hacia abajo hasta nuestros botones, tenemos la variable verde, así que dash, dash green. El color de fondo para nuestro último hijo o nuestro segundo botón va a ser la variable roja, que también establecemos justo arriba. El radio fronterizo para esto va a ser diferente también. Podemos anular esto con el frontero-radio estableciendo la parte superior para ser cero y cero, y luego la parte inferior derecha, y también la parte inferior izquierda para ser igual a 1rem. También tenemos el nuevo botón de juego justo aquí, pero lo ocultaremos con JavaScript muy pronto. Ahora hasta la sección de juegos, vamos por nuestro encabezado de nivel tres, que es el texto de tu conjetura. Esto también será reemplazado más adelante para ser un mensaje para el usuario. Todo lo que vamos a hacer para nuestro encabezado de nivel tres es establecer el tamaño de fuente en 2rems. A continuación tenemos nuestra entrada numérica. Esta es la única entrada que tendremos en la pantalla, por lo que no necesitamos ser más específicos sobre la selección del tipo. Todo lo que vamos a hacer es establecer el borde para que sea un píxel. Una línea sólida, que va a ser gris claro. Haremos que se integre con el resto del fondo configurando esto para que sea transparente. Los márgenes dan algo de espacio en el exterior de nuestros elementos de 2rems en la parte superior e inferior y luego cero en la izquierda y la derecha. Acolchado para algún espaciado interno de 1rem, esta es la parte superior e inferior, y luego cero en la izquierda y la derecha. Tu ancho, 16rems. Entonces también podemos configurar el texto alineado para que esté en el centro. Este va a ser el texto que el usuario entre dentro de este campo. Esto empujará esto al centro de nuestros elementos. Debajo de esto tenemos nuestra sección de rango, que es la envoltura, abajo en la parte inferior aquí, que contiene nuestros tres tramos. No vamos a hacer mucho con estos elementos span en el CSS. Dejaremos estos hasta la sección de JavaScript más adelante, pero por ahora sin embargo, podemos establecer la sección de rango para que tenga una cierta altura y también el color de fondo. Este fue un DNI. El tipo de display va a ser el flexbox. Estos aparecerán en toda la página en una fila por defecto. El fondo, para empezar, este será de un color verde completo. Podemos hacer uso de nuestra variable verde. Una altura de 50 píxeles, un valor de relleno de cero, y luego también algún margen. Simplemente voy a establecer el margen para que sea cero en la parte superior y derecha, 4rems en la parte inferior, y cero en la izquierda. Esto es sólo para darnos algún margen inferior. Es esta base desde la sección de inicio justo debajo. A continuación, vamos a hacer un poco más grande el texto del 1-100. Esta sección tiene el ID, que va a ser salida de rango. El tamaño de fuente, 1.6rems, y esto es todo lo que necesitamos hacer actualmente para esta sección de rango. Haremos el resto más en nuestro JavaScript. Abajo de esto, tenemos nuestra sección de estadísticas y esto tiene la clase de estadísticas. Esto es para nuestro envoltorio. Todo lo que vamos a hacer aquí dentro es establecer el text-align para que esté a la izquierda, y luego podremos ocuparnos de nuestras dos secciones dentro. Dentro de nuestro índice o html, dimos a ambas secciones una clase de info. Esto es para que podamos hacer uso del flexbox CSS, igual que en la versión final, donde colocaremos ambos ítems uno al lado del otro. Agregaremos un poco de espaciado en el medio y nos aseguraremos de que estos estén alineados a través de la página. Nuestra info, el tipo de display de flex. Podemos entonces usar el contenido de justificar para agregar el espacio entre. Actualmente, estos no están alineados correctamente en toda la página. Vemos que esto es un poco más alto. Para solucionar esto, alinearemos nuestros artículos en el eje transversal hacia el centro. Tanto este valor de cero como también el guión se contenían dentro de estos elementos span. Para solucionar esto, podemos etiquetar nuestra sección de información y luego cualquier lapso que esté dentro. El tamaño de la fuente, vamos a ir por 1.6rems. Ya casi terminamos por nuestro estilo para este proyecto. Justo antes de terminar, apuntemos este botón justo aquí, que sólo va a aparecer al final del juego. Esto tiene el ID del botón de juego nuevo. Todo lo que vamos a hacer es restablecer el radio fronterizo a cero. Entonces, por último, podemos agregar una consulta de medios para los tamaños más grandes. Nuestros medios, el ancho mínimo de pantalla de 800 píxeles. Lo único que voy a hacer aquí es restringir el ancho del cuerpo cuando esto se haga más grande. En las pantallas más grandes, solo voy a establecer el ancho máximo para que sea el 60 por ciento del ancho de la ventana, solo para que no se vea demasiado sobrecargado. El tramo del cuerpo, podemos establecer el ancho para ser 60vw. Eso es todo ahora para nuestro estilo. Por supuesto, puedes cambiar las cosas si quieres. A continuación, vamos a pasar a nuestra sección de JavaScript y comenzar a manejar la funcionalidad para nuestro juego. 5. El comienzo de nuestro juego: Ahora es el momento de agregar nuestro JavaScript a nuestro proyecto. Encima en nuestro editor de texto, vamos a crear un nuevo archivo en la raíz de nuestro proyecto, llamado el “script.js”. Podemos ir a nuestra página de índice y enlazar esto en la parte inferior, justo encima de la etiqueta de cuerpo de cierre. Entonces el guión y la fuente va a ser igual a nuestro “script.js”. El primero que queremos hacer cuando se carga el juego es generar un número aleatorio, que está entre uno y 100. Podemos activar una función tan pronto como el navegador cargue estos documentos agregando un manejador de eventos onload a la etiqueta body. Tan pronto como la página se haya cargado, podemos activar una función y voy a llamar a esto “init”. Esto está inicializando efectivamente nuestro juego tan pronto como se carga el navegador. Pasando a nuestro script.js, ahora podemos crear una variable para almacenar este valor dentro. Voy a llamar a esto el “ComputerGuess”. He declarado esto fuera de una función, por lo que está disponible para su uso en cualquier otra función. Si declaráramos esto dentro de una función, esta variable sería alcanzada a esa función en particular. decir, no pudimos acceder a ella en ninguna otra parte de nuestro programa. Vamos a crear nuestra función, que va a ser nuestra función init. Esto no toma en ningún parámetro. Entonces necesitamos configurar nuestro ComputerGuess para que sea igual a nuestro número aleatorio. Podemos hacerlo seleccionando la Math.Random, que seleccionará un número entre cero y uno. Queremos que esto sea entre uno y 100. Por lo tanto, podemos multiplicar esto por 100. Esto ahora nos dejará con un número aleatorio, que comienza con un cero, todo el camino hasta el 99. No obstante, queremos que esto sea entre uno y 100, por lo que podemos sumar uno al final. También necesitamos que esto sea redondeado, para que podamos redondear esto con Math.Floor. Pongamos esto en su lugar y podemos hacer uso del método Math.Floor y luego pasar en nuestro número. Esto redondeará a cada uno de nuestros números por lo que tenemos un número entre uno y 100. Vamos a probar si esto está funcionando. Podemos registrar el ComputerGuess y esto debería cargarse cada vez que comience el navegador. Tenemos un error. Por lo que inits, tenemos que asegurarnos de que esto se deletree correctamente. Ahora, cada vez que recargamos el navegador, obtenemos un número aleatorio. Podemos ver esto dentro de la consola. Este es un buen comienzo para nuestro proyecto. Lo siguiente que tenemos que hacer es mostrar y ocultar algunos elementos en la pantalla. Cuando esta página se carga por primera vez, no necesitamos ver el nuevo botón de juego, solo va a estar ahí al final de nuestro juego. Entonces vamos a quitar esto. Selecciona nuestro documento por el ID, y el ID que queremos seleccionar es el “NewGameButton”, que podemos ver justo aquí. Voy a mover esto estableciendo la propiedad de estilo CSS de visualización para que sea igual a un valor de cadena de “none”. Por lo que ahora nuestro botón se retira tan pronto como el juego se carga y también queremos eliminar esta zona de juegos también. Entonces vamos a duplicar esto. Pero esta vez el ID que queremos seleccionar va a ser igual a esta zona de juegos. Quizás estés pensando, ¿por qué no sólo esconder el área de juegos, que también incluye el botón? Bueno, esto es porque más adelante en el juego una vez terminado, aún necesitamos mantener esta zona de juegos en su lugar, pero vamos a reinstalar el botón. El ID que quieres seleccionar es el “GameArea”, que ahora nos deja con la pantalla de inicio. Bien, ahora tenemos un número aleatorio. Ahora estamos escondiendo el área de juegos. A continuación, necesitamos crear una función para realmente iniciar el juego. Esto va a implicar ocultar esta pantalla de bienvenida. Después mostrando el área de juego que acabamos de quitar, que efectivamente nos dará dos pantallas. Para ello, crearemos una función y queremos llamar a esto el “StartGameView”. Una vez que el juego ha comenzado, queremos quitar u ocultar esta zona. Si volvemos a nuestra página de índice, esta zona cuenta con el ID de “WelcomeScreen”. Por lo que document.getElementById. Queremos seleccionar la pantalla de bienvenida. Al igual que un [inaudible] hacer uso de la propiedad style de display y establecer esto igual a “none”. Duplicar esta línea y lo siguiente que tenemos que hacer es reinstalar el área de juegos, que hemos tenido justo arriba. Por lo que cambia al área de juego y para que esto aparezca en la pantalla, necesitamos cambiar el tipo de pantalla para que sea “bloque”. A continuación, necesitamos una forma de llamar realmente a esta función una vez que comience el juego. Bueno, la forma en que vamos a hacer esto es usando nuestros botones fáciles y duros. Por ahora, ambos botones, simplemente vamos a llamar a la misma función, pero la cambiaremos más adelante para que el usuario solo tenga cinco o 10 intentos. Vamos a crear nuestras funciones. Nuestra primera función va a ser para el modo fácil. Entonces nuestra segunda función va a ser para el modo duro. Todo esto va a hacer es simplemente llamar a nuestra función “StartGameView”. Por lo que podemos sumar estos a ambas funciones. Ahora para llamar a estas funciones, lo hacemos en nuestra página de índice. Vamos a nuestros botones y lo agregaremos en el manejador de eventos de click. Una función a la que queremos llamar una vez que se ha hecho clic en el botón es el modo fácil. El segundo botón va a activar la función de modo duro. Ahora deberíamos poder jugar a este juego dentro del navegador. Vamos a dar click en fácil. Esto ahora oculta la pantalla de bienvenida y muestra el área de juegos. Recarga esto por el botón duro. Esto también nos lleva a la sección de juegos 2. Ahora, tenemos una manera de comenzar nuestro juego. En el siguiente video, vamos a pasar a capturar la entrada del usuario y también a comparar esto con nuestro número aleatorio. 6. Captura de la información del usuario y comparación: Ahora tenemos un número aleatorio generado y almacenado dentro de nuestro ComputerGuess. También vamos a capturar la entrada del usuario, que agregan a este campo numérica. Ya que va a ser múltiples opciones, vamos a almacenar esto dentro de una matriz. Entonces diremos que nuestros UserGuesses sean iguales a una matriz vacía para comenzar, y luego podemos desplazarnos hacia abajo y crear una función que va a comparar la conjetura del usuario con el número aleatorio. Esta función se va a llamar CompareGuess. El punto va a ser agarrar la entrada del usuario de este cuadro dentro de nuestra página de índice. Esta entrada tiene el ID de InputBox. Vamos a agarrar esto con “document.getElementById”. Entonces podemos seleccionar el valor al que ingresa el usuario. Al igual que al principio, también necesitamos convertir esto en un número, para que podamos cortar esto. Podemos usar la función numérica y luego pegar esto en. Por último, podemos almacenar esto dentro de una constante llamada UserGuess. Ahora tenemos esta conjetura. Lo siguiente que queremos hacer es empujar esto a nuestra matriz de conjeturas de usuario. Accedamos a nuestra variable, y luego podemos empujar un nuevo valor a nuestra matriz. El nuevo valor es nuestro UserGuess. Para comprobar que esto está funcionando, también podemos mostrar esto dentro de nuestra interfaz de usuario en nuestro index.html. Abajo en la parte inferior, tenemos esta sección de conjeturas, que va a dar salida a cualquier conjetura previa. De vuelta a nuestra función, vamos a agarrar esta por el ID, y luego configurar el innerHTML para que sea igual a UserGuesses. Con esto ahora capturado, lo siguiente que tenemos que hacer es llamar a nuestra función CompareGuess en nuestro index.html. Echemos un vistazo a nuestro insumo, que está justo aquí. Podemos llamar a nuestra función cada vez que el usuario agrega un número y luego pulsa enter agregando el manejador de eventos onchange. El nombre de la función es CompareGuess. Pasado al navegador y podemos comprobar que esto está funcionando. Inicia nuestro juego, agrega los valores de 40, 89, y ahora nuestras conjeturas se muestran en la parte inferior. Hay varias formas diferentes en las que podemos agregar un espacio entre cada una de estas, pero una forma realmente sencilla de hacerlo es pasando a nuestro guión. Podemos crear un espacio con una cadena vacía, y agregar esto a nuestra conjetura. Ahora si sumamos un número aquí dentro, 45, 78, estos ahora tienen un espacio antes de cada número. Ahora estamos en una posición donde tenemos el número aleatorio y también el usuario conjetura. Ahora necesitamos una forma de comparar estos dos valores y comprobar si son correctos. Hagámoslo en la función CompareGuess. Vamos a crear tres resultados diferentes. El primero, vamos a comprobar si la conjetura del usuario es mayor que la conjetura de la computadora. Después añadiremos una segunda condición de “else if”, y esto comprobará si la conjetura del usuario es menor que la conjetura del equipo. Por último, agregaremos una sección “else”. Es solo para si la conjetura del usuario es igual a la conjetura de la computadora. En primer lugar, tratemos con que el usuario conjetura ser demasiado alto. Ahora, todo lo que vamos a hacer es emitir un mensaje al usuario, así que “document.getElementById”. Un ID que queremos agarrar es nuestra salida de texto. Este es nuestro nivel tres rumbo arriba en la parte superior el cual va a reemplazar el texto de tu conjetura. Para ello, establecemos el innerHTML, y puede ser una cadena de textos que diga: “Tu conjetura es demasiado alta”. También necesitamos borrar esta entrada de formulario. Actualmente, cuando agregamos el valor dentro de aquí y luego golpeamos enter, el valor todavía se queda dentro de aquí. Entonces volvamos atrás y añadamos esto dentro de la sección “if”. Actualmente, tenemos el cuadro de entrada justo aquí. Entonces podemos agarrar esta línea de código justo aquí, traer esto, y podemos establecer el valor para que sea igual a una cadena vacía. El siguiente apartado que es el “else if”, esto va a comprobar si la conjetura del usuario es demasiado baja. Podemos prácticamente hacer lo mismo dentro de esta sección, nuestro mensaje va a ser demasiado bajo. Por último, en la sección “else”, también podemos añadir esto en. No necesitamos restablecer el campo de entrada ya que el juego ha terminado. Todo lo que necesitamos hacer es establecer un mensaje que va a ser “Correcto”. Ahora podemos seguir adelante y probar esto dentro del navegador. Pero justo antes de que lo hagamos, agarremos nuestro ComputerGuess y ahora podemos poner esto dentro de la consola. Hagámoslo en la función “init”, así lo vemos en cuanto se carga nuestro juego. Tenemos nuestra conjetura de computadora que está justo aquí. Hagamos un registro de consola con este valor. Pasando al navegador, ahora podemos hacer clic derecho y “Inspeccionar” para abrir la consola. Ahora tenemos un valor de 83. Vamos a dar click en fácil. Si bajamos digamos 10. Ups, dice que es correcto, así que veamos qué hemos hecho. Volver a nuestra función. Entonces cuando el UserGuess es mayor que el ComputerGuess, UserGuess, éste para ser un ComputerGuess. Probemos esto una vez más. Tenemos un valor de 25. Entonces vamos a bajar, diremos 10. Tu conjetura es demasiado baja. Ahora iremos por 50. Tu conjetura es demasiado alta. Probemos 25, y obtenemos el mensaje de correcto. Ahora hemos comparado con éxito la conjetura del usuario con el número aleatorio. 7. Registro de intentos anteriores: Pasemos ahora a registrar el número de intentos de los usuarios. Ahora la razón por la que estamos haciendo esto es porque tenemos un modo fácil y el duro para comenzar nuestro juego. Una vez que el usuario alcanza ya sea cinco intentos o 10, así es como sabemos que el juego ha terminado. También podemos registrar este número de intentos justo aquí también, por lo que también puedes ver hasta qué punto estás en el juego. Para ello, vamos a crear una variable arriba en la parte superior de nuestro script llamarlo intentos, e inicialmente establecemos esto para que sea cero. Después de esto, entonces tendremos que aumentar este valor uno cada vez que el usuario haya introducido algo en el campo de entrada. Abajo a nuestra función CompareGuess, ve a establecer esto solo para nuestras declaraciones if. Tenemos que incrementar esta variable intentos por uno cada uno algunos el usuario ha hecho una conjetura. Podemos hacer esto con intentos++, y esto incrementará el valor actual en uno. Actualmente este es valor cero y para cada conjetura irá a uno y luego a dos y así sucesivamente. Entonces necesitamos actualizar el DOM, que es nuestra sección justo aquí. Si vamos a nuestra página de índice y luego nos desplazamos hacia abajo, necesitamos actualizar el lapso con el ID de intentos. Vamos a agarrar esto por el ID y luego establecer el HTML interno para que sea igual a nuestra variable que es intentos. De acuerdo, vamos a intentarlo, si vamos al modo fácil para empezar, tenemos 10 intentos a esto, que podamos sumar cualquier número aquí dentro. Esto se incrementa con cada conjetura. Nos aseguraremos de que el jugador no pueda ir por encima del máximo número de intentos muy pronto. Pero por ahora sin embargo, simplemente vamos a actualizar el mensaje al usuario. Dentro de la sección else justo aquí, es cuando consiguen su conjetura correcta. También podemos agregar a esta sección y hacerle saber al usuario cuántos intentos lo consiguieron correcto. Podemos decir que lo conseguiste, y luego agregar nuestra variable de intentos, y luego también agregar al final una cadena de intentos. Por ejemplo, esto diría que lo conseguiste en cuatro intentos y así sucesivamente. Vamos a darle una oportunidad a esto, vamos a probar el ajuste fácil y ver si podemos conseguir es correcto, así que estamos demasiado altos, 30, 10, 20, 15, 12, y ahí vamos. El número correcto fue 14 y lo tenemos en octavo intentos. Bien. Con esto ahora todo funcionando. Pasemos ahora a añadir nuestra configuración de dificultad en el siguiente video. 8. Añadir ajustes de dificultad: Sobre nuestros botones fáciles y nuestros hardball. Ahora vamos a restringir el número de conjeturas que el usuario puede hacer para ser ya sea 10 o cinco. En primer lugar, subamos a la parte superior de nuestro guión, y vamos a crear una variable para empezar. Voy a llamar a esto los MaxGuesses, y esto se va a poner inicialmente no a ningún valor en particular. Es simplemente porque queremos que esto sea establecido cinco o 10 dependiendo de qué botón presione el usuario. Podemos hacer éste cuando iniciamos ya sea la función de modo fácil o la función de modo duro. El modo fácil, vamos a establecer las conjeturas máximas para que sean iguales a 10, y luego en el modo duro, estableceremos que esto sea cinco. Ahora tenemos toda la información que necesitamos. Tenemos esta variable de intentos justo aquí, que es el número de intentos que ha tenido el jugador. También tenemos la variable máxima. Ahora podemos comparar estos para comprobar si el usuario puede seguir adelante, o si el juego ha terminado. Hagámoslo. Bajemos a nuestra función donde pondré el mensaje al usuario. Se trata de CompareGuess, y sólo queremos seguir adelante y ejecutar esta sección si el número de intentos es menor que el número máximo de conjeturas. Pongamos todo esto en su lugar, y creamos una nueva declaración if, que va a comprobar si los intentos es menor que el número de todos los MaxGuesses. Dentro de los tirantes rizados, ahora podemos pegar en la sección. Esta sección if sólo se ejecutará si no han alcanzado el número máximo de conjeturas. Si han alcanzado el máximo, este es, por tanto, el último intento. Para manejar esto, podemos crear una sección else justo después de esto. Esta sección más es el último intento, por lo que este podría ser el décimo intento o el quinto intento en modo duro. A pesar de que este es el último intento, todavía queremos decidir si los jugadores obtuvieron el número correcto o no. Podemos hacerlo agarrando esta misma sección que la anterior, y sólo podemos alterar los mensajes. Asegúrate de agarrar todo dentro de la sección if, por lo que el otro, si, en la sección if. Vamos a copiar esto. Agrega esto a nuestra nueva sección else. Ya que este es el último paso, si la conjetura del usuario es demasiado alta, vamos a cambiar este mensaje que se muestra. Vamos a decir que pierdes. Después puedes agregar una etiqueta de break para agregar esto a la siguiente línea, el texto del número era, luego dejamos que la variable de adivinar computadora al final para que el usuario sepa cuál era el número. No necesitamos restablecer el cuadro de entrada ya que esta es la última conjetura. También podemos quitar esto de la sección else if y luego cambiar el mensaje dentro de aquí también. Esta otra sección si es cuando la suposición del usuario es demasiado baja, lo que significa que también han perdido el juego. Podemos agarrar este mismo mensaje exacto desde arriba, y luego reemplazar este justo dentro de aquí. El tercer estado es cuando el jugador tiene el número correcto, por lo que podemos dejar este mensaje tal como está. Demos a esto un juicio. Vamos a que empiece el modo duro. Tenemos cinco intentos. Cincuenta, demasiado bajo, 80, demasiado alto, 87, 85, y hemos perdido el juego en cinco intentos. Restablecer y volver al modo fácil. Probemos esto, demasiado alto. Una vez que llegamos a 10 intentos, este juego también ha terminado. Esto ahora pierde con un modo fácil, y duro que funciona completamente. 9. Manejar el final del juego: Hay un par de cosas que ahora tenemos que hacer para manejar el final del juego. Cuando vemos el final de la pantalla del juego y al igual que lo hacemos encima a la derecha. También queremos reintroducir nuestro NewGameButton. Esta es una más en nuestro index-html. Este justo aquí, que básicamente va a refrescar el navegador, luego podamos seleccionar nuestro modo de juego. También vamos a asegurarnos una vez que el juego haya terminado, que la jugada ya no pueda agregar ningún valor a este campo de entrada. Si seguimos entrando aquí, todavía podemos ingresar valores, y todavía están anotados como nuestros intentos anteriores, y también empujados a la matriz. Para ello, vamos a pasar a nuestro guión y crear una función de fin de juego. Por encima, justo debajo de nuestras variables es donde quiero crear las mías. El nombre de la función de GameEnded. paso 1 va a ser volver a introducir nuestro NewGameButton. Índice, este es el ID de NewGameButton. Podemos hacerlo restableciendo el tipo de pantalla. Justo debajo de aquí, configuramos este NewGameButton para que sea el tipo de visualización de ninguno. Copiemos esta línea y añadamos esto a nuestra función GameEnded. Todo lo que necesitamos hacer es cambiar el tipo de visualización para que esté en línea. Justo después de esto, también vamos a agregar un nuevo atributo a este campo de entrada por lo que este es uno justo aquí. Vamos a establecer que esto sea de sólo lectura tan pronto como termine el juego, por lo que el usuario ya no puede ingresar ningún nuevo valor. El primer paso es agarrar estos elementos y la identificación, por la que vamos a agarrar esto. Aquí está nuestro InputBox. Podemos ver esto más en nuestra página de índice. Esta es nuestra entrada y el ID de InputBox y para agregar un nuevo atributo a nuestros elementos, podemos usar un método llamado setAttributes. El primero que necesitamos ingresar es el nombre del atributo, que es de sólo lectura. Voy a establecer esto en un valor de solo lectura. Ahora necesitamos llamar a esta función de fin de juego una vez que completemos el juego. Desplázate hacia abajo hasta nuestra función CompareGuess, que acaba de estar aquí, y nuestro juego ha terminado efectivamente en cualquiera de estas secciones donde llamamos ya sea correcto o pierdes. A partir de arriba, la primera sección correcta o pierdes es ésta que acaba de aquí. Podemos entonces llamar a nuestra función GameEnded. Copiemos esto y sigamos bajando. También tenemos sección PIERDA aquí, lo que significa que el juego ha terminado. También podemos llamar a nuestra función, tenemos una sección TI PIERDAS. Se acabó el juego, y finalmente, tenemos una sección correcta abajo en la parte inferior donde podemos llamar a la misma función. Pasado al navegador, y vamos a echar un vistazo a esto. Iremos por el modo Hard, e ingresemos rápidamente cualquier valor usado para terminar nuestro juego. Perdemos, vemos el nuevo botón de juego, y ahora ya no podemos tener ningún nuevo valor en nuestro campo de entrada. No obstante, ahora si tratamos de hacer clic en el botón nuevo juego, no vemos que pase nada dentro del navegador. Todo lo que vamos a hacer con este botón es habilitarlo para recargar el navegador, que nos va a llevar de vuelta a la pantalla de inicio. Encima en nuestro index.html, podemos agregar onclick manejador de eventos a este botón. En la etiqueta de apertura onclick. Voy a poner esto a una nueva función llamada NewGame. Volver a nuestro guión. Añadamos esto justo en el GameEnded. Esto fue NewGame, y la forma en que podemos volver a cargar el navegador dentro de nuestro código es seleccionando la window.location, luego llamar a un método llamado recargar. Comprobemos si esto está funcionando y terminemos nuestro juego. En cualquier valor aleatorio dentro de aquí, ahora vemos la pantalla final. Da click en el NewGame, y ahora lo llevamos a la pantalla de inicio. 10. Creación de la sección del rango: En nuestro índice o página HTML, creamos esta sección de rango desde un principio. Ahora, esto te va a actualizar y otra vez para mostrarle al jugador, el rango de números que les queda para elegir. Esto lo vamos a hacer actualizando estas tres secciones. Estaremos usando JavaScript para configurar el CSS como el margen, y también el color de fondo, archivo de script O2O y ahora podemos configurar esto. El primero que quiero hacer sobre la parte superior es establecer dos nuevas variables. Estas variables van a ser las bajas y también las altas, y éstas se van a actualizar durante el juego. Cuando comenzamos nuestro juego por primera vez, el valor bajo es uno, y el valor más alto es 100. Vamos a configurar estos valores predeterminados, máximo de 100s. Es un mango, toda esta funcionalidad, vamos a crear una nueva función, y esto se va a llamar UpdateRange. Para actualizar nuestro slider de rango, necesitamos acceder a las tres de estas secciones. Vamos a recortar estos primero por el ID, entonces getElementById. El primero fue bajo, y así lo está dentro de una constante llamada LowValue. Podemos adjudicar esto dos veces más, y la segunda es el espacio. Este es el espacio entre los valores alto y bajo. El tercero es alto. esto lo llamo el HighValue. Tanto este LowValue como el HighValue serán las zonas rojas que podemos ver si entramos al juego. Esta será la sección baja sobre la izquierda, y luego actualizaremos la sección más alta sobre la derecha. Este espacio en medio es el área que el usuario todavía tiene que elegir, y ésta va a ser una sección verde. Para ello dentro de nuestro script, vamos a actualizar estos valores CSS del flexbox, y también el color de fondo. Para hacer un espacio para la sección baja del lado izquierdo, hay que tener en cuenta el valor de bajo, y podemos usar esto como porcentaje para establecer el valor flex. Recuerda al usar el flexbox, si las tres secciones tuvieran igual valor de uno, todas tratarían de ocupar una cantidad igual de espacio. No obstante, este apartado no va a ser igual ya que va a estar basado en nuestras variables. Empecemos con nuestra variable lowValue, podemos establecer la propiedad de estilo o flex, y esto va a ser igual a nuestra variable baja, y como esto es CSS, también necesitamos agregar una cadena al final, que es el símbolo de porcentaje. Esto también sería lo mismo para cualquier sobrevalor también, como un píxel. También vamos a darle a este LowValue un color de fondo también. Establece el fondo oscuro estilo para que sea igual a nuestro color de fondo, que va a ser ef7b54. Vamos a hacer algo bastante similar para nuestras próximas dos secciones, así que vamos a copiar estas dos secciones de estilo. Voy a pegar esto justo debajo de nuestro espacio, y también la sección alta. El apartado de espacio va a ser todo en el medio. Para obtener este valor, vamos a acceder a la variable alta, y quitarle el bajo que nos va a dar el espacio entre. El fondo va a ser nuestro color verde que es el valor de 83e1d0. El final es este valor de alto hacia abajo en la parte inferior. Ahora bien, no podemos simplemente generar el valor de alto. Ahora bien, esto es porque si echamos un vistazo a nuestra barra de progreso, si la suposición alta de los usuarios por ejemplo es de 70. Si agregamos esto como un valor de 70, esto creará una sección roja todo el camino desde la izquierda, a la derecha hasta el 70 por ciento. No obstante, ya tenemos las secciones bajas y el espacio intermedio, así que si esto iba a ser un valor de 70, único que queremos hacer es crear una sección roja para el 30 por ciento restante justo al final. El modo en que podemos hacerlo es quitarle esto a un 100, y esto nos dará el espacio restante para llenar la sección roja justo al final. Ya tenemos este color rojo establecido desde antes, por lo que ahora podemos guardar esto, y luego llamar a esta función cada vez que el usuario haga una conjetura. Nuestra función es UpdateRange. Podemos llamar a esto después de cada adivinación abajo en nuestra función CompareGuess. Esta es nuestra CompareGuess, así que vamos a seleccionar el abierto entre paréntesis, y vamos a llamar a esto justo después de que esto se cierre. Si ahorita guardo este archivo y nos doy una oportunidad, eso son valores dentro de aquí, ves que nada funciona correctamente todavía. Esto se debe a que estamos confiando tanto en las variables altas, como también en las bajas arriba en la parte superior, pero aún no hemos actualizado esto con la conjetura del usuario. Podemos actualizar estos dos valores, retroceder en nuestra función CompareGuess. El primero si sección, aquí facturamos si la conjetura del usuario es demasiado alta. Por lo tanto, podemos actualizar nuestra variable alta con el valor de la conjetura del usuario. Debajo de esto, dentro de nuestra sección else if, esto es cuando la conjetura del usuario es demasiado baja. Por lo tanto, podemos actualizar nuestra variable baja para que sea igual a la conjetura de nuestros usuarios. Guardemos este archivo y probemos esto de nuevo en el navegador. Agrega cualquier valor dentro de aquí, y aún no vemos una actualización, así que vamos a echar un vistazo a esto. Obtenemos la sección alta si la conjetura del usuario es demasiado alta. Si es demasiado bajo, obtenemos en la sección baja. Vayamos a nuestra función. La mitad de nuestra variable, UpdateRange. Podemos ver desde el editor de texto que nuestro espacio, y también las variables HighValue no se están utilizando, así que cambiémoslo para que sea espacio, y también el mismo justo debajo. Estos dos deberían ser de alto valor, y supongo que este es uno de los inconveniente de copiar y pegar, así que vamos a guardar esto, y darnos una oportunidad en el navegador. Agrega cualquier valor dentro de aquí, así que 10, y el primer 10 por ciento ahora es nuestra sección baja, intentémoslo a un valor alto de 90. Este llena el último 10 por ciento, dándonos el rango intermedio. Vamos por 50, esto ahora se cierra. Esto es prácticamente todo funcionando correctamente pero hay un pequeño problema. Actualmente, nuestro valor más alto es de 90, pero si añadiéramos un HighValue como 99, vemos ahora nuestro rango aumenta. Cuando agregamos un valor más alto, no queremos que nuestro rango esté aumentando, queremos seguir con el máximo anterior que era de 90. Puede sonar un poco confuso, pero sólo queremos actualizar la variable alta si fue menor al máximo anterior. Volver abajo a nuestra función de comparación, cuando establezcamos nuestro máximo, vamos a crear un if saving, que va a comprobar si nuestra conjetura de usuario es menor que el máximo anterior. Si lo es, entonces estableceremos nuestra variable. Esto detendrá cualquier caso igual que antes cuando nuestro máximo anterior era de 90, y luego el usuario conjetura era de 99, y una declaración if como esta evitará que esto suceda. Pasará lo mismo si volvemos por la sección baja, si tienes un mínimo de 50, esto ahora nos da nuestro rango de uno a 50, vamos por nuestros 30, 10. Ahora, nuestra sección baja está entre uno y 10. Si tuviéramos que sumar un valor menor como cinco, de nuevo, sucede el mismo problema, esto va más amplio mientras queremos que esta estancia sea exactamente igual. Justo debajo donde actualizamos nuestra sección baja, también podemos agregar una declaración condicional. Sólo queremos que esta variable se actualice si la conjetura del usuario es mayor que el mínimo actual. Démosle una prueba a esto. Vamos por un 10 como 90. Ahora, vamos por la sección baja si hacemos esto más bajo como cinco, esta sección roja se queda exactamente donde está. Intentaremos ir más alto, así que 95, y todo esto ahora parece funcionar correctamente. Nuestra sección de lluvias casi ya está hecha y lo siguiente que hay que hacer es actualizar también el texto dentro del centro. Este es nuestro rango actual de uno a 100s. También queremos actualizar esto durante el juego. También vamos a empujar esto hacia la izquierda o hacia la derecha para estar por encima de nuestra sección verde. El lugar al que vamos a hacer esto está de vuelta dentro de nuestra función de rango de actualización. Desplácese hacia arriba. Podemos entonces seleccionar esta sección la cual se envuelve dentro del lapso con el ID de salida de rango. El primer paso es agarrar esto. Conseguiríamos elemento por identificación. Almacenemos esto dentro de una constante llamada salida de rango. Queremos ahora agarrar esta salida de rango y luego actualizar el HTML para ser los nuevos valores actualizados. Usemos el tick de atrás para que podamos crear una cadena de plantilla, que nos permitirá insertar algunas variables en nuestra salida. A la primera variable le agregamos dentro del símbolo $ y las llaves. Este es un valor de bajo, que se establece justo arriba, el guión, se agrega un símbolo $ y luego podemos insertar nuestra variable alta dentro de las llaves. Después vamos a hacer que esta sección se mueva a la izquierda o a la derecha, para estar justo encima de nuestra sección verde. El modo en que podemos hacerlo es estableciendo el margen a la izquierda y también a la derecha. El margen de la izquierda va a ser el mismo nuestra sección baja y el margen de la derecha va a ser igual a nuestra sección alta y sólo asegúrate de que esto se tenga en el texto. Esto establecerá esto como un valor de texto de nuestro elemento. Nuevamente, vamos a seleccionar nuestra salida de rango y vamos a empezar con la propiedad de estilo que va a ser margin-left. Al configurar cualquier propiedad de estilo usando JavaScript, no usamos guiones como haríamos con CSS. En cambio, establecemos esto como CamelCase, por lo que la primera palabra de margen es todo minúscula y luego cada palabra justo después de esto comienza con una letra mayúscula. Así como mencioné, vamos a establecer que esto sea exactamente lo mismo que nuestro bajo valor. Entonces pondremos nuestro margen a la derecha. Al igual que arriba estableceremos el estilo, pero esta vez el margen de la derecha y esto es lo mismo que nuestro valor flex, así que copie esto y probemos esto. Entonces 10, 90, esto es igual, entonces nuestro texto está ahora en medio. Probemos 50 y 70, 85, y cada vez que actualizamos nuestro rango, esto ahora se empuja justo por encima de nuestra sección verde. Bien. Esta es la sección de rango ahora terminada y el toque muy final que voy a hacer a este proyecto también es hacer flash esta sección numérica. El modo en que podemos hacer esto es agregar una animación a nuestra salida de rango y luego establecer esto dentro de nuestro CSS. Esto va a ser razonablemente sencillo. Todo lo que vamos a hacer es agregar una nueva clase y podemos establecer esta propiedad usando una lista de clases. La lista de clases tiene un método llamado add, que nos permitirá añadir una nueva clase, que vamos a llamar flash. Entonces podemos usar esto más en nuestro styles.css. Fuera de nuestra consulta inmediata, igual que con cualquiera de la clase, nos dirigimos a esto con el punto y luego dentro de aquí podemos configurar nuestra animación. Nuestra animación va a hacer uso de la regla de fotogramas clave, por lo que podemos establecer nuestros fotogramas clave y esto nos va a permitir establecer exactamente qué propiedades CSS queremos agregar o eliminar como cada etapa de nuestra animación. El nombre de la animación va a ser igual a flash y luego dentro aquí podemos establecer exactamente ambas reglas CSS. Queremos aplicar en diferentes porcentajes, lo que al cero por ciento, que es el mismo inicio, podemos establecer la opacidad para que sea un valor de uno y un valor de uno no es transparente en absoluto, esto es totalmente opaco. Es exactamente cómo se pretende que se vea el elemento. No obstante, al 50 por ciento o a la mitad de esta animación, entonces vamos a reducir esta opacidad para que sea igual a 0.5. Zero sería totalmente transparente o totalmente transparente. Entonces este es un valor a mitad de camino. Entonces al final de nuestra animación, podemos establecer el valor del 100 por ciento para volver a un valor de uno. Ahora tenemos este nombre de animación de flash, ahora podemos establecer esto. También voy a configurar esta animación para que sea de más de un segundo y también ponerla como infinita para que nuestra animación siga funcionando dentro del navegador. Guardemos esto y probemos este modo o fácil y si vuelve a arrancar, ahora se ha agregado la clase y podemos ver que nuestra animación ya ha entrado en vigor. Enhorabuena, ya has llegado al final de este proyecto y te veré en el siguiente. 11. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo hayan disfrutado y obtengan 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. Gracias una vez más, buena suerte. Esperemos que te vuelva a ver en una futura clase.