1 00:00:01,005 --> 00:00:04,721 Ahora hablemos de condiciones más complejas que puedes evaluar con tus programas. 2 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 3 00:00:08,061 --> 00:00:09,348 Cuatro cuadros. 4 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. 5 00:00:14,851 --> 00:00:18,657 Ahora dibujaré una elipse por donde pase mi ratón, para que sea nuestra pelota 6 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. 7 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 8 00:00:29,682 --> 00:00:34,392 Ok, empecemos dibujando ese rectángulo. 9 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 10 00:00:39,903 --> 00:00:43,955 Bien. Ahora vamos a ponerlo en un "if" 11 00:00:43,955 --> 00:00:50,501 Puedes ver que autocompleta las llaves, así que tengo que mover esto dentro de ellas. 12 00:00:50,501 --> 00:00:53,964 Ok. Entonces, ¿cuándo tengo que mostrar ese rectángulo? 13 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) 14 00:01:00,891 --> 00:01:07,072 Eso funciona, pero cuando me pongo aquí abajo, el rectángulo sigue blanco. 15 00:01:07,072 --> 00:01:10,348 Así que también necesito revisar "mouseY". 16 00:01:10,348 --> 00:01:13,269 Bueno, ¿cómo compruebo las dos cosas? 17 00:01:13,269 --> 00:01:14,938 Es por eso que tenemos el operador "AND" 18 00:01:14,938 --> 00:01:17,848 Así que usamos el operador "AND" cuando queremos comprobar múltiples condiciones. 19 00:01:17,848 --> 00:01:26,190 Entonces sólo escribimos "&&" y luego escribimos la siguiente condición, "mouseY < 200". 20 00:01:26,190 --> 00:01:30,324 Así que no lo resalta cuando estoy aquí y ¡sí lo hace cuando estoy aquí! ¡Yeey! 21 00:01:30,893 --> 00:01:36,185 Hagamos el siguiente cuadro, sólo para probar que esto funciona. 22 00:01:36,185 --> 00:01:38,682 Muy bien, sólo tenemos que cambiar algunas cosas. 23 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. 24 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. 25 00:01:52,962 --> 00:01:55,789 Hermoso, ¡miren eso! 26 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 27 00:02:02,298 --> 00:02:04,511 gritamos "¡Edge Ball!" ("¡Fuera!") 28 00:02:04,819 --> 00:02:10,392 Y lo quiero hacer aquí también. Empecemos por escribir "EDGE BALL" 29 00:02:10,392 --> 00:02:14,822 Y lo voy a escribir en medio y con letras rojas. 30 00:02:14,822 --> 00:02:19,775 Muy bien, y sólo quiero que esto pase si estoy en los bordes. 31 00:02:19,775 --> 00:02:22,511 Así que voy a añadir un "if", 32 00:02:22,511 --> 00:02:25,853 y mover este código dentro del "if". 33 00:02:26,553 --> 00:02:28,775 Entonces, ¿cuándo quiero que esto ocurra? 34 00:02:28,775 --> 00:02:36,936 Bueno, hay bordes en el centro, así que el centro es cuando "mouseX === 200" 35 00:02:36,936 --> 00:02:40,404 Muy bien, vamos a ver. Voy a poner la pelota en el borde. 36 00:02:40,404 --> 00:02:43,817 Aquí voy. ¡EDGE BALL! 37 00:02:43,817 --> 00:02:49,403 Ok. Mmm. Esto sólo funciona para esta línea del centro. 38 00:02:49,403 --> 00:02:52,130 Pero quiero que funcione también para esta otra línea. 39 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. 40 00:03:02,820 --> 00:03:08,065 Ok, vamos a ver, no está funcionando. Nada está funcionando. 41 00:03:08,065 --> 00:03:10,800 Oh, sólo funciona aquí, en el punto central. 42 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. 43 00:03:18,334 --> 00:03:22,104 Entonces, lo que en realidad quiero decir es: "si cualquiera de esas condiciones es verdadera". 44 00:03:22,104 --> 00:03:24,697 Así que usaremos el operador "OR". 45 00:03:24,697 --> 00:03:27,470 El operador OR se escribe así: "||". 46 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. 47 00:03:31,628 --> 00:03:35,763 Tienes que buscarlos en tu teclado, generalmente están en la parte superior derecha. 48 00:03:35,763 --> 00:03:39,385 Esperemos que lo tengas en tu teclado. 49 00:03:39,385 --> 00:03:42,284 ¿Todo bien? Sensacional, vamos a ver si funciona... 50 00:03:42,284 --> 00:03:46,695 Muy bien, sí funciona aquí y aquí y también aquí, hermoso... 51 00:03:46,695 --> 00:03:49,491 podemos seguir añadiendo condiciones aquí, 52 00:03:49,491 --> 00:03:52,601 así que con "AND" y "OR", puedes tener tantas condiciones como quieras, 53 00:03:52,601 --> 00:03:55,793 si necesitas comprobar 60 condiciones diferentes, puedes hacerlo completamente, ok. 54 00:03:55,793 --> 00:03:59,101 No hemos tenido cuidado de todos los bordes ... 55 00:03:59,101 --> 00:04:04,650 digamos que "mouseX" es menor que 3. 56 00:04:04,650 --> 00:04:08,352 Eso sería ... aquí vamos, ese pequeño borde de aquí. 57 00:04:08,352 --> 00:04:09,876 Muy bien. 58 00:04:09,876 --> 00:04:14,760 O "mouseX" es mayor que 397 ("mouseX > 397") 59 00:04:14,760 --> 00:04:17,767 Aquí está... ¡hermoso! 60 00:04:17,767 --> 00:04:21,534 Entonces podemos hacerlo para todos los bordes. 61 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. 62 00:04:27,696 --> 00:04:31,696 Y eso es bueno, porque el mundo es un lugar complejo.