1 00:00:02,380 --> 00:00:06,940 Entonces podemos llegar a la pantalla del juego ahora y la computadora está 2 00:00:06,970 --> 00:00:12,340 adivinando un número aquí, un número aleatorio que excluye nuestro número real para la primera suposición inicial. 3 00:00:12,370 --> 00:00:18,010 Ahora debemos asegurarnos de que se puedan hacer conjeturas posteriores cuando presionamos el botón inferior o superior aquí 4 00:00:18,010 --> 00:00:21,350 en la pantalla del juego. Para eso, agreguemos 5 00:00:21,400 --> 00:00:27,820 una función dentro de nuestro componente funcional porque esta función necesitará acceso al estado circundante y al 6 00:00:27,820 --> 00:00:36,790 componente circundante y darle el nombre que desee, como el siguiente controlador de adivinanzas, el nombre que prefiera y esta es una función que 7 00:00:36,790 --> 00:00:38,700 en realidad deberías obtener un 8 00:00:38,710 --> 00:00:43,810 argumento, la dirección en la que debería estar la siguiente aproximación, de manera 9 00:00:43,810 --> 00:00:47,390 más baja o más grande. Ahora, lo 10 00:00:47,390 --> 00:00:54,060 primero que quiero hacer aquí es asegurarme de validar la dirección. 11 00:00:54,110 --> 00:00:59,600 Ahora, esta función aquí debería ejecutarse cuando se presionan los botones, pero, por supuesto, el 12 00:00:59,600 --> 00:01:04,970 valor de dirección, por lo que el valor que pasamos como argumento debería diferir según 13 00:01:05,240 --> 00:01:06,190 el botón. 14 00:01:06,200 --> 00:01:13,070 Entonces, aquí tenemos el siguiente controlador de conjeturas conectado a onPress, sin paréntesis, para proporcionar ese puntero 15 00:01:13,100 --> 00:01:19,140 en nuestra función a onPress para que esto se ejecute eventualmente cuando el usuario presione 16 00:01:19,140 --> 00:01:26,060 esto, pero fui a preconfigurar el argumento que se pasará al siguiente controlador de conjeturas cuando esto 17 00:01:26,060 --> 00:01:27,350 se ejecuta. 18 00:01:27,350 --> 00:01:33,530 Podemos hacer esto con bind, bind esto porque el primer argumento para bind es siempre a lo que esto debería referirse 19 00:01:33,530 --> 00:01:38,450 en la función que se llama, no importa aquí, así que podemos vincularlo a esto. 20 00:01:38,600 --> 00:01:44,780 Sin embargo, el segundo valor que pasamos aquí para vincular será el primer argumento recibido por nuestra función 21 00:01:44,810 --> 00:01:51,580 y, por lo tanto, esta será la dirección recibida aquí y, por supuesto, depende de usted qué lógica usa aquí, 22 00:01:51,580 --> 00:01:52,560 para mí 23 00:01:52,600 --> 00:02:00,820 tiene sentido usar simplemente un cadena donde aquí pasamos más abajo como una cadena y para el otro botón, pasamos más grande para que 24 00:02:00,970 --> 00:02:02,710 tengamos estos dos identificadores que 25 00:02:02,740 --> 00:02:08,830 se pasan esencialmente al siguiente controlador de conjeturas. Entonces, la dirección será menor o 26 00:02:08,830 --> 00:02:10,780 mayor y ahora 27 00:02:10,900 --> 00:02:14,110 queremos validar si eso es correcto. 28 00:02:14,110 --> 00:02:20,670 Entonces, por ejemplo, si seleccionó un número de digamos 55 y la computadora adivinó 60, entonces si le da a 29 00:02:20,800 --> 00:02:25,390 la computadora la pista de que los números deberían ser mayores, obviamente eso está 30 00:02:25,390 --> 00:02:30,190 mal porque el número debería ser menor, su número fue 55, supongo era 60, 31 00:02:30,190 --> 00:02:31,690 es incorrecto si le 32 00:02:31,690 --> 00:02:37,290 dice a la computadora que el número que debe adivinar a continuación debe ser mayor que 60, 33 00:02:37,290 --> 00:02:37,790 ¿verdad? 34 00:02:37,810 --> 00:02:39,340 Por lo tanto, queremos 35 00:02:39,540 --> 00:02:43,370 validar esto y, por lo tanto, aquí podemos verificar si 36 00:02:43,390 --> 00:02:54,870 la dirección es igual a menor, por lo que si presionó el botón inferior y la suposición actual es menor, entonces apoya la elección del usuario, por lo que la 37 00:02:54,880 --> 00:03:01,270 computadora realmente adivinó un número menor que nuestra elección, entonces menor es la pista incorrecta correcta porque 38 00:03:01,270 --> 00:03:01,870 el 39 00:03:01,900 --> 00:03:03,900 número debe ser menor, debe 40 00:03:03,970 --> 00:03:11,100 ser mayor porque la suposición ya era demasiado baja. Entonces, ese es un escenario posible en el que estamos 41 00:03:11,100 --> 00:03:16,110 obteniendo una pista equivocada, la alternativa y la envolveré entre paréntesis para dejar realmente claro 42 00:03:16,110 --> 00:03:18,300 que esta es una condición aquí. 43 00:03:18,330 --> 00:03:20,440 Entonces, la alternativa a 44 00:03:20,490 --> 00:03:26,010 eso, la segunda condición que quiero verificar es que la dirección aquí es realmente mayor 45 00:03:26,250 --> 00:03:30,920 y, al mismo tiempo, la suposición actual ya es mayor que nuestra 46 00:03:30,930 --> 00:03:33,460 elección y también es una pista 47 00:03:33,480 --> 00:03:35,600 incorrecta, solo en la dirección opuesta. 48 00:03:35,940 --> 00:03:41,220 En ambos casos en los que damos una pista incorrecta, quiero lanzar una alerta y aprendiste que puedes hacerlo con la API 49 00:03:41,220 --> 00:03:48,300 de alerta, la clase de alerta que puedes importar desde React Native al final. Luego, aquí, en nuestro cheque, usaré una alerta de alerta 50 00:03:48,300 --> 00:03:55,460 para lanzar una alerta con un título de digamos que no mientas, por supuesto, puedes elegir el nombre que quieras, 51 00:03:55,530 --> 00:03:57,820 me estoy escapando de esa 52 00:03:57,840 --> 00:04:03,240 cita que imprimí como un carácter aquí con una barra invertida inicial porque de lo 53 00:04:03,240 --> 00:04:07,710 contrario cerraría la cadena porque estoy usando comillas simples para rodear mis cadenas. 54 00:04:07,710 --> 00:04:09,010 Así que ese es mi 55 00:04:09,090 --> 00:04:13,230 título y luego el texto podría ser que sabes que esto está mal pero, por supuesto, puedes 56 00:04:13,230 --> 00:04:19,480 tener el texto que quieras aquí, también puedes ser menos moralista si quieres. Ahora quiero presentar un botón aquí y el botón 57 00:04:19,480 --> 00:04:25,260 dice que ya se explican los objetos que pasa a ese tercer conjunto de argumentos que toma 58 00:04:25,320 --> 00:04:32,880 la alerta y allí el texto podría ser lamentable y el estilo podría cancelarse y no necesita proporcionar un controlador onPress, Si 59 00:04:32,880 --> 00:04:39,120 no proporciona uno, lo único que sucederá es que al hacer clic en el botón se cerrará la 60 00:04:39,120 --> 00:04:41,400 alerta, lo cual está bien. 61 00:04:42,000 --> 00:04:47,550 Entonces, aquí, le damos al usuario un toque en sus dedos, por así decirlo, y nos aseguramos de que no 62 00:04:47,550 --> 00:04:48,530 se den 63 00:04:48,600 --> 00:04:50,040 pistas incorrectas y quiero volver 64 00:04:50,040 --> 00:04:54,590 aquí, así que quiero detener la ejecución de la función si tenemos un valor tan incorrecto. 65 00:04:54,780 --> 00:04:56,580 Si lo hacemos más allá de 66 00:04:56,580 --> 00:05:01,330 este bloque if, entonces si damos una pista correcta, entonces queremos generar un nuevo número aleatorio. 67 00:05:01,920 --> 00:05:06,940 Entonces, aquí quiero verificar si la dirección es más baja y ahora sabemos 68 00:05:07,200 --> 00:05:08,850 que era correcta, 69 00:05:08,850 --> 00:05:15,810 por lo que la computadora debe adivinar un número que es más bajo que el número anterior, entonces 70 00:05:15,810 --> 00:05:22,170 sabemos que se debe generar un nuevo número aleatorio hacia una suposición actual. El límite superior máximo. 71 00:05:22,200 --> 00:05:29,940 Por lo tanto, podemos llamar a generar aleatorio entre de nuevo y el número mínimo, bueno, ese es probablemente uno, pero 72 00:05:30,060 --> 00:05:32,930 ¿y si el usuario ya adivinó otro 73 00:05:32,940 --> 00:05:39,440 número donde le dijimos a la computadora que era demasiado pequeño y entonces tendríamos un problema aquí porque 74 00:05:39,540 --> 00:05:44,410 el más bajo el límite no siempre es uno, ¿qué pasa si el 75 00:05:44,430 --> 00:05:48,430 usuario adivinó 10 y dijimos que no, tiene que ser mayor? 76 00:05:48,480 --> 00:05:53,670 Bueno, entonces el usuario adivina 50 y decimos que debería ser más bajo que eso, la computadora debería, 77 00:05:53,670 --> 00:05:54,410 por supuesto, 78 00:05:54,420 --> 00:06:00,240 adivinar de nuevo, pero no debería adivinar por debajo de 10 porque ya mencionamos que esto es demasiado pequeño antes. 79 00:06:00,330 --> 00:06:08,700 Entonces, nuestro máximo y mínimo actuales deberían ajustarse con el tiempo a medida que damos pistas sobre si el número que la computadora adivinó 80 00:06:08,700 --> 00:06:11,080 es demasiado pequeño o demasiado grande. 81 00:06:12,130 --> 00:06:16,690 Por lo tanto, podemos usar otro gancho proporcionado por React y ese es el gancho useRef. 82 00:06:16,690 --> 00:06:23,290 Ahora puede conocer ese gancho como un gancho que le permite crear un objeto que puede vincular a las entradas, por lo 83 00:06:23,350 --> 00:06:28,960 que a sus elementos de entrada en jsx para acceder a ellos en su código y esa es 84 00:06:28,960 --> 00:06:33,870 una forma de usarlo, pero useRef también le permite hacer otra cosa que es genial. 85 00:06:34,120 --> 00:06:39,720 Le permite definir un valor que sobrevive al re-renderizado de componentes, por lo que sobrevive a que 86 00:06:39,760 --> 00:06:42,810 este componente se reconstruya y eso es exactamente 87 00:06:43,120 --> 00:06:48,940 lo que necesitamos aquí porque queremos iniciar sesión en un mínimo y máximo que podamos cambiar pero 88 00:06:49,180 --> 00:06:53,320 que no se regenere solo porque el componente se vuelve a representar. 89 00:06:53,320 --> 00:07:00,060 Entonces, aquí en la parte superior de este componente, después de inicializar el estado, podemos 90 00:07:00,360 --> 00:07:10,430 crear una nueva constante, currentLow quizás donde useRef es uno y luego otra constante, currentHigh donde useRef es 100, estos son nuestros límites 91 00:07:10,440 --> 00:07:16,590 iniciales que estamos usando para el azar número y ahora podemos actualizar estas 92 00:07:17,160 --> 00:07:18,240 referencias aquí. 93 00:07:18,390 --> 00:07:20,790 Entonces, sabemos que la dirección debe ser más baja, lo que 94 00:07:20,790 --> 00:07:27,450 podemos hacer en ese caso, en lugar de generar instantáneamente un nuevo número, podemos establecer currentHigh. actual, debido a que las referencias generadas 95 00:07:27,450 --> 00:07:33,960 por React son objetos que tienen una propiedad actual en la que se almacena el 96 00:07:33,960 --> 00:07:36,120 valor real, por lo 97 00:07:36,150 --> 00:07:39,320 que configuramos current igual a current guess. 98 00:07:39,330 --> 00:07:45,570 Entonces, lo que estamos diciendo es que si te digo, la computadora que el número que adivinaste es demasiado grande 99 00:07:45,570 --> 00:07:53,610 y deberías adivinar uno más bajo, entonces sé que este número que supuse es mi actual Alto, el número que es correcto puede ' No ser más 100 00:07:53,610 --> 00:07:55,320 alto que este, así que 101 00:07:55,320 --> 00:07:58,780 guardo el número que acabo de adivinar como mi máximo actual. 102 00:07:58,800 --> 00:08:05,160 Y nuevamente, estas constantes de referencia aquí no se regeneran cuando este componente se crea nuevamente, 103 00:08:05,160 --> 00:08:11,700 en cambio, si se han inicializado una vez, un poco como el estado en realidad, entonces se 104 00:08:11,790 --> 00:08:17,490 almacenan desconectadas de ese componente y React reconoce que ya se han inicializado. y 105 00:08:17,490 --> 00:08:22,440 no los regenerará, sino que inicializará currentHigh con el valor almacenado previamente. 106 00:08:22,440 --> 00:08:28,240 Entonces, es un poco como si estuviera manejando esto en un estado, la diferencia con el estado en cambio si cambia el 107 00:08:28,240 --> 00:08:32,290 valor almacenado allí, el componente no se vuelve a procesar porque no queremos eso aquí. 108 00:08:32,370 --> 00:08:37,890 No quiero volver a representarlo componente solo porque estoy guardando un nuevo máximo, que no tiene ningún impacto en mi 109 00:08:37,890 --> 00:08:39,780 vista, en mi código jsx, solo 110 00:08:39,780 --> 00:08:44,020 tiene un impacto en mi lógica, pero por eso no necesito volver a representar el 111 00:08:44,070 --> 00:08:47,580 componente, por eso uso una referencia aquí en lugar de un estado. 112 00:08:47,640 --> 00:08:50,730 Entonces, eso sucede si es más bajo, de lo 113 00:08:50,760 --> 00:08:55,980 contrario, si le dijéramos a la computadora que la suposición era demasiado pequeña y el 114 00:08:55,980 --> 00:08:57,060 número real debería 115 00:08:57,060 --> 00:09:04,970 ser mayor, debería ser mayor, bueno, en ese caso establecemos la corriente baja en la conjetura actual porque entonces sabemos Tenemos un 116 00:09:04,970 --> 00:09:06,020 límite inferior. 117 00:09:06,230 --> 00:09:12,230 Y ahora el objetivo es o el truco es generar un nuevo número aleatorio que tenga en cuenta estos límites, 118 00:09:12,230 --> 00:09:13,280 por lo que 119 00:09:13,280 --> 00:09:22,190 utilizamos el mínimo actual con nuestra referencia y luego. current como mínimo y currentHigh. actual como máximo y quiero 120 00:09:22,190 --> 00:09:30,850 excluir la suposición actual para que no podamos adivinar el mismo número nuevamente aquí, para que para 121 00:09:30,850 --> 00:09:38,440 el próximo rol, definitivamente obtengamos un número diferente. Entonces, eso es algo que almaceno en un número constante, el 122 00:09:38,440 --> 00:09:39,900 siguiente, esto se genera 123 00:09:39,910 --> 00:09:41,200 aquí cuando se 124 00:09:41,350 --> 00:09:46,020 ejecuta el siguiente controlador de conjeturas que ocurre cuando tocamos uno de estos botones. 125 00:09:46,240 --> 00:09:49,140 Y ahora el siguiente número es el siguiente número que 126 00:09:49,150 --> 00:09:54,370 queremos usar, así que ahora lo que podemos hacer simplemente como podemos llamar establecer la conjetura actual y agregar el 127 00:09:54,370 --> 00:10:01,660 siguiente número, ahora el componente se volverá a representar y generará la siguiente suposición. Así que vamos a intentarlo, por ahora no tenemos 128 00:10:01,660 --> 00:10:02,960 el juego 129 00:10:02,980 --> 00:10:06,820 terminado, pero al menos podemos intentar adivinar números aquí. 130 00:10:06,850 --> 00:10:09,250 Entonces ingresé 53 como mi número, 131 00:10:09,250 --> 00:10:12,040 ahora comenzamos y la computadora adivinó 85. 132 00:10:12,100 --> 00:10:18,220 Si ahora digo mayor, recibimos esa advertencia porque mentimos, teníamos 53 como número, por lo que la suposición es 133 00:10:18,220 --> 00:10:21,590 demasiado alta, debería ser menor. 134 00:10:21,610 --> 00:10:23,260 Ahora es 28, bueno, eso es demasiado bajo, debería ser mayor. 135 00:10:23,260 --> 00:10:28,830 Entonces, si toco más bajo, recibo la advertencia, si toco más grande, subimos ahora 78 y ahora 136 00:10:28,840 --> 00:10:34,030 en este momento, 23, la suposición anterior será nuestro límite inferior y ahora cuando toque más 137 00:10:34,030 --> 00:10:38,360 abajo, 78 la suposición actual será nuestro límite superior, por lo que la 138 00:10:38,380 --> 00:10:44,300 próxima suposición ciertamente no estará por encima de 78 y no estará por debajo de 23, pero aún 139 00:10:44,430 --> 00:10:46,690 es demasiado baja, es demasiado grande, quiero 140 00:10:46,690 --> 00:10:48,460 decir, es demasiado baja, así 141 00:10:48,460 --> 00:10:49,580 que usemos 142 00:10:49,600 --> 00:10:51,520 una más grande, más baja 143 00:10:51,520 --> 00:10:53,460 y esa sería la correcta . 144 00:10:53,500 --> 00:10:56,560 Ahora por ahora no tenemos nada que verifique si la 145 00:10:56,580 --> 00:10:57,820 computadora adivinó correctamente. 146 00:10:58,120 --> 00:11:00,130 Así que eso es lo siguiente que tendremos que implementar aquí.