Scratch Versión 2.0 Índice: 1. Programación con Scratch 2. Juego de frontón 1 3. Juego de frontón 2 4. Juego de obstáculos 5. Juego de asteroides 2 4 5 6 8 Este texto es la versión offline/imprimible de uno de los capítulos del libro de texto multimedia de la web educativa www.tecno12-18.com. Todos los derechos reservados. Se permite a los alumnos que han comprado una suscripción a la versión individual del libro que incluya este capítulo, y a los profesores de estos alumnos, mantener una copia de este archivo PDF y/o imprimirlo, en ambos casos para uso exclusivamente personal. En todos los demás casos no está permitida la reproducción total o parcial de esta obra, ni su almacenamiento en sistemas informáticos, ni la distribución mediante cualquier medio electrónico, mecánico u otros sin el permiso previo y por escrito de los titulares del copyright. 1. Programación con Scratch 1. Introducción a Scratch Scratch es un entorno de programación diseñado para enseñar a niños y jóvenes los fundamentos de la programación de ordenadores. Ha sido desarrollado por el Laboratorio de Medios del Instituto Tecnológico de Massachusetts (MIT), en Boston (EUA). Emplearemos la versión 3.0, que funciona en equipos Windows, Linux y Mac. Se usa online, accediendo a la web scratch.mit.edu. Scratch es útil para crear animaciones, cuentos interactivos y juegos. Nosotros lo usaremos para programar videojuegos sencillos. En las siguientes miniunidades haremos un juego de frontón, un juego de obstáculos y un juego de asteroides. Ayuda de Scratch: si quieres profundizar en el estudio de Scratch, te recomendamos que consultes el apartado Ideas de la web de Scratch: scratch.mit.edu/ideas. Encontrarás una guía de inicio, tarjetas con ejercicios sencillos y videotutoriales. 1.1. ¿En qué consiste programar un ordenador? Un programa es un conjunto de instrucciones, dispuestas ordenadamente, que describen cómo debe trabajar un ordenador. Llamamos programar a la tarea de diseñar y escribir las instrucciones que debe seguir un ordenador. Un programa se ejecuta cuando se inserta en la memoria de un ordenador (un chip que almacena información) y el microprocesador (el chip más importante del ordenador, por analogía se dice que hace la función de "cerebro") lo lee y comienza a seguir las instrucciones que hay en su interior. Los programas están formados por 3 bloques de instrucciones: la entrada, el proceso y la salida. 1. Bloque de entrada: son las instrucciones que indican al ordenador qué datos se deben captar de los periféricos de entrada (el ratón, el teclado, una pantalla táctil, etc.). 2. Bloque de proceso: son las instrucciones que describen qué se debe hacer con los datos que se han captado. 3. Bloque de salida: son las instrucciones que describen cómo se debe presentar el resultado en los periféricos de salida (la pantalla, los altavoces, la impresora, etc.). 1.2. Lenguajes de programación. Qué son Los ordenadores sólo entienden las instrucciones si se las damos como una secuencia determinada de señales eléctricas que entran por los terminales del microprocesador. Estas señales se almacenan en la memoria formando un conjunto de 0 (no entra corriente) y 1 (entra corriente). Es lo que se conoce como código máquina. Un programa, por lo tanto, no es más que una secuencia de 0 y 1. El problema es que a las personas nos resulta muy difícil escribir instrucciones en forma de secuencias de 0 y 1. Para ayudarnos con #include <iostream.h> este trabajo existen programas especializados denominados entornos de using namespace std; programación. Un entorno de programación permite escribir programas utilizando un código específico muy parecido al lenguaje humano, normalmente al inglés, llamado int main() { lenguaje de programación. A la derecha puedes ver un pequeño fragmento del código cout <<"Hello world!"; de un programa, el llamado código fuente, escrito en el lenguaje de programación C++. return 0; Cuando se acaba de escribir el código fuente, el mismo entorno de programación se } encarga de traducirlo a código máquina, para que pueda interpretarlo el ordenador. Esta traducción de un lenguaje a otro se denomina compilación. 1.2. Lenguajes de programación. Programación textual y programación visual Hay muchos lenguajes de programación: Visual basic, C++, var age = 15; Java, JavaScript, PHP, etc. Estos lenguajes, que son usados if( age > 18 ){ por los programadores profesionales, son lenguajes textuales. document.write("Qualifies for driving"); Se escriben línea a línea de forma similar a como escribimos un texto (ver imagen derecha). Cada línea de código es una else{ instrucción que debe ejecutar el ordenador. Son lenguajes muy document.write("Doesn't qualify for driving"); potentes, con poco código se pueden escribir muchas } instrucciones. Sin embargo, se necesitan muchas horas para aprenderlos a usar. Para que personas sin experiencia puedan empezar a programar de forma sencilla, se han inventado los lenguajes visuales, como Scratch. En los lenguajes visuales se programa uniendo bloques, que son dibujos que tienen código asociado. 1.3. Algoritmos Las instrucciones que forman un programa deben escribirse siguiendo un orden lógico para que el programa funcione correctamente. Antes de comenzar a escribir código hay que describir exactamente, paso a paso, qué queremos que haga el programa y en qué orden. Es lo que se conoce como algoritmo. La representación gráfica de un algoritmo se hace mediante un diagrama de flujo. www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 2 1.4. Estructuras básicas de programación El ordenador lee las instrucciones que hay en un programa de una a una y siguiendo un orden preestablecido, es lo que se llama el flujo del programa. Para definir qué flujo tendrá un programa que estamos escribiendo, podemos combinar diferentes estructuras de programación. A continuación veremos las estructuras de programación más comunes, son las que usaremos para hacer juegos en Scratch. Aprender a utilizar estas estructuras es fundamental para saber programar. 1.4.1. Estructura secuencial La estructura básica de todos los programas es la secuencial. Esto quiere decir que las instrucciones se ejecutan una tras otra, siguiendo el orden en el que se han escrito. El ordenador lee la primera línea que encuentra (la de arriba) y la ejecuta. Cada línea de código es una instrucción, una orden que debe cumplir. Después lee la siguiente línea y la ejecuta. Así sucesivamente hasta que llega a la última línea (la de abajo), donde el programa se detiene. En este ejemplo, el programa se inicia cuando se clica la bandera verde (línea 1). A continuación la mascota de Scratch se sitúa en el punto x=-200, y=0 (línea 2). Después espera 0,5 segundos (línea 3). De la misma manera, se van leyendo las siguientes líneas hasta llegar a la última (línea 10). Como puedes ver, las líneas 5 a 10 son 3 repeticiones de las líneas 3 y 4. 1.4.2. Estructuras de repetición. Bucle repeat Aunque la estructura secuencial es la base de todos los programas, también son muy frecuentes los bucles. Los bucles son repeticiones de una o varias instrucciones. Se usan para no tener que escribir el mismo código varias veces. En este ejemplo se utiliza el bucle repeat para ordenar al programa que repita las líneas de código 4 y 5. El número que hay después de la palabra "repeat" indica las veces que el bucle debe repetirse antes de continuar con la siguiente línea de la secuencia principal del programa. Se suele utilizar la letra "i" para indicar el número de la iteración (repetición). Este programa es equivalente al del ejemplo anterior, pero con un código algo más breve. 1.4.2. Estructuras de repetición. Bucle forever El bucle forever (en inglés, para siempre) es muy similar al repeat, solo que no acaba nunca. En esta página se ha modificado el ejemplo anterior y se ha sustituido el bucle repeat por un bucle forever. Se ha reducido el tiempo de espera (línea 4) y el incremento de la x (línea 5). El resultado es que, al clicar en la bandera verde, la mascota de Scratch va a la posición x =-200, y=0 y luego se inicia un bucle sin fin que lo hace avanzar poco a poco. Siguiendo este programa, el gato avanzaría indefinidamente hacia la derecha. Se para cuando llega al extremo derecho porque en Scratch los objetos no pueden salir del escenario. Operadores Antes de continuar, hacemos un paréntesis para hablar de los operadores. Son elementos de programación que permiten interrelacionar datos. Aquí puedes ver los más comunes: Suma, resta, multiplicación y división. Condición "menor que", "igual que" y "mayor que. Operador lógico AND: devuelve True si los dos operandos (los espacios hexagonales) son verdaderos, y False si al menos uno de los dos operandos es falso. Operador lógico OR: devuelve True si al menos uno de los dos operandos es verdadero. Número al azar: genera un número aleatorio comprendido entre los valores que indiquemos. www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 3 1.4.3. Estructuras condicionales. If... then... En muchas ocasiones un programa tiene que tomar una decisión en función de una condición externa. Algo así como: "Si pasa esto, entonces haz esto otro". Esto se implementa en los lenguajes de programación con la expresión inglesa "If... then...". Un ejemplo de la vida diaria es un paso de peatones con semáforo. Nuestra actuación será: "Si el semáforo está en rojo, entonces me paro". En un programa quedaría: "If semáforo = rojo then parar". En el ejemplo de esta página se ha añadido una estructura if... then... al programa anterior (líneas 4 y 5). El resultado es que el gato se para cuando llega a la posición x=200, en lugar de continuar a la derecha indefinidamente, como hacía antes. 1.4.3. Estructuras condicionales. If... then... else... A veces no es suficiente con especificar qué decisión tomar si se da una condición y también interesa determinar qué otra decisión tomar en caso de que la condición no se cumpla. Algo así como: "Si pasa esto, entonces haz aquello, si no, haz esto otro". En programación se implementa con la expresión inglesa "If... then... else...". Siguiendo con el ejemplo del paso de peatones, nuestra actuación será: "Si el semáforo está en rojo, entonces me paro, si no, paso". En el ejemplo de esta página se ha añadido una estructura if... then... else... al programa anterior (líneas 6 a 9). Esta hace que el gato diga "right" cuando su posición x es mayor que 0 y "left" cuando no se da esta condición. 2. Juego de frontón 1 Juego de frontón en Scratch En esta miniunidad vamos a programar un juego de frontón en Scratch. Colocaremos en el escenario de Scratch una pelota y una pala. Cuando se ejecute el juego, al pulsar la bandera verde, la pelota bajará y podremos golpearla con la pala. La pelota rebotará siempre que toque la pala o los bordes del escenario. Programas Este programa se ejecuta empezando por arriba y va descendiendo línea a línea. Cuando se clica la bandera verde, la pelota va a las coordenadas x=0, y=180 (en el centro de la parte superior del escenario) y apunta hacia abajo (180º). Se inicia un bucle forever (para siempre). Hasta que no se pare el programa, se ejecuta continuamente la línea 5: mover la pelota 10 pasos (10 píxeles) y luego la línea 6: comprobar si la pelota está en el borde. Si está en el borde, hacerla rebotar. www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 4 Cuando se clica la bandera verde, se iguala la coordenada x de la pala a la coordenada x que tenga el ratón en aquel instante (línea 3). Como esta instrucción está dentro de un bucle forever, se estará ejecutando una y otra vez hasta que se cierre el programa. Cuando se clica la bandera verde, se inicia un bucle forever (para siempre) que continuamente está vigilando si la pelota toca la pala (if touching Paddle, línea 3). Si la pelota toca la pala, se ejecuta una vez el código de las líneas 4, 5 y 6: se hace sonar el archivo de sonido "Pop" (línea 4), la pelota gira un ángulo al azar entre 160 y 200º (línea 5) y finalmente se mueve 10 pasos (línea 6). 3. Juego de frontón 2 Mejorar el juego de frontón de la práctica anterior En esta práctica vamos a mejorar el juego de frontón que hicimos en la práctica anterior. Trabajaremos sobre el archivo que guardamos con el nombre "Frontón". Deberías encontrarlo en tu ordenador o memoria USB (recuerda que tiene la extensión ".sb3"), o en tu cuenta de Scratch, si creaste un perfil en la web scratch.mit.edu. Haremos estas mejoras en el juego de la práctica anterior. 1. Pondremos un contador de puntos. 2. Cuando la pelota toque la parte inferior del escenario, se acabará la partida. 3. Cuando se acabe la partida, se mostrará Game Over en el escenario. Programas Hemos añadido dos líneas de código al programa que hace rebotar la pelota. En la línea 5 se suma 1 a la variable "points" (change by 1). Como está dentro de la condición if touching Paddle (línea 4), cada vez que la pelota toca la pala, la variable se incrementa en 1 y se muestra en el marcador. En la línea 2 se pone a 0 la variable "points" cada vez que se clica la bandera verde. Esto sirve para inicializar el juego, y que no comience con la puntuación del juego anterior. Cuando se clica la bandera verde, se inicia un bucle forever (para siempre) que continuamente está vigilando si la pelota toca el color naranja (if touching color, línea 3). Si toca la línea naranja que hemos dibujado en la parte inferior del escenario (el único objeto de color naranja que hay), se activa la línea 4: stop all (parar todo), que detiene el programa. La partida se acaba. www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 5 Hemos añadido dos líneas de código al programa que detiene el juego cuando la pelota toca la línea de color naranja del escenario. En la línea 5 se cambia el fondo inicial (backdrop1) al fondo que tiene el texto GAME OVER (backdrop2). En la línea 2 se cambia el fondo a backdrop1, de esta manera al iniciar el juego (al clicar la bandera verde), el fondo está siempre en backdrop1. 4. Juego de obstáculos Juego de obstáculos en Scratch En esta miniunidad vamos a programar un juego de obstáculos en Scratch. Colocaremos en el escenario un perro y unos obstáculos móviles que el perro debe esquivar. Al pulsar la bandera verde, por la derecha van apareciendo obstáculos que se mueven hacia el perro. Para que el perro suba es necesario clicar el botón izquierdo del ratón; si no se clica este botón, el perro baja. El juego se acaba cuando el perro choca con uno de los obstáculos o con los bordes del escenario. Programas Líneas 1, 2 y 3 Cuando se clica la bandera verde, el objeto Sprite1 (el obstáculo) se coloca en las coordenadas x=240, y=0 (el lado derecho del escenario). Después se cambia su disfraz (switch costume). Para elegirlo, se selecciona al azar (pick random) un número entre el 1 y el 4, el número de disfraces que tiene. Líneas 4 a 10 Se inicia un bucle forever (para siempre). Hasta que no se pare el programa, se ejecutan continuamente las líneas 5 a 10: se mueve el obstáculo 10 píxeles hacia la izquierda y luego se comprueba si se ha llegado al límite izquierdo del escenario (línea 6). Si el obstáculo está en el límite izquierdo, se oculta, se cambia el disfraz aleatoriamente, se coloca a la derecha y se hace visible. Como ves, en realidad siempre aparece el mismo obstáculo. www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 6 Líneas 1, 2 y 3 Cuando se clica la bandera verde, se muestra el perro a un 50 % de su tamaño ("set size") y se coloca en las coordenadas x=-150, y=0. Líneas 4 a 10 Se inicia un bucle forever (para siempre). Hasta que no se pare el programa, se ejecuta continuamente el código que hay en el interior del bucle (una estructura if... then... else...). Si el botón del ratón está pulsado (if mouse down), se mueve el perro hacia arriba 5 píxeles y se apunta en dirección 70º. Si el botón del ratón no está pulsado, se mueve el perro hacia abajo 5 píxeles y se apunta en dirección 110º. Líneas 1 y 2 Cuando se clica la bandera verde, se iguala a 0 el valor de la variable "points". Sirve para asegurarnos que la partida comienza siempre sin los puntos de una partida anterior. Líneas 3 a 6 Se inicia un bucle forever (para siempre). Hasta que no se pare el programa, se ejecuta continuamente el código que hay en el interior del bucle (una estructura if... then...). Si la posición x del perro es mayor que la posición x del obstáculo (Sprite1), entonces se incrementa en 1 la variable "points" y se muestra en el marcador. Esta expresión es una manera de decir matemáticamente que el perro ha superado el obstáculo (su coordenada x es mayor que la del obstáculo). En la línea 6 hay la instrucción "espera 1 segundo". Sirve para asegurarnos que sólo se cuenta 1 punto cada vez. Líneas 1, 2 y 3 Cuando se clica la bandera verde, se pone el fondo "backdrop1". De esta manera nos aseguramos que al iniciarse el juego siempre tenemos el fondo blanco y sin el mensaje "GAME OVER", aunque hayamos jugado una partida antes. Esperamos 0.1 segundos para dar tiempo al Sprite1 (los obstáculos) a colocarse en la posición de inicio de partida (x: 240, y: 0). Líneas 4 a 7 Se inicia un bucle forever (para siempre). Hasta que no se pare el programa, se ejecuta continuamente el código que hay en el interior del bucle (una estructura if... then...). Si el perro toca el color del obstáculo (touching color) o toca los bordes del escenario (touching edge), entonces se cambia el fondo inicial (backdrop1) al fondo que tiene el texto GAME OVER (backdrop2) y se para el programa (stop all). www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 7 5. Juego de asteroides Juego de asteroides en Scratch En esta miniunidad vamos a programar un juego de asteroides en Scratch. Colocaremos en el escenario una nave espacial, una roca (que hará el papel de asteroide) y una pelota (que hará el papel de proyectil). Al iniciarse el juego, por la parte superior del escenario van apareciendo asteroides de diferentes tamaños que se desplazan hacia abajo. Pulsando las teclas flecha derecha y flecha izquierda podemos mover la nave lateralmente para esquivar a los asteroides. Pulsando la barra espaciadora disparamos proyectiles. Si un proyectil toca un meteorito, lo hace desaparecer y se cuenta 1 punto en el marcador. Si uno de los asteroides toca la nave, el juego finaliza y se muestra un cartel con el texto "Game Over". Programas Líneas 1, 2, 3 y 4 Cuando se clica la bandera verde, se muestra la nave a un 30 % de su tamaño (set size), se desplaza a las coordenadas x=0, y=-130 (en el centro del escenario, parte inferior) y se pone el fondo "Stars" (switch backdrop). Líneas 5 a 12 Se inicia un bucle forever (para siempre). Hasta que no se pare el programa, se ejecutan continuamente las líneas 6 a 12. Primero se comprueba si las flechas derecha o izquierda están pulsadas (líneas 6 y 8). Si es así, se mueve la nave 10 píxeles a un lado u otro. En la línea 10 se comprueba si la nave está tocando un asteroide ("touching Rocks"). Si es así, en la línea 11 se cambia el fondo a "Stars2" (el fondo con el texto "Game over") y en la línea 12 se para el programa ("stop all") y la partida finaliza. Cuando se clica la bandera verde, se oculta el proyectil (hide), se muestra a un 10 % de su tamaño (set size), se apunta hacia arriba y se hace que siempre se mueva siguiendo la nave (forever go to Rocketship). Cada vez que se clica la barra espaciadora, se crea un clon del proyectil. www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 8 Cada vez que se crea un clon del proyectil (cuando se clica la barra espaciadora), se hace visible el clon (show) y se inicia un bucle forever que hace lo siguiente: mueve la bola 10 pasos. Después comprueba si toca algún borde (línea 5) o algún asteroide (línea 7). Si es así, se elimina el clon del proyectil. En la línea 8 hay una instrucción "espera 0,1 s", sirve para que el ordenador tenga tiempo para detectar la colisión entre el asteroide y el proyectil en uno de los programas del asteroide. Cuando se clica la bandera verde se oculta el asteroide (hide), se pone el marcador a 0 puntos y se inicia un bucle forever que va creando un clon del asteroide cada 0,25 s (líneas 4, 5 y 6). Cuando se crea un clon del asteroide (cada 0,25 s, en el programa 1), se apunta el asteroide hacia abajo, se coloca en una posición x entre -200 y 200 y una posición y=180 (parte superior del escenario), se gira y se reduce su tamaño aleatoriamente, y se muestra. En la línea 7 se inicia un bucle forever que lo mueve 5 píxeles en cada ciclo. Se comprueba si ha alcanzado la parte inferior del escenario (línea 9) o los bordes laterales (línea 11). Si es así, se borra el clon. También se borra el clon, y se suma 1 punto en el marcador, si toca un proyectil (línea 13). www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 9