Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

El juego del pong en processing - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 30 de enero de 2021 por Inmaculada M.

343 visualizaciones

Práctica final del bloque de programación en processing

Más información Transcripción

Descargar la transcripción

Bueno, esta última práctica consiste en un poco recopilar todo lo que hemos ido haciendo en las anteriores prácticas 00:00:07
y hacer un juego sencillo, el juego que os propongo es el juego del Pong, 00:00:14
en el que hay una pelota que rebota y que paramos o no paramos esa pelota con una raqueta. 00:00:21
Entonces os lo he puesto en la práctica en el PDF para que vayáis siguiendo paso a paso 00:00:29
y vayáis incorporando cada vez más dificultad al programa. 00:00:33
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. 00:00:37
Vale, entonces, lo primero que tenéis que conseguir es lo que tenéis en el PDF marcado con el número 1 00:00:50
Y es un programa en el que haya una bola que rebota 00:00:56
Eso ya lo hemos hecho en otras prácticas 00:00:59
Y simplemente lo único, la única novedad es que todos los datos están puestos con variables 00:01:01
Para que luego se puedan modificar 00:01:09
Si queremos que la bola vaya más rápida o rebote de otra manera 00:01:11
Pues si lo ponemos con variables en vez de con números fijos, pues eso lo podemos modificar 00:01:14
entonces se crean cinco variables 00:01:19
la primera es el diámetro de la bola 00:01:22
que podemos hacer que sea luego más grande o más pequeña 00:01:24
cambiando esa variable 00:01:26
bolaX y bolaY son las coordenadas 00:01:27
X e Y de la pelota o de la bola 00:01:30
y avance bolaX y avance bolaY 00:01:32
es lo que va a avanzar en cada una de las direcciones 00:01:35
le he dado unos valores iniciales 00:01:37
que también lo podéis cambiar y adaptar 00:01:39
según cada uno la versión del juego que vaya a hacer 00:01:41
en la función Z 00:01:43
bueno, he definido una pantalla de 600x400 00:01:46
y luego he generado un número aleatorio, esto es una función nueva que se llama random 00:01:48
y lo que hace es que genera un número que es un número que puede ser decimal 00:01:54
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. 00:02:00
Este int que he puesto aquí delante es que como este número se genera, como no genera un número entero 00:02:09
al ponerle el int delante ya lo convierte en número entero 00:02:14
entonces la variable bolaX es un número entero que va a estar entre 0 y el ancho 00:02:17
y la variable bolaY va a ser otro número entero que va a estar entre 0 y el alto 00:02:22
entonces cada vez que ejecutemos el programa la posición inicial va a ser diferente 00:02:26
para que tenga gracia, si ponemos un número fijo pues siempre se va a ejecutar igual 00:02:30
vale, después en la función draw lo que hay que poner es 00:02:34
bueno, yo he puesto un fondo amarillo y un relleno de azul 00:02:38
podéis elegir los valores o los colores que queráis 00:02:41
y llamamos a la función bola que es la que dibuja la bola. 00:02:44
Entonces en la función bola lo que estoy dibujando es una elipse, 00:02:48
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 00:02:52
en el que las coordenadas son bola X y bola Y y dos veces el diámetro para que sea un círculo. 00:02:56
Incrementa la posición de la bola X y de la bola Y continuamente para que se esté moviendo 00:03:04
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. 00:03:08
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, 00:03:20
es decir, el radio, eso es para que no desaparezca como la bola la está controlando desde el centro, 00:03:27
si pongo solo el diámetro desaparece media bola al chocar con la pantalla. 00:03:33
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? 00:03:38
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. 00:03:57
Podéis probar ahí diferentes números y veis que la bola pues hace alguna sensación rara, como no poner nada. 00:04:09
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. 00:04:15
Y si estaba restando, cambia sumando, o sea, le cambia el signo al sentido del movimiento, ¿vale? 00:04:25
Y lo mismo para el movimiento vertical, por arriba y por abajo, bueno, por abajo y por arriba. 00:04:31
Bueno, para el siguiente paso vamos a añadir la raqueta, ¿vale? 00:04:41
La raqueta, voy a quitar este, porque ahora el que vamos a poner es uno con la raqueta. 00:04:46
Una vez que tenemos la pelota que rebota añadimos a nuestro programa una raqueta 00:04:51
Entonces lo tenéis también ahí detallado en el pdf en el punto 2 00:05:03
Se trata de coger el mismo programa anterior y añadirle líneas entre medias para poner la raqueta 00:05:07
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 00:05:18
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 00:05:25
que lo he puesto relacionado que sea seis veces lo que mide en x 00:05:30
por si quiero cambiar el tamaño que se cambie de forma proporcional 00:05:34
y luego la posición de la raqueta en x y la posición de la raqueta en y 00:05:36
que sería esta esquinita de aquí arriba, las coordenadas de esa esquinita de ahí arriba 00:05:41
porque no he puesto de momento lo del regmo de center 00:05:45
entonces lo va a controlar desde la esquina superior izquierda 00:05:48
luego he puesto una variable booleana que inicialmente es verdadera 00:05:51
es para que detecte si es la primera vez 00:05:55
porque lo que voy a programar es que la primera vez la raqueta aparezca en el centro de la pantalla 00:05:57
y en realidad esta no hace falta ahora mismo 00:06:01
que lo intenté hacer con ceros y unos, esta no se me ha colado 00:06:07
vale, a ver, el setup en principio es lo mismo que hemos visto antes 00:06:11
no hay que cambiar nada, estas tres líneas también 00:06:14
y aquí es donde pongo que si primera vez es verdadero 00:06:18
ya sabéis que no hace falta ponerlo de que es verdadero 00:06:21
solo cuando es una variable booleana 00:06:23
si ponemos si primera vez 00:06:25
ya interpreta que es 00:06:26
si es verdadero 00:06:29
lo que hacemos es que la posición de la raqueta ahí 00:06:30
es la mitad de la altura menos la mitad 00:06:32
de lo que mide la raqueta 00:06:35
bueno esto simplemente lo que hace es colocar la raqueta inicialmente 00:06:36
en el centro 00:06:39
y cambiamos a falso 00:06:39
para que ya no vuelva a ejecutar nunca más este condicional 00:06:43
vale 00:06:45
este rectángulo lo que hace es dibujar la raqueta 00:06:46
vale, dibuja un rectángulo 00:06:49
con estas dos coordenadas y este tamaño 00:06:50
y en este condicional de aquí lo que vamos a ver es si la raqueta y la pelota chocan 00:06:53
es un poquito complicado porque lo que vamos a detectar es si la posición de la bola 00:07:00
menos la posición de la raqueta, es decir la distancia entre la bola y la raqueta 00:07:07
es más pequeña que lo que mide la raqueta menos el radio de la bola 00:07:12
y esto es un condicional en el que se cumplen, se tienen que cumplir tres cosas a la vez, 00:07:16
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. 00:07:24
Es decir, que la distancia entre la coordenada X de la bola y de la raqueta sea menor que la raqueta y el radio 00:07:32
y además que esté en esta altura, entre esta altura y esta altura, o sea que se tienen que dar tres condiciones. 00:07:40
Ahora os pongo un dibujo. 00:07:46
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. 00:07:48
Entonces, si choca contra la raqueta, cambia la dirección, igual que si choca contra el fondo. 00:07:55
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. 00:08:04
Luego he añadido aquí abajo lo que va a controlar el movimiento de la raqueta. 00:08:12
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. 00:08:16
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. 00:08:32
Si no ponéis esos dos, pues la raqueta desaparece de la pantalla porque seguiría sumando la posición de la raqueta. 00:08:44
Esta sería la segunda parte. 00:08:53
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. 00:08:55
Bueno, os he intentado dibujar aquí un poco la condición que hace que la raqueta haga rebotar a la bola 00:09:05
El if, ese un poco más complicado que tenéis 00:09:15
A ver si con el dibujo lo entendéis un poco mejor 00:09:18
Entonces, bola X lo que marca es la posición del centro de la bola 00:09:22
Raqueta X lo que marca es esta esquina de arriba 00:09:29
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í. 00:09:32
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. 00:09:42
¿Vale? Eso sería la primera condición que tiene que cumplir para que la raqueta haga rebotar la pelota 00:09:56
La segunda y la tercera condición tienen que ver con la posición en Y 00:10:03
Entonces, bueno, esto es el mismo dibujo de antes y le he añadido la posición en Y de la raqueta 00:10:07
¿Vale? La posición en Y de la bola y la posición en Y más lo que mide la raqueta 00:10:13
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 00:10:20
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í 00:10:26
pues entonces es cuando tiene que rebotar, se tienen que dar las tres condiciones a la vez 00:10:34
que en la coordenada x estén cerca y que en la coordenada y esté entre estas dos líneas 00:10:39
y eso es lo que se escribe en esa línea y es lo que hace que la bola rebote 00:10:45
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 00:10:49
Vamos a añadir una variable que nos va a llevar la cuenta de cuántas vidas tenemos 00:11:03
Pues yo he puesto una variable entera que la he llamado vidas y que tiene un valor inicial de 5 00:11:07
Así que en mi juego va a haber 5 vidas iniciales 00:11:12
Está al inicio del programa, igual que antes hay que ir añadiendo lo que se ha marcado en amarillo al programa anterior 00:11:15
Más o menos manteniendo las líneas sabéis dónde colocarlo, ¿vale? En la lista de las variables. 00:11:21
En la función draw vamos a añadir cómo vamos a restar una vida, ¿vale? 00:11:30
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. 00:11:35
¿Vale? Esto con el igual igual, que quiere decir exactamente igual, puede que no funcione si no se consigue exactamente este número. 00:11:46
Entonces también lo podéis hacer igual con el menor. 00:11:52
¿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. 00:11:56
Y además vamos a mostrar un texto que nos diga cuántas vidas tiene. 00:12:06
Esto también es un elemento nuevo, entonces llamamos a una función mostrar vidas, que es esta que os he puesto aquí abajo, 00:12:10
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. 00:12:15
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. 00:12:23
¿Vale? Entonces, si le doy al play, pues lo único que ha cambiado es este texto que ha aparecido aquí 00:12:34
Y que ahora, bueno, ahora he hecho una cosa rara 00:12:40
Si la bola supera a la posición de la raqueta, ¿veis? Las vidas van bajando 00:12:43
¿Vale? Si consigo pararla, no baja la vida, pero si va tocando el borde 00:12:50
O sea, si pasa de la posición de la raqueta, eso se puede hacer de diferentes formas 00:12:56
Así que las vidas se van restando 00:13:01
vale, bueno, lo último ya que nos queda 00:13:03
es que si las vidas llegan a cero 00:13:05
lo que voy a poner es un 00:13:06
llamar a una función que he llamado game over 00:13:08
que lo único que va a poner es un decorado 00:13:10
con la palabra game over en rojo 00:13:13
voy a parar la bola 00:13:15
y voy a volver 00:13:17
a escribir las vidas, vale 00:13:19
y con eso estaría el programa 00:13:21
terminado, la parte básica 00:13:23
vale, con esto es un 5, en realidad lo único que 00:13:24
tenéis que hacer es seguir el vídeo y el pdf 00:13:27
e irlo copiando e intentar entenderlo 00:13:29
Para sacar el 10, pues se pueden añadir muchas posibilidades. 00:13:31
Por ejemplo, podemos añadir o aumentar la velocidad de la bola según van bajando las vidas. 00:13:36
Podemos reducir el tamaño de la raqueta. 00:13:41
Podemos añadir una segunda raqueta y hacer que jueguen dos jugadores. 00:13:44
Eso habría que poner dos variables vida, es un poco más complicado, 00:13:48
pero bueno, yo al que se anime a hacerlo, pues le animo a que lo haga y que me pregunte si tiene dudas. 00:13:51
¿Vale? O también es válido si diseñáis un juego con las mismas condiciones que os he puesto en la práctica 00:13:56
Y que sea totalmente diferente, ¿vale? No tiene por qué ser exactamente el juego que yo os propongo 00:14:02
¿Vale? Esto es un juego muy básico y tiene muchas formas de mejora 00:14:07
Y seguro que hay algún fallo 00:14:12
Pero bueno, lo importante es un poco entender cómo funcionan los videojuegos 00:14:14
Y aunque parezca todo muy complicado, todo se reduce a lo mismo 00:14:18
¿Vale? Al final todos los juegos, por muy complicados que sean 00:14:21
están programados internamente de forma parecida a esto. 00:14:24
Bueno, espero recibir vuestros juegos, a ver qué tal os salen. 00:14:30
Subido por:
Inmaculada M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
343
Fecha:
30 de enero de 2021 - 19:14
Visibilidad:
Público
Centro:
IES PROFESOR JULIO PÉREZ
Duración:
14′ 36″
Relación de aspecto:
1.78:1
Resolución:
1024x576 píxeles
Tamaño:
218.01 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid