Code Club Cossío – Sesión 11

¡Despegamos y esquivamos al asteroide!

12 de mayo de 2022

Durante las últimas sesiones, hemos estado trabajando en nuestro programa del cohete. Partiendo de lo realizado en la sesión 10, hemos desarrollado un pequeño videojuego consistente en esquivar un asteroide hasta conseguir un número de puntos determinado para ganar la partida. En el caso de que choquemos con el asteroide, la perderemos.

Puesto que hemos tenido la Semana Santa de por medio y, puesto que algunas familias no han podido venir a todas las sesiones, nos gustaría mostrar paso a paso cómo se desarrolla el programa completo. 

En primer lugar, tenemos dos personajes: el cohete, al que haremos despegar y le guiaremos por el espacio sideral, y el planeta, que usaremos como un asteroide fuera de control que ataca a nuestro cohete.

En segundo lugar, tenemos los fondos. En total, vamos a usar los cuatro fondos siguientes:

  • Space: Se trata del fondo inicial, desde el que el cohete debe despegar. Es un fondo predefinido de Scratch que se puede encontrar en la sección Espacio.
  • Stars: Se corresponde con el fondo al que el cohete llegará una vez despegue y donde aparecerá el asteroide que habrá que esquivar. De nuevo, es un fondo predefinido de Scratch, en la sección Espacio.
  • Game Over: Es el fondo al que se irá en el caso de que el cohete choque con el asteroide. Este fondo se puede construir a partir del fondo Night City de Scratch, dentro de la sección Exteriores, editándolo con el texto de Game Over.
  • You Win: Es el fondo que apareceráen el caso de que se consiga una cantidad determinada de puntos (20 puntos, por ejemplo). Este fondo se puede construir a partir del fondo Party, dentro de la sección Interiores, editándolo con el texto de You Win.

Recordad renombrar los dos últimos fondos a “Game Over” y “You Win” (se hace desde la caja de texto que pone “Disfraz”), ya que de lo contrario será difícil hacer referencia a ellos desde los bloques donde se utilicen dichos fondos (bloques de eventos y cambio de fondo).

A continuación se muestran los diferentes fondos:

Space:

Stars:

Game Over:

You Win

Ahora vamos a programar a cada uno de los personajes. ¡Comencemos por el cohete!

Programación del cohete (Personaje “Rocketship”)

La secuencia de programación inicial (es decir, lo primero que se ejecutará cuando probemos nuestro programa) comienza con el bloque “al hacer clic en bandera verde”. Cuando se pulse, se ejecutarán una serie de fases (bloque de Mis Bloques) para dividir nuestro programa en pasos más simples, ya que si no nos quedaría una secuencia de programación muy larga. 

¡Vamos a explicar detalladamente cada uno de los bloques anteriores!

En el bloque Inicio se realizan las siguientes acciones para iniciar el programa:

  • Mostramos al cohete (bloque “mostrar)
  • Cambiamos al fondo Space (bloque “cambiar fondo a Space”) 
  • Establecemos uno de los disfraces del personaje cohete (bloque “cambiar disfraz a rocketship-e”).
  • Apuntamos en dirección 90 grados, para que el cohete apunte hacia arriba (bloque “apuntar en dirección 90”). Recordad que si el cohete “mira con sus ojos” hacia la derecha, que es donde están los 90 grados, su cabeza apuntará hacia arriba.
  • Situamos al cohete en un punto específico de la pantalla: centrado, con la x a 0, y abajo, con la y a -150 (bloque “ir a x: 0 y: -150).
  • Fijamos el tamaño al 50% (la mitad) para que no sea gigante (bloque “fijar tamaño al 50%”).

El bloque de la Cuenta Atrás es, posiblemente, el bloque técnicamente más complejo. Se trata de un bloque que recibe un parámetro con el “Contador Inicial” utilizado para realizar la cuenta atrás. Es decir, cuando usemos este bloque podremos decidir hacer la cuenta atrás desde 10 o desde otro valor diferente, como 3, para que no tardemos tanto (principalmente útil cuando estamos desarrollando y depurando nuestro programa). Por tanto, cuando llamamos al bloque Cuenta Atrás establecemos el valor del parámetro Contador Inicial. En el bloque de Cuenta Atrás se realizan las siguientes acciones:

  • Usamos una variable llamada “Contador” (previamente creada desde el botón “Crear una variable” dentro de la sección “Variables”) a la que le damos el valor inicial del parámetro “Contador Inicial”. Es decir, inicializamos la variable, algo imprescindible que no se nos tiene que olvidar nunca con una variable. Una variable sin inicializar ocasionará (casi) siempre un fallo en cualquier programa.
  • Entramos en un bucle que repetimos las mismas veces que el parámetro “Contador Inicial”. En cada vuelta del bucle, hacemos lo siguiente:
    • Decir el valor de la variable “Contador” durante 1 segundo (bloque “decir Contador durante 1 segundos”).
    • Restar uno al Contador (bloque “sumar a Contador -1), para que vaya diciendo, sucesivamente, los números de uno en uno, de la forma, 10, 9, 8, 7, …, 1. Recordad que sumar -1 es lo mismo que restar 1.

Nota: Por supuesto, este bucle se podría haber planteado de otra forma, pero con los conocimientos aprendidos hasta el momento se ha considerado que esta forma es la más “simple”.

  • Una vez el bucle se termina, el cohete dice “¡Despegamos!” (bloque “decir ¡Despegamos! durante 1 segundos”).

El bloque de Ignición es el más simple, pues sólo debemos cambiar el disfraz del cohete, para darle animación (bloque “cambiar disfraz a rocketship-a”).

El bloque Despegue, aunque es el más largo en número de instrucciones/pasos, realmente es muy simple, pues lo único que hace es girar el cohete hacia uno y otro lado (recordad que los giros se miden en grados), deslizarlo hacia arriba de la pantalla (la x cambia para corregir el movimiento del cohete de derecha a izquierda y la y cambia para que el cohete suba hacia arriba) y cambiarle el disfraz, para dotarlo de movimiento y animación.

El bloque de Cambio de Escenario es el último de los pasos que el cohete realiza cuando se pulsa la bandera verde. En este bloque, el cohete se vuelve a situar en la parte central e inferior de la pantalla (bloque “ir a x: 0 y: -150”) y se cambia al fondo de las estrellas (bloque “cambiar fondo a Stars”).

Hasta aquí, la parte sencilla 🙂 Ahora se complica un poquito más.

Seguimos en el cohete. ¿Qué ocurre cuando llegamos a la pantalla de las estrellas? En este momento, hay que guiar al cohete para que se mueva según queramos. Para ello, creamos las siguientes secuencias de programación:

De nuevo, hemos usado un bloque de Mis Bloques llamado Guiado. El motivo de hacerlo así es porque partíamos del programa de la sesión 10, donde Guiado era una de las fases del cohete. Como nos había quedado muy chula, hemos decidido mantenerlo, aunque se podría haber planteado de distinta manera. Cuando se cambia el fondo a Stars (bloque “cuando el fondo cambie a Stars”), el cohete muestra un texto de forma pensativa durante 2 segundos (bloque “pensar ¡Oh, oh! ¡Tengo que esquivar este asteroide! durante 2 segundos”). Una vez mostrado, comienza el guiado. En el bloque del Guiado, hacemos lo siguiente:

  • Fijamos el estilo de rotación a “en todas direcciones” (bloque “fijar estilo de rotación a en todas direcciones”), para que el cohete pueda apuntar a cualquier sitio con su cabeza.
  • Entramos en un bucle infinito (por siempre) en el que realizamos lo siguiente:
    • Apuntamos el cohete al puntero del ratón (bloque “apuntar hacia puntero del ratón).
    • Giramos 90 grados (bloque “girar ⃕ 90 grados”). Recordad que al apuntar, el cohete mirará con sus ojos, pero queremos que vaya “de cabeza”.
    • Deslizamos durante un segundo al puntero del ratón (bloque “deslizar en 1 segs a puntero del ratón”).

¿Qué nos queda en el cohete? Muy poco, tan sólo detectar el choque con el planeta, tras lo cual debemos ir a la pantalla de Game Over, mediante la Secuencia siguiente:

En la secuencia anterior, se parte del evento de cambio de fondo a Stars (bloque “cuando el fondo cambie a Stars”). Una vez “capturado” el evento, se realiza lo siguiente:

  • Se espera hasta que el cohete esté tocando el asteroide. En este caso usamos un bloque “esperar hasta que condición”, donde introducimos una condición “¿tocando Planet2?”, que podemos encontrar en la sección Sensores).
  • Se cambia el fondo a Game Over (bloque “cambiar fondo a Game Over”). 
  • Detenemos todas las secuencias que se puedan estar ejecutando (bloque “detener todos”). Si no hiciéramos esto, el asteroide y el cohete se seguirían moviendo, pero no queremos eso, queremos que todo se pare.

Lo último que tenemos que hacer con el cohete es ocultarlo cuando hayamos llegado a la pantalla de Game Over o de You Win. Por tanto, necesitamos dos secuencias de programación que escuchen en los eventos de llegar a esos fondos:

¿A que es sencillo y se entiende bien? En ambos, se esconde al cohete (bloque “esconder”).

Con esto ya hemos terminado el cohete. ¡Pasemos a programar al asteroide! 

Programación del asteroide (personaje “Planet2”)

La primera secuencia de programación que tenemos es la que se ejecutará cuando se pulse la bandera verde:

En el inicio, se realizan las siguientes acciones:

  • Escondemos la variable Puntos (bloque “esconder variable Puntos”). La variable puntos es una variable previamente creada que se encarga de ir almacenando los puntos que vamos consiguiendo durante el juego. Puesto que cuando se inicia el programa, mientras el cohete está despegando, no se quiere que se vea la variable, la escondemos.
  • Inicializamos los Puntos a 0 (bloque “dar a Puntos el valor 0”). Cuando empezamos nuestra partida queremos no tener puntos. Como hemos dicho antes, una variable sin inicializar suele ser un error, por eso hay que acordarse de establecer el valor inicial.
  • Escondemos al asteroide (bloque “esconder”), pues no queremos que aparezca hasta que el cohete haya despegado y haya llegado a las estrellas.

La siguiente secuencia de programación del asteroide comienza cuando el fondo se cambia a Stars (bloque “cuando el fondo cambie a Stars”).

Cuando el fondo cambia a Stars se realiza lo siguiente:

  • Mostramos nuestros Puntos, que están almacenados en una variable(bloque “mostrar variable Puntos”).
  • Situamos al asteroide en una posición determinada, por ejemplo, arriba en el centro (bloque “ir a x: 0 y: 127”). 
  • Fijamos el tamaño al 50%, para que no sea gigante, tal y como hicimos con el cohete (bloque “fijar tamaño al 50%”)
  • Mostramos al asteroide (bloque “mostrar”).
  • Esperamos 2 segundos, ya que al cohete le pusimos dos segundos a pensar el texto “¡Oh, oh! ¡Tengo que esquivar este asteroide!”. Si no pusiéramos 2 segundos de espera al asteroide, éste se empezaría a mover antes de que nosotros pudiéramos guiar al cohete. Es decir, hemos sincronizado mediante temporizadores (lo podríamos haber hecho pasando mensajes, pero eso lo dejamos para vosotros, ¡o para el próximo curso!).
  • Entramos en un bucle que repetimos para siempre (bloque “por siempre”). En el bucle hacemos lo siguiente:
    • Deslizamos el asteroide a una posición aleatoria durante 2 segundos (bloque “deslizar en 2 segs a posición aleatoria”). Dependiendo de la posición aleatoria que decida el programa (aleatoria, quiere decir, que no se sabe cuál va a ser y no se puede controlar), la velocidad será mayor o menor, ya que hemos dicho que hay que tardar 2 segundos en llegar a dicha posición. Cuanto más lejos esté un movimiento del siguiente, el asteroide irá más rápido (tardará el mismo tiempo, 2 segundos, en recorrer una distancia mayor, por lo que lo deberá hacer más deprisa).
    • Sumamos un punto. Si el cohete no se ha chocado con el asteroide aún, es momento de ganar un punto (bloque “sumar a Puntos 1”).
    • Evaluamos si hemos ganado la partida con un bloque condicional (bloque “si condición entonces”). La condición es que hayamos conseguido 20 puntos, es decir, que la variable Puntos valga 20. Para ello, habrá que crear una condición usando el bloque de la sección de Operadores correspondiente. ¡Este ha sido nuestro primer bloque condicional del curso! ¡No os preocupéis, el próximo curso haremos muchísimos más! Dentro del bloque condicional (es decir, si ya tenemos los 20 puntos, pues hemos cumplido la condición), hacemos lo siguiente:
      • Cambiamos el fondo a You Win (bloque “cambiar fondo a You Win”).
      • Detenemos todas las secuencias que se puedan estar ejecutando (bloque “detener todos”), de igual forma que hicimos con el cohete cuando detectaba el choque con el asteroide.

Para que el asteroide tenga sensación de movimiento, podemos hacer que gire todo el rato. Para ello, podemos crear una secuencia de programación cuando se produzca el evento de cambiar el fondo a Stars. Similar a la siguiente:


Es tan simple, que casi no necesita explicación, pero la damos, por si alguien está un poco despistado. Hacemos un bucle infinito (bloque “por siempre”) en el que giramos 15 grados en el sentido del reloj (bloque “girar ⃕ 15 grados”). ¿A qué es fácil y queda muy bien?

Por último, al igual que escondemos al cohete cuando llegamos al fondo de Game Over y de You Win, tenemos que hacer lo mismo con el asteroide. Las secuencias son las mismas que en el cohete:

Y por fin hemos acabado nuestro videojuego completo ¿Os ha parecido muy difícil? Esperamos que las explicaciones hayan quedado claras y que a todos os funcione correctamente. ¡A probarlo y a jugar!

¡Nos lo hemos pasado genial! A continuación, os dejamos el ejercicio completo:

https://scratch.mit.edu/projects/687650665/

¡Hasta la próxima!