Ping Pong con Scratch

2 de octubre de 2022

Durante las primeras semanas del curso 2022-2023 hemos estado trabajando en un sencillo videojuego que a much@s de l@s padres/madres seguro que les traen muy buenos recuerdos. Se trata de un videojuego en el que tendremos una bola que va rebotando constantemente por la pantalla y que tendremos que evitar que toque la parte inferior de la pantalla haciendo uso de una pala para golpearla. ¿Os recuerda a algo? Sí, estáis pensando en Arkanoid, aunque en este caso, de momento no romperemos ladrillos (aunque todo se andará....). El sistema de puntos, por el momento, será muy sencillo: cada vez que la pala golpee la pelota, obtendremos un punto. Cuando se llegue a un número de puntos determinado (por ejemplo, 10), habremos ganado el juego. Por el contrario, si la pelota toca la parte inferior de la pantalla (en el que tendremos una línea roja), el juego finalizará y habremos perdido.

Puesto que se trata de la primera actividad del 2022-2023, que no todas las familias han podido venir todos los días y que, todo hay que decirlo, el videojuego tiene su complejidad, nos gustaría mostrar paso a paso cómo se desarrolla el programa completo. Esta es una de las múltiples soluciones que se pueden encontrar. Por supuesto, seguro que existen muchas otras tan válidas o más que esta. ¡Os animamos a profundizar y hacer todas las pruebas que se os ocurran!

En primer lugar, y como es habitual, lo primero será crear los personajes con los que vamos a interaccionar. En este caso, son tres, como se ve a continuación:

Personajes

Realmente, en Scratch, los personajes se llaman Ball, Paddle y Line, pero nosotros los hemos renombrado para que sea más fácil después programarlos y hacer referencia entre ellos.

En segundo lugar, tendremos que elegir los fondos. En total, vamos a usar los siguientes dos fondos:

Principal, que se utilizará durante el juego habitual. Se trata de un fondo predefinido de Scratch llamado Neon Tunnel, dentro de la categoría Espacio
You Win, que se utilizará cuando logremos ganar el juego. Este fondo se puede construir a partir del fondo Party, dentro de la sección Interiores, editándolo con el texto de You Win (haciendo uso del icono de crear texto, representado con una T).

Al igual que hacíamos con los personajes, también es recomendable renombrar los fondos a "Principal" y "You Win", pues nos facilitará mucho la programación cuando intentemos cambiar los fondos.

A continuación, se muestran los fondos:

Fondo Principal

Fondo You Win

Ahora vamos a ir programando poco a poco hasta conseguir el juego completo

Hacer que la bola se mueva constantemente y rebote

La bola será el personaje donde se programe gran parte del videojuego. Lo primero que tenemos que hacer es hacer que la bola esté constantemente moviéndose y rebotando por la pantalla. Para ello, la secuencia de programación (o script, recordad esta palabra) será la siguiente:

Script movimiento bola

¿A qué es sencillo? Únicamente hemos transcrito la frase "todo el rato la bola se tiene que mover y rebotar si toca un borde" a bloques de Scratch. Recordad que hay que asociar la secuencia a un evento. En este caso, el evento es pulsar la bandera verde, que suele ser lo que se usa para iniciar un programa, pero hay quien prefiere iniciarlo cuando se pulse la tecla del espacio (barra espaciadora). ¡Os animamos a hacer todas las pruebas que queráis!

Golpear la bola con la pala

Vamos al siguiente paso: golpeo de la bola por parte de la pala. ¿Dónde programamos esta parte? ¿En la bola o en la pala? Pues bien, se podría hacer en ambos personajes, pero, puesto que cuando golpeemos la bola ésta tiene que cambiar de dirección y moverse, lo mejor es programarla en la bola. De lo contrario, habría que utilizar mecanismos de envío de mensajes para que desde la pala se le "dijera" a la bola que cambiara de dirección. Por tanto, para no complicarlo, vamos a hacerlo en la bola. En lenguaje natural, lo que queremos es que "de forma indefinida, cuando se detecte que está chocando con la pala, la bola debe cambiar de dirección". Por tanto, sería algo así:

Script golpeo de bola

Fácil, ¿verdad? ¿Por qué lo giramos 180 grados? Recordad las direcciones de los personajes, el círculo de 360 grados y todas esas cosas que ser verán en mates en el cole. Si giramos 180 grados (en cualquier dirección, es indiferente) lo que haremos es que la bola cambie completamente el sentido. ¿Por qué justo después de girarlo lo movemos 10 pasos y esperamos 0.5 segundos (medio segundo)? Muy fácil, si no lo hacemos corremos el riesgo de quedar en un bucle infinito tocando la pala y cambiando de dirección la bola, pero sin avanzar (dependiendo de la caprichosa ejecución del programa) Al esperar el medio segundo, no se volverá a comprobar inmediatamente si la bola está tocando la pala, sino que se le dará un pequeño tiempo para que la bola se aleje de la pala. ¿A qué a algun@s os ha pasado en algún momento?

Detectar el choque de la bola con la línea

Perfecto, ahora vamos a la detección del choque de la bola con la línea, que provocará que el juego se acabe. De nuevo, en lenguaje natural sería algo así como "todo el rato, cuando se detecte que la bola está chocando con la línea, se detiene todo". ¿Y cómo lo hacemos? Pues así:

Script detección fin de juego

En este momento, ya casi podríamos jugar con el videojuego pero nos falta algo muy importante: poder mover la pala. Vamos a ello

Mover la pala

Aunque se puede hacer de muchas formas, una de las más sencillas para luego jugar es hacerlo con el ratón (o con el dedo en el caso de las tablets). Lo que haremos es hacer que la pala siga al ratón, pero sin moverse verticalmente (hacia arriba o hacia abajo). Por tanto, la secuencia de programación es algo así:

Script movimiento de pala

Recordad que la posición de la x (bloque "posición x del ratón") se puede encontrar en los bloques de sensores. ¿Por qué cambiamos la X al valor de la posición del ratón y la Y la ponemos a un número fijo (-160)? Pues para que la pala sólo se mueva en horizontal (de izquierda a derecha), manteniendo la misma posición vertical (recordad el eje X y el eje Y). Puesto que la bola la vamos moviendo en incrementos de 10 (bloque mover 10 pasos), es importante que la pala esté a una distancia mayor de 10 de la línea, pues de lo contrario podría darse el caso de tocar la línea completamente y atravesar la pala. ¿Os ha pasado a algun@?

Pues bien, en este momento, ya podríamos empezar a jugar un poco con nuestro juego. Vamos ahora con la puntuación.

Contar los puntos

¿Cómo podríamos contar los puntos? Ah, claro, con una variable. ¡Pues vamos a ello! Creamos una variable con un nombre significativo, como puede ser "Puntos", "Contador puntos" o "Contador". Es muy importante siempre elegir nombres buenos y representativos de las variables, pues de lo contrario luego será complicado que nuestro código se entienda fácilmente. Nosotros vamos a llamarle simplemente "Puntos". Una vez creada la variable y elegido el nombre, cada vez que detectemos que la bola toca la pala, la incrementaremos en uno. Por tanto, la secuencia de programación nos quedaría así (daos cuenta de que modificamos el script con el que golpeábamos a la bola):

Script golpeo de bola con contador de puntos

Ganar la partida

Para ganar la partida deberemos conseguir un número determinado de puntos. Esto se puede hacer de muchas formas, pero vamos con una que es súper sencilla (posiblemente, la más sencilla). Para ello, creamos una nueva secuencia de programación (o script, como ya hemos dicho antes) dentro del personaje de la bola que lo que hará es "esperar hasta que tengamos 10 puntos". ¿Cómo? Muy fácil, existe un bloque para ello. Una vez que tengamos 10 puntos, cambiaremos al fondo de "You Win" y pararemos la partida.

Script detección partida ganada

Mejoras y solución de pequeños problemas

Si hemos llegado a este punto, veremos que el juego funciona, pero son necesarias una serie de mejoras, pues de lo contrario tendremos ciertos problemas. Algunos de los problemas son:

Después de la primera partida la bola no empieza donde nos gustaría

Para ello, habrá que establecer la posición inicial al comienzo del juego (por ejemplo, en el script del movimiento de la bola, justo). Hay muchas formas de situarla, una de ellas puede ser situarla en medio de la pantalla (x = 0) y arriba (y = 160). Esto es lo que se conoce como inicialización. Al igual que las variables, los personajes también tienen que ser inicializados antes de utilizarlos. En cuanto a la dirección en la que la bola comienza, también podría ser inicializada. Una opción, es hacerlo apuntando a una dirección aleatoria entre 105 y 265º, para que vayan hacia abajo de forma imprevista.

No da tiempo a manejar la bola, pues según se pulsa la bandera, se comienza a mover

Para solucionar este problema se puede introducir una espera de, por ejemplo, un segundo antes de mover la bola.

Cuando pulsamos la bandera verde, la pala automáticamente se va a la izquierda

Esto se debe a que hemos dicho a la pala que "todo el rato se vaya a la posición X del ratón". Puesto que el ratón está a la izquierda (la bandera verde está a la izquierda), la pala también se va hacia allí. Para solucionarlo, una espera de un segundo antes de mover la pala es suficiente.

La bola, cuando golpea en la pala, sale en la misma dirección por la que llega

Esto puede llegar a ser un problema, pues si la bola cae completamente vertical, al rebotar volverá a salir verticalmente, de modo que esté botando permanentemente como un balón de baloncesto (lo que haría que el juego fuera muy aburrido). Para ello, en el script de golpeo de la bola se puede girar un número de grados aleatorio entre 170 y 190, por ejemplo, para que la bola cambie la dirección pero con pequeñas variaciones.

Cuando vamos a la pantalla de You Win, la bola, la pala y la línea siguen en la pantalla

Esto lo podemos solucionar introduciendo un script en cada uno de los personajes que haga que "cuando el fondo cambie a You Win, esconder el personaje"

Después de ganar una partida, si pulsamos de nuevo la bandera verde, la bola, la pala y la línea no vuelven a aparecer

Este problema es una consecuencia de solucionar el problema anterior. ¿Cómo se soluciona? Muy sencillo, al inicio del programa (cuando se pulsa la bandera verde), se muestran los personajes. Y, ya de paso, los colocamos (con bloques "Ir a"), por si se nos han descolocado por accidente. Esto es parte de la inicialización anteriormente comentada.

Cuando empezamos una nueva partida, el contador de puntos no está a cero

El problema habitual: hemos olvidado la inicialización. Cuando usamos una variable, dijimos que elegir un nombre adecuado es importante. Pero hay otro paso que lo es incluso más: la inicialización. Muchos errores de programas complejos se deben a la no inicialización de las variables. Por tanto, hay que recordar lo siguiente: siempre que usemos una variable es necesario inicializarla. ¿Y dónde la inicializamos? Pues un buen punto es al comienzo del programa, cuando se pulsa la bandera verde.