WEBVTT 00:00:01.005 --> 00:00:04.721 Ahora hablemos de condiciones más complejas que puedes evaluar con tus programas. 00:00:04.721 --> 00:00:08.061 Para mostrarlas, he preparado la pantalla para que se vea como un juego que yo solía jugar 00:00:08.061 --> 00:00:09.348 Cuatro cuadros. 00:00:09.348 --> 00:00:14.851 Hay cuatro cuadros (el nombre del juego es acertado), y te paras en un cuadro y rebotas tu pelota a los otros cuadros. 00:00:14.851 --> 00:00:18.657 Ahora dibujaré una elipse por donde pase mi ratón, para que sea nuestra pelota 00:00:18.657 --> 00:00:23.490 Lo que quiero hacer es resaltar el cuadro en el que se encuentra la pelota, dibujando un rectángulo blanco en la parte superior. 00:00:23.490 --> 00:00:29.682 Sé que necesito una sentencia "if" para hacer eso, porque sólo quiero hacerlo con uno a la vez, sólo cuando estoy sobre ese rectángulo 00:00:29.682 --> 00:00:34.392 Ok, empecemos dibujando ese rectángulo. 00:00:34.392 --> 00:00:39.903 Así que sólo copiaré el rectángulo de ahí, pero lo voy a rellenar con un color diferente, un relleno blanco 00:00:39.903 --> 00:00:43.955 Bien. Ahora vamos a ponerlo en un "if" 00:00:43.955 --> 00:00:50.501 Puedes ver que autocompleta las llaves, así que tengo que mover esto dentro de ellas. 00:00:50.501 --> 00:00:53.964 Ok. Entonces, ¿cuándo tengo que mostrar ese rectángulo? 00:00:54.027 --> 00:01:00.891 Bueno, sé que debo hacerlo cuando la posición de "x" del mouse sea menor que 200 (mouseX < 200) 00:01:00.891 --> 00:01:07.072 Eso funciona, pero cuando me pongo aquí abajo, el rectángulo sigue blanco. 00:01:07.072 --> 00:01:10.348 Así que también necesito revisar "mouseY". 00:01:10.348 --> 00:01:13.269 Bueno, ¿cómo compruebo las dos cosas? 00:01:13.269 --> 00:01:14.938 Es por eso que tenemos el operador "AND" 00:01:14.938 --> 00:01:17.848 Así que usamos el operador "AND" cuando queremos comprobar múltiples condiciones. 00:01:17.848 --> 00:01:26.190 Entonces sólo escribimos "&&" y luego escribimos la siguiente condición, "mouseY < 200". 00:01:26.190 --> 00:01:30.324 Así que no lo resalta cuando estoy aquí y ¡sí lo hace cuando estoy aquí! ¡Yeey! 00:01:30.893 --> 00:01:36.185 Hagamos el siguiente cuadro, sólo para probar que esto funciona. 00:01:36.185 --> 00:01:38.682 Muy bien, sólo tenemos que cambiar algunas cosas. 00:01:38.682 --> 00:01:45.394 Ahora tenemos que tomar este rectángulo y obviamente cambiar las condiciones por las que no se está resaltando. 00:01:45.394 --> 00:01:52.962 Así que en esta ocasión, "mouseX" necesita ser más grande que 200 y "mouseY" seguir siendo menor que 200. 00:01:52.962 --> 00:01:55.789 Hermoso, ¡miren eso! 00:01:55.789 --> 00:02:02.252 Muy bien, ahora en Cuatro Cuadros, cuando la pelota pega en los bordes, es decir, en las líneas del centro y las esquinas 00:02:02.298 --> 00:02:04.511 gritamos "¡Edge Ball!" ("¡Fuera!") 00:02:04.819 --> 00:02:10.392 Y lo quiero hacer aquí también. Empecemos por escribir "EDGE BALL" 00:02:10.392 --> 00:02:14.822 Y lo voy a escribir en medio y con letras rojas. 00:02:14.822 --> 00:02:19.775 Muy bien, y sólo quiero que esto pase si estoy en los bordes. 00:02:19.775 --> 00:02:22.511 Así que voy a añadir un "if", 00:02:22.511 --> 00:02:25.853 y mover este código dentro del "if". 00:02:26.553 --> 00:02:28.775 Entonces, ¿cuándo quiero que esto ocurra? 00:02:28.775 --> 00:02:36.936 Bueno, hay bordes en el centro, así que el centro es cuando "mouseX === 200" 00:02:36.936 --> 00:02:40.404 Muy bien, vamos a ver. Voy a poner la pelota en el borde. 00:02:40.404 --> 00:02:43.817 Aquí voy. ¡EDGE BALL! 00:02:43.817 --> 00:02:49.403 Ok. Mmm. Esto sólo funciona para esta línea del centro. 00:02:49.403 --> 00:02:52.130 Pero quiero que funcione también para esta otra línea. 00:02:52.130 --> 00:03:02.820 En ese caso, quiero que "mouseY === 200", porque ahí es donde está la línea del centro. 00:03:02.820 --> 00:03:08.065 Ok, vamos a ver, no está funcionando. Nada está funcionando. 00:03:08.065 --> 00:03:10.800 Oh, sólo funciona aquí, en el punto central. 00:03:10.800 --> 00:03:18.334 Bueno, eso es porque usé un "AND", y lo va a hacer sólo si las dos condiciones aquí son verdaderas, y eso sólo pasa en el punto central. 00:03:18.334 --> 00:03:22.104 Entonces, lo que en realidad quiero decir es: "si cualquiera de esas condiciones es verdadera". 00:03:22.104 --> 00:03:24.697 Así que usaremos el operador "OR". 00:03:24.697 --> 00:03:27.470 El operador OR se escribe así: "||". 00:03:27.470 --> 00:03:31.628 A esos símbolos los llamamos plecas o barras verticales, y probablemente nunca los habías usado. 00:03:31.628 --> 00:03:35.763 Tienes que buscarlos en tu teclado, generalmente están en la parte superior derecha. 00:03:35.763 --> 00:03:39.385 Esperemos que lo tengas en tu teclado. 00:03:39.385 --> 00:03:42.284 ¿Todo bien? Sensacional, vamos a ver si funciona... 00:03:42.284 --> 00:03:46.695 Muy bien, sí funciona aquí y aquí y también aquí, hermoso... 00:03:46.695 --> 00:03:49.491 podemos seguir añadiendo condiciones aquí, 00:03:49.491 --> 00:03:52.601 así que con "AND" y "OR", puedes tener tantas condiciones como quieras, 00:03:52.601 --> 00:03:55.793 si necesitas comprobar 60 condiciones diferentes, puedes hacerlo completamente, ok. 00:03:55.793 --> 00:03:59.101 No hemos tenido cuidado de todos los bordes ... 00:03:59.101 --> 00:04:04.650 digamos que "mouseX" es menor que 3. 00:04:04.650 --> 00:04:08.352 Eso sería ... aquí vamos, ese pequeño borde de aquí. 00:04:08.352 --> 00:04:09.876 Muy bien. 00:04:09.876 --> 00:04:14.760 O "mouseX" es mayor que 397 ("mouseX > 397") 00:04:14.760 --> 00:04:17.767 Aquí está... ¡hermoso! 00:04:17.767 --> 00:04:21.534 Entonces podemos hacerlo para todos los bordes. 00:04:21.534 --> 00:04:27.696 Así que... ¡sí!, existe "AND" y "OR" y ahora puedes ver cómo construir condiciones mucho más complejas en tus programas. 00:04:27.696 --> 00:04:31.696 Y eso es bueno, porque el mundo es un lugar complejo.