Entonces, para asegurarnos de que la computadora realmente pueda terminar ese juego y adivinar el
número correcto, necesitamos verificar qué adivinó la computadora y luego terminar el
juego si es el número que ingresamos. Para eso, podemos usar otro gancho React y ese es el gancho useEffect.
useEffect le permite ejecutar efectos secundarios o, en general, le permite ejecutar la lógica después de cada ciclo de renderizado y, tal como
se mencionó anteriormente, si todo esto de React Hooks es relativamente nuevo para usted, definitivamente
revise algunos recursos dedicados de React Hooks o sumérjase en mi Reacciona el curso guía
completo donde cubro los ganchos en detalle. Entonces, lo que haré con useEffect ahora es que lo llamaré aquí
después de inicializar mi estado y mis referencias aquí y allá, tenemos una función, por lo que useEffect toma una función y esta función se ejecuta por
defecto después de cada ciclo de renderizado para este componente Entonces, cada vez que se ha
procesado, esta función se ejecuta, después de que se ha procesado, eso
también es importante, no antes, no simultáneamente, después.
Ahora, quiero comprobar si la computadora de conjetura actual creada es igual a la elección del usuario porque eso significa que
el juego ha terminado.
Ahora, ese no puede ser el caso para el primer ciclo de renderizado, por supuesto, porque excluimos la
elección del usuario de los números adivinables, pero a partir de
la segunda fila en adelante, por lo que una vez que hicimos clic en mayor o menor por primera vez, eso puede suceder.
Entonces, allí, quiero disparar un mensaje y
el juego ha terminado y enviarlo a la aplicación. js para que podamos cambiar la pantalla del juego por un juego
sobre la pantalla.
Ahora no tenemos esa pantalla todavía, así
que agreguemos, agreguemos un juego sobre la pantalla aquí en la carpeta de pantallas y creemos una muy simple por ahora, la
ajustaremos más tarde. Allí, simplemente
tendré una vista y un texto y una
hoja de estilo, por lo que normalmente importamos de React Native y luego tenemos el componente de juego sobre pantalla que toma algunos accesorios
y luego devuelve algunos jsx al final.
Aquí tenemos estos estilos con Stylesheet. creamos y luego exportamos el juego a la pantalla por defecto.
Ahora, como dije, quiero mantener esto simple por ahora, solo tendré una vista allí con un texto del
juego terminado y publicaremos más detalles allí más adelante. Por ahora, aquí solo asignaré un
estilo, mi estilo de pantalla que agregaré a este objeto que pasamos a la hoja de
estilo
aquí en la parte inferior, establezca flex en 1 y tal vez justifique el contenido al centro y luego alinee los elementos al centro, para
que este texto esté centrado por el momento.
Ahora tenemos el juego sobre la pantalla y queremos representarlo en lugar de
la pantalla del juego si el juego ha terminado. Entonces volvamos a la aplicación. js e importa el juego sobre la pantalla desde
la carpeta de pantallas y desde el juego sobre la pantalla
y la pregunta ahora es, por supuesto, ¿cuál es nuestra condición para renderizar esto? Bueno, al final, necesitaremos una información adicional de todos
modos y esa es la
cantidad de rondas que le tomó a la computadora para terminar el juego.
Entonces, una cosa que quiero almacenar aquí en el componente de la aplicación es otro estado que administro y
esa es la cantidad de rondas que tardó en finalizar, que es cero inicialmente porque aún no hemos
comenzado el juego y
nombraré estas rondas de adivinanzas y establece rondas de adivinanzas y puedes nombrar esto como quieras.
Ahora el objetivo es establecer esto cuando el juego termine.
Entonces, para eso, también agregaré otra función aquí al componente
de la aplicación, game over handler y allí, quiero obtener mi número de rondas como argumento, por lo que espero
obtener esto aquí para poder llamar a establecer rondas de conjetura
a mi número de rondas llegué aquí. Ahora el juego sobre el controlador debería activarse desde el interior de la pantalla del juego, obviamente.
Entonces, aquí en la pantalla del juego, quiero pasar un accesorio que nombraré en GameOver, suena como un nombre apropiado
que se puede invocar desde dentro de la pantalla del juego o que contiene una referencia de función que luego se
puede invocar desde el interior del la pantalla del juego y la referencia de la función es una referencia
en este juego sobre la función del controlador, por supuesto.
Entonces, dentro de la pantalla del juego, ahora podemos usar el accesorio onGameOver para ejecutar esta función y pasar
el número de rondas que tomó la computadora para adivinar nuestro
número, luego configuramos este número de rondas aquí, lo almacenamos en nuestro estado de rondas de adivinanzas y ahora en el componente
de la aplicación, sabemos que si las rondas de adivinanzas son cero, el juego aún no ha comenzado o se está ejecutando, si es mayor que
cero, entonces el juego sobre el controlador se ejecuta y
el juego termina.
Por lo tanto, queremos mostrar el juego
en pantalla si las rondas de adivinanzas son mayores que cero.
Por cierto, si comenzamos un nuevo juego, también quiero restablecer mis rondas de conjeturas a cero porque si comienza un
nuevo
juego, queremos restablecer el número de rondas que la computadora tomó a 0.
Entonces, si es mayor que cero, el
juego ha terminado, así que en ese caso, quiero mostrar el juego en pantalla.
Entonces, si verifico si tenemos un número de usuario, en cuyo caso muestro la pantalla del
juego, eso solo es correcto si las rondas de adivinanzas son más pequeñas o iguales
que cero, no es posible, pero aún así, podemos verificarlo.
Entonces, si ese es el caso, entonces sabemos que el juego ciertamente
se está ejecutando, de lo contrario, si las rondas de adivinanzas son mayores que cero, entonces sabemos que el juego ha terminado y, por
lo tanto, el contenido será igual al juego en
pantalla, en este momento eso es solo un componente como este sin ningún accesorio que pasemos.
Entonces, ahora tenemos una condición en la que mostramos el juego en la pantalla, todo lo que tenemos que hacer es usar
el onGameOver Prop aquí en nuestra pantalla del juego para finalmente llamar a esta función y reenviar el número de rondas al
componente de la aplicación .
Entonces, de vuelta en la pantalla del juego, si useEffect aquí determina que se hizo la elección correcta, se hizo la suposición
correcta y, por lo tanto, el juego terminó, luego aquí, quiero llamar a props en GameOver como una función y reenviar la
cantidad de rondas. Tomamos la computadora para adivinar nuestro resultado o nuestra elección y, por lo tanto, ese es otro
estado que tenemos que administrar aquí en la pantalla del juego. Tenemos nuestras rondas y rondas establecidas e inicialmente, eso es cero,
cuando este componente se crea por primera vez, esto es, por supuesto, cero y las rondas es, por lo tanto, ahora lo que reenvío aquí porque
ese es un número que incrementaremos con cada suposición porque en el siguiente controlador
de conjeturas, si estamos generando una próxima conjetura, además de establecer esa conjetura aquí en nuestro estado,
por supuesto, también quiero establecer mis rondas y utilizar la forma de función donde obtengo mis rondas actuales y devuelvo las rondas
actuales mas uno.
Entonces agrego uno a mi cantidad actual de rondas que almaceno en mi estado, para que el nuevo estado sea
rondas antiguas más una porque comenzó una nueva ronda. Entonces, con eso, estamos administrando la cantidad de rondas y estamos usando
esto como una condición en el componente de la aplicación para representar el juego en la pantalla y en la pantalla del juego, verificamos si
el juego está aquí en usoEfecto y en este momento , hacemos esto cada vez que este componente
se vuelve a representar.
Ahora podríamos hacer eso, pero también podemos ser más honestos o más directos con respecto a las dependencias de este efecto
y eso es algo que puede ser o puede hacer agregando un segundo argumento para
usar Effect, el primer argumento es la función que debe ejecutar después de renderizar El componente,
segundo argumento que pasó a useEffect es una matriz de dependencias
de esta función y aquí debe especificar cualquier valor que provenga de fuera de esta función de efecto.
Entonces, en nuestro caso, esa sería la suposición actual y sería la elección del usuario de accesorios y los accesorios en GameOver y cada vez que
dicho valor cambie, este efecto se volverá a ejecutar, siempre que una tarea cambie
después de un ciclo de renderizado, el efecto se volverá a ejecutar. . Si se produjo un ciclo de representación y los valores que
especificó aquí siguen siendo los mismos que para el ciclo de representación anterior,
entonces el efecto no se volverá a ejecutar, por lo que el efecto ahora solo se
volverá a ejecutar si una de nuestras dependencias cambia. Ahora, como dije, la elección del usuario de
utilería y la utilería onGameOver son todas las dependencias y para encargarme de esto, usaré una sintaxis Javascript moderna donde utilizo
la desestructuración de objetos para desestructurar mis utilería y obtener la elección del usuario y onGameOver de ellas, esto La sintaxis puede parecer extraña, pero
es
como la desestructuración de la matriz, solo para los objetos, estamos sacando estas propiedades, por lo que
estos nombres de propiedad de este objeto de utilería y los almacenamos en constantes con nombres iguales para
que aquí podamos usar la elección del usuario y simplemente uso onGameOver ya que ahora tenemos estos valores almacenados en constantes de ese nombre
extraído de los accesorios y estoy haciendo esto porque ahora podemos agregar la elección del usuario y onGameOver como
dependencias en esta lista, de lo contrario tendríamos que agregar accesorios
aquí y eso en realidad cambia cada vez que cambia el componente principal y, por lo tanto,
no es una buena comprobación.
Esta es una mejor verificación porque ahora nos aseguramos de que si algo más cambia en los accesorios, no nos importa,
solo si uno de estos dos valores cambia, entonces este efecto debería volver a ejecutarse. Ahora con eso, tenemos nuestro control en el lugar
que debería llevar a que se presente el juego en pantalla si
la computadora adivinó nuestros números, así que
ahora guardemos esto y probémoslo, tal vez aquí en Android para mezclar las cosas. Así que ingresaré un número aquí, 32, confirmar, iniciar un juego y es 2, por lo que debería ser
mayor, déjenme mostrarles también
cómo se ve la advertencia cuando estoy en Android,
es esta alerta predeterminada de Android. Así que 32 era, por lo
tanto, por supuesto, debería ser mayor, aún debería ser mayor, ahora
debería ser menor, debería ser menor, debería ser mayor, debería ser menor, debería ser menor, debería ser mayor, debería ser mayor,
el El juego ha
terminado.
Se ve bien, la suposición probablemente fue 32, tendría sentido con respecto a la secuencia de números que
teníamos aquí y, por lo tanto, esta salida tiene sentido aquí.