1 00:00:07,660 --> 00:00:14,039 Bueno, esta última práctica consiste en un poco recopilar todo lo que hemos ido haciendo en las anteriores prácticas 2 00:00:14,039 --> 00:00:21,879 y hacer un juego sencillo, el juego que os propongo es el juego del Pong, 3 00:00:21,879 --> 00:00:28,620 en el que hay una pelota que rebota y que paramos o no paramos esa pelota con una raqueta. 4 00:00:29,559 --> 00:00:33,359 Entonces os lo he puesto en la práctica en el PDF para que vayáis siguiendo paso a paso 5 00:00:33,359 --> 00:00:37,340 y vayáis incorporando cada vez más dificultad al programa. 6 00:00:37,659 --> 00:00:50,140 Se puede sacar un 5 si hacéis el juego básico que está detallado ahí en el PDF y luego si añadís dificultad o modificáis el juego y añadís otros elementos pues con eso se consigue el 10. 7 00:00:50,140 --> 00:00:56,340 Vale, entonces, lo primero que tenéis que conseguir es lo que tenéis en el PDF marcado con el número 1 8 00:00:56,340 --> 00:00:59,380 Y es un programa en el que haya una bola que rebota 9 00:00:59,380 --> 00:01:01,179 Eso ya lo hemos hecho en otras prácticas 10 00:01:01,179 --> 00:01:09,680 Y simplemente lo único, la única novedad es que todos los datos están puestos con variables 11 00:01:09,680 --> 00:01:11,079 Para que luego se puedan modificar 12 00:01:11,079 --> 00:01:14,879 Si queremos que la bola vaya más rápida o rebote de otra manera 13 00:01:14,879 --> 00:01:19,379 Pues si lo ponemos con variables en vez de con números fijos, pues eso lo podemos modificar 14 00:01:19,379 --> 00:01:22,099 entonces se crean cinco variables 15 00:01:22,099 --> 00:01:24,340 la primera es el diámetro de la bola 16 00:01:24,340 --> 00:01:26,640 que podemos hacer que sea luego más grande o más pequeña 17 00:01:26,640 --> 00:01:27,879 cambiando esa variable 18 00:01:27,879 --> 00:01:30,620 bolaX y bolaY son las coordenadas 19 00:01:30,620 --> 00:01:32,540 X e Y de la pelota o de la bola 20 00:01:32,540 --> 00:01:35,040 y avance bolaX y avance bolaY 21 00:01:35,040 --> 00:01:37,319 es lo que va a avanzar en cada una de las direcciones 22 00:01:37,319 --> 00:01:39,439 le he dado unos valores iniciales 23 00:01:39,439 --> 00:01:41,120 que también lo podéis cambiar y adaptar 24 00:01:41,120 --> 00:01:43,420 según cada uno la versión del juego que vaya a hacer 25 00:01:43,420 --> 00:01:46,140 en la función Z 26 00:01:46,140 --> 00:01:48,659 bueno, he definido una pantalla de 600x400 27 00:01:48,659 --> 00:01:54,299 y luego he generado un número aleatorio, esto es una función nueva que se llama random 28 00:01:54,299 --> 00:02:00,040 y lo que hace es que genera un número que es un número que puede ser decimal 29 00:02:00,040 --> 00:02:08,360 entre 0 y el ancho de la pantalla para la bola X y entre 0 y el alto de la pantalla para la bola Y. 30 00:02:09,120 --> 00:02:14,639 Este int que he puesto aquí delante es que como este número se genera, como no genera un número entero 31 00:02:14,639 --> 00:02:17,919 al ponerle el int delante ya lo convierte en número entero 32 00:02:17,919 --> 00:02:22,060 entonces la variable bolaX es un número entero que va a estar entre 0 y el ancho 33 00:02:22,060 --> 00:02:26,240 y la variable bolaY va a ser otro número entero que va a estar entre 0 y el alto 34 00:02:26,240 --> 00:02:30,780 entonces cada vez que ejecutemos el programa la posición inicial va a ser diferente 35 00:02:30,780 --> 00:02:34,280 para que tenga gracia, si ponemos un número fijo pues siempre se va a ejecutar igual 36 00:02:34,280 --> 00:02:38,960 vale, después en la función draw lo que hay que poner es 37 00:02:38,960 --> 00:02:41,439 bueno, yo he puesto un fondo amarillo y un relleno de azul 38 00:02:41,439 --> 00:02:44,539 podéis elegir los valores o los colores que queráis 39 00:02:44,539 --> 00:02:47,960 y llamamos a la función bola que es la que dibuja la bola. 40 00:02:48,879 --> 00:02:52,180 Entonces en la función bola lo que estoy dibujando es una elipse, 41 00:02:52,539 --> 00:02:56,479 se puede hacer también con un círculo pero en la versión antigua ya sabéis que no existía la función círculo 42 00:02:56,479 --> 00:03:02,280 en el que las coordenadas son bola X y bola Y y dos veces el diámetro para que sea un círculo. 43 00:03:04,240 --> 00:03:08,780 Incrementa la posición de la bola X y de la bola Y continuamente para que se esté moviendo 44 00:03:08,780 --> 00:03:20,039 y después en estos dos condicionales lo que estoy consiguiendo es que si rebota a lo ancho o rebota a lo alto, pues cambiar la dirección. 45 00:03:20,599 --> 00:03:27,780 Entonces, bueno, aquí simplemente he puesto que si el valor de la coordenada x es mayor que el ancho de la pantalla menos la mitad del diámetro, 46 00:03:27,780 --> 00:03:33,120 es decir, el radio, eso es para que no desaparezca como la bola la está controlando desde el centro, 47 00:03:33,719 --> 00:03:37,840 si pongo solo el diámetro desaparece media bola al chocar con la pantalla. 48 00:03:38,780 --> 00:03:57,400 Vale, esta barra vertical, que es la barra que está en la tecla del 1 con Alt-G-R, lo que le va a dar al condicional IF son dos opciones, ¿vale? Esto es si rebota por la derecha, así que si es el ancho menos el diámetro es por la derecha, o que rebote por la izquierda, ¿vale? 49 00:03:57,400 --> 00:04:09,400 Que esto es, si la bola X es más pequeña, en principio había que poner que el diámetro medio, pero desaparecía un poco la bola, así que este 25 lo he puesto un poco ahí a ojo para que diera mejor sensación. 50 00:04:09,740 --> 00:04:14,879 Podéis probar ahí diferentes números y veis que la bola pues hace alguna sensación rara, como no poner nada. 51 00:04:15,979 --> 00:04:25,939 Vale, entonces si se cumple alguna de estas dos condiciones, por eso lo del O lógico, lo que hace es que si estaba sumando, o sea que se está moviendo hacia la derecha, cambio arrestando. 52 00:04:25,939 --> 00:04:31,939 Y si estaba restando, cambia sumando, o sea, le cambia el signo al sentido del movimiento, ¿vale? 53 00:04:31,939 --> 00:04:37,800 Y lo mismo para el movimiento vertical, por arriba y por abajo, bueno, por abajo y por arriba. 54 00:04:41,199 --> 00:04:46,740 Bueno, para el siguiente paso vamos a añadir la raqueta, ¿vale? 55 00:04:46,759 --> 00:04:51,819 La raqueta, voy a quitar este, porque ahora el que vamos a poner es uno con la raqueta. 56 00:04:51,819 --> 00:05:03,449 Una vez que tenemos la pelota que rebota añadimos a nuestro programa una raqueta 57 00:05:03,449 --> 00:05:07,449 Entonces lo tenéis también ahí detallado en el pdf en el punto 2 58 00:05:07,449 --> 00:05:18,269 Se trata de coger el mismo programa anterior y añadirle líneas entre medias para poner la raqueta 59 00:05:18,269 --> 00:05:25,490 Entonces esto ya lo teníamos de antes y añadimos 4 variables que son variables que van a controlar el funcionamiento de la raqueta 60 00:05:25,490 --> 00:05:30,649 uno es lo que mide la raqueta en la dirección de x, otro es lo que mide la raqueta en la dirección de y 61 00:05:30,649 --> 00:05:34,230 que lo he puesto relacionado que sea seis veces lo que mide en x 62 00:05:34,230 --> 00:05:36,990 por si quiero cambiar el tamaño que se cambie de forma proporcional 63 00:05:36,990 --> 00:05:41,449 y luego la posición de la raqueta en x y la posición de la raqueta en y 64 00:05:41,449 --> 00:05:45,370 que sería esta esquinita de aquí arriba, las coordenadas de esa esquinita de ahí arriba 65 00:05:45,370 --> 00:05:48,629 porque no he puesto de momento lo del regmo de center 66 00:05:48,629 --> 00:05:51,990 entonces lo va a controlar desde la esquina superior izquierda 67 00:05:51,990 --> 00:05:55,569 luego he puesto una variable booleana que inicialmente es verdadera 68 00:05:55,569 --> 00:05:57,329 es para que detecte si es la primera vez 69 00:05:57,329 --> 00:06:01,709 porque lo que voy a programar es que la primera vez la raqueta aparezca en el centro de la pantalla 70 00:06:01,709 --> 00:06:07,629 y en realidad esta no hace falta ahora mismo 71 00:06:07,629 --> 00:06:11,350 que lo intenté hacer con ceros y unos, esta no se me ha colado 72 00:06:11,350 --> 00:06:14,990 vale, a ver, el setup en principio es lo mismo que hemos visto antes 73 00:06:14,990 --> 00:06:18,009 no hay que cambiar nada, estas tres líneas también 74 00:06:18,009 --> 00:06:21,269 y aquí es donde pongo que si primera vez es verdadero 75 00:06:21,269 --> 00:06:23,310 ya sabéis que no hace falta ponerlo de que es verdadero 76 00:06:23,310 --> 00:06:25,110 solo cuando es una variable booleana 77 00:06:25,110 --> 00:06:26,389 si ponemos si primera vez 78 00:06:26,389 --> 00:06:29,370 ya interpreta que es 79 00:06:29,370 --> 00:06:30,490 si es verdadero 80 00:06:30,490 --> 00:06:32,949 lo que hacemos es que la posición de la raqueta ahí 81 00:06:32,949 --> 00:06:35,029 es la mitad de la altura menos la mitad 82 00:06:35,029 --> 00:06:36,009 de lo que mide la raqueta 83 00:06:36,009 --> 00:06:39,050 bueno esto simplemente lo que hace es colocar la raqueta inicialmente 84 00:06:39,050 --> 00:06:39,730 en el centro 85 00:06:39,730 --> 00:06:43,110 y cambiamos a falso 86 00:06:43,110 --> 00:06:45,350 para que ya no vuelva a ejecutar nunca más este condicional 87 00:06:45,350 --> 00:06:46,790 vale 88 00:06:46,790 --> 00:06:49,129 este rectángulo lo que hace es dibujar la raqueta 89 00:06:49,129 --> 00:06:50,529 vale, dibuja un rectángulo 90 00:06:50,529 --> 00:06:53,110 con estas dos coordenadas y este tamaño 91 00:06:53,110 --> 00:07:00,930 y en este condicional de aquí lo que vamos a ver es si la raqueta y la pelota chocan 92 00:07:00,930 --> 00:07:07,930 es un poquito complicado porque lo que vamos a detectar es si la posición de la bola 93 00:07:07,930 --> 00:07:12,449 menos la posición de la raqueta, es decir la distancia entre la bola y la raqueta 94 00:07:12,449 --> 00:07:16,949 es más pequeña que lo que mide la raqueta menos el radio de la bola 95 00:07:16,949 --> 00:07:23,889 y esto es un condicional en el que se cumplen, se tienen que cumplir tres cosas a la vez, 96 00:07:24,689 --> 00:07:32,790 que la bola Y sea mayor que la posición de la raqueta Y y que la bola Y sea menor que la posición de la raqueta en Y. 97 00:07:32,910 --> 00:07:40,769 Es decir, que la distancia entre la coordenada X de la bola y de la raqueta sea menor que la raqueta y el radio 98 00:07:40,769 --> 00:07:46,569 y además que esté en esta altura, entre esta altura y esta altura, o sea que se tienen que dar tres condiciones. 99 00:07:46,949 --> 00:07:48,430 Ahora os pongo un dibujo. 100 00:07:48,970 --> 00:07:55,170 Si se dan esas tres condiciones, lo que voy a hacer es cambiar la dirección, igual que habíamos hecho antes cuando llegábamos a la pared. 101 00:07:55,509 --> 00:08:01,930 Entonces, si choca contra la raqueta, cambia la dirección, igual que si choca contra el fondo. 102 00:08:04,560 --> 00:08:11,560 Para el choca, o sea, esa palabra choca, en realidad lo que he hecho es programar que la distancia, o sea, que se cumpla esa condición. 103 00:08:12,980 --> 00:08:16,680 Luego he añadido aquí abajo lo que va a controlar el movimiento de la raqueta. 104 00:08:16,680 --> 00:08:31,019 Si pulso la tecla up, se va a mover hacia arriba menos 15, o sea, va a cambiar su posición 15 píxeles hacia arriba y si pulso la tecla down, la flecha hacia abajo, pues se va a mover hacia abajo. 105 00:08:32,279 --> 00:08:44,919 Después, estos dos condicionales lo que hacen es que la raqueta no desaparezca, que si yo me voy arriba del todo, no me deja avanzar más y si me voy abajo del todo, tampoco me deja avanzar más. 106 00:08:44,919 --> 00:08:52,139 Si no ponéis esos dos, pues la raqueta desaparece de la pantalla porque seguiría sumando la posición de la raqueta. 107 00:08:53,740 --> 00:08:55,080 Esta sería la segunda parte. 108 00:08:55,700 --> 00:09:05,419 La parte un poco más difícil es este if de aquí, que es el que controla si rebota o no rebota, si coincide o no coincide en la posición con la raqueta. 109 00:09:05,419 --> 00:09:15,659 Bueno, os he intentado dibujar aquí un poco la condición que hace que la raqueta haga rebotar a la bola 110 00:09:15,659 --> 00:09:18,980 El if, ese un poco más complicado que tenéis 111 00:09:18,980 --> 00:09:22,940 A ver si con el dibujo lo entendéis un poco mejor 112 00:09:22,940 --> 00:09:29,139 Entonces, bola X lo que marca es la posición del centro de la bola 113 00:09:29,139 --> 00:09:32,200 Raqueta X lo que marca es esta esquina de arriba 114 00:09:32,679 --> 00:09:42,179 Entonces, si resto esta coordenada, que sería desde aquí hasta el borde, menos esta coordenada, lo que tengo es la distancia entre la bola y la raqueta, que sería esto de aquí. 115 00:09:42,179 --> 00:09:56,240 Entonces, si la distancia entre la bola y la raqueta es más pequeño que lo que mide la raqueta en x más el radio de la bola, es que la bola está más cerca de la raqueta de lo que debería. 116 00:09:56,240 --> 00:10:03,200 ¿Vale? Eso sería la primera condición que tiene que cumplir para que la raqueta haga rebotar la pelota 117 00:10:03,200 --> 00:10:07,659 La segunda y la tercera condición tienen que ver con la posición en Y 118 00:10:07,659 --> 00:10:13,139 Entonces, bueno, esto es el mismo dibujo de antes y le he añadido la posición en Y de la raqueta 119 00:10:13,139 --> 00:10:20,179 ¿Vale? La posición en Y de la bola y la posición en Y más lo que mide la raqueta 120 00:10:20,179 --> 00:10:26,940 entonces si la coordenada y de la bola que sería el centro de la bola en y es mayor que la posición de la raqueta 121 00:10:26,940 --> 00:10:34,940 es decir si está por debajo de esta línea y además está por encima de esta línea que sería esta otra condición de aquí 122 00:10:34,940 --> 00:10:39,340 pues entonces es cuando tiene que rebotar, se tienen que dar las tres condiciones a la vez 123 00:10:39,340 --> 00:10:44,940 que en la coordenada x estén cerca y que en la coordenada y esté entre estas dos líneas 124 00:10:45,620 --> 00:10:49,679 y eso es lo que se escribe en esa línea y es lo que hace que la bola rebote 125 00:10:49,679 --> 00:11:03,559 Bueno, una vez que tenemos la bola que rebota y la raqueta que puede parar esa bola para que no toque la pared del fondo 126 00:11:03,559 --> 00:11:07,639 Vamos a añadir una variable que nos va a llevar la cuenta de cuántas vidas tenemos 127 00:11:07,639 --> 00:11:12,659 Pues yo he puesto una variable entera que la he llamado vidas y que tiene un valor inicial de 5 128 00:11:12,659 --> 00:11:15,320 Así que en mi juego va a haber 5 vidas iniciales 129 00:11:15,320 --> 00:11:21,340 Está al inicio del programa, igual que antes hay que ir añadiendo lo que se ha marcado en amarillo al programa anterior 130 00:11:21,340 --> 00:11:30,080 Más o menos manteniendo las líneas sabéis dónde colocarlo, ¿vale? En la lista de las variables. 131 00:11:30,759 --> 00:11:35,919 En la función draw vamos a añadir cómo vamos a restar una vida, ¿vale? 132 00:11:35,919 --> 00:11:46,100 Y vamos a restar la vida si la coordenada x de la bola se hace más pequeña o justo llega a ser como el radio y un poquito más. 133 00:11:46,100 --> 00:11:52,779 ¿Vale? Esto con el igual igual, que quiere decir exactamente igual, puede que no funcione si no se consigue exactamente este número. 134 00:11:52,919 --> 00:11:55,559 Entonces también lo podéis hacer igual con el menor. 135 00:11:56,519 --> 00:12:05,919 ¿Vale? Si la coordenada X de la bola supera a la raqueta o se acerca mucho al borde, lo que vamos a hacer es restar una vida y rebotar. 136 00:12:06,940 --> 00:12:10,620 Y además vamos a mostrar un texto que nos diga cuántas vidas tiene. 137 00:12:10,620 --> 00:12:15,659 Esto también es un elemento nuevo, entonces llamamos a una función mostrar vidas, que es esta que os he puesto aquí abajo, 138 00:12:15,779 --> 00:12:23,120 que es una función que simplemente va a escribir un texto en tamaño 32, eso también podéis elegirlo como queráis. 139 00:12:23,259 --> 00:12:34,559 El texto que me va a mostrar es la palabra vidas en la posición 250, 30 y después la variable vidas, que en principio va a ser un 5, en la posición 350, 30. 140 00:12:34,559 --> 00:12:40,620 ¿Vale? Entonces, si le doy al play, pues lo único que ha cambiado es este texto que ha aparecido aquí 141 00:12:40,620 --> 00:12:43,740 Y que ahora, bueno, ahora he hecho una cosa rara 142 00:12:43,740 --> 00:12:50,940 Si la bola supera a la posición de la raqueta, ¿veis? Las vidas van bajando 143 00:12:50,940 --> 00:12:56,399 ¿Vale? Si consigo pararla, no baja la vida, pero si va tocando el borde 144 00:12:56,399 --> 00:13:01,600 O sea, si pasa de la posición de la raqueta, eso se puede hacer de diferentes formas 145 00:13:01,600 --> 00:13:03,179 Así que las vidas se van restando 146 00:13:03,179 --> 00:13:05,379 vale, bueno, lo último ya que nos queda 147 00:13:05,379 --> 00:13:06,940 es que si las vidas llegan a cero 148 00:13:06,940 --> 00:13:08,919 lo que voy a poner es un 149 00:13:08,919 --> 00:13:10,879 llamar a una función que he llamado game over 150 00:13:10,879 --> 00:13:13,440 que lo único que va a poner es un decorado 151 00:13:13,440 --> 00:13:15,240 con la palabra game over en rojo 152 00:13:15,240 --> 00:13:17,080 voy a parar la bola 153 00:13:17,080 --> 00:13:19,440 y voy a volver 154 00:13:19,440 --> 00:13:21,080 a escribir las vidas, vale 155 00:13:21,080 --> 00:13:23,320 y con eso estaría el programa 156 00:13:23,320 --> 00:13:24,879 terminado, la parte básica 157 00:13:24,879 --> 00:13:27,259 vale, con esto es un 5, en realidad lo único que 158 00:13:27,259 --> 00:13:29,220 tenéis que hacer es seguir el vídeo y el pdf 159 00:13:29,220 --> 00:13:31,019 e irlo copiando e intentar entenderlo 160 00:13:31,360 --> 00:13:35,980 Para sacar el 10, pues se pueden añadir muchas posibilidades. 161 00:13:36,139 --> 00:13:41,179 Por ejemplo, podemos añadir o aumentar la velocidad de la bola según van bajando las vidas. 162 00:13:41,799 --> 00:13:43,559 Podemos reducir el tamaño de la raqueta. 163 00:13:44,080 --> 00:13:47,759 Podemos añadir una segunda raqueta y hacer que jueguen dos jugadores. 164 00:13:48,620 --> 00:13:51,299 Eso habría que poner dos variables vida, es un poco más complicado, 165 00:13:51,299 --> 00:13:56,840 pero bueno, yo al que se anime a hacerlo, pues le animo a que lo haga y que me pregunte si tiene dudas. 166 00:13:56,840 --> 00:14:02,899 ¿Vale? O también es válido si diseñáis un juego con las mismas condiciones que os he puesto en la práctica 167 00:14:02,899 --> 00:14:07,879 Y que sea totalmente diferente, ¿vale? No tiene por qué ser exactamente el juego que yo os propongo 168 00:14:07,879 --> 00:14:12,740 ¿Vale? Esto es un juego muy básico y tiene muchas formas de mejora 169 00:14:12,740 --> 00:14:14,940 Y seguro que hay algún fallo 170 00:14:14,940 --> 00:14:18,480 Pero bueno, lo importante es un poco entender cómo funcionan los videojuegos 171 00:14:18,480 --> 00:14:21,620 Y aunque parezca todo muy complicado, todo se reduce a lo mismo 172 00:14:21,620 --> 00:14:24,860 ¿Vale? Al final todos los juegos, por muy complicados que sean 173 00:14:24,860 --> 00:14:28,879 están programados internamente de forma parecida a esto. 174 00:14:30,080 --> 00:14:32,759 Bueno, espero recibir vuestros juegos, a ver qué tal os salen.