El Pong (I)

En aquest mòdul utilitzarem els coneixements que vam adquirir en el mòdul anterior per fer un programa una mica més interessant que els programets d'exemple que hem vist fins ara. En particular implementarem el joc del Pong. Si voleu veure el resultat final, és a dir, allò que aprendrem a fer, podeu descarregar el Pong complet del lloc web d'Scratch.

Comencem...

El primer que farem és partir de zero, és a dir, triarem l'opció 'Nou' del menú 'Fitxer'. Ara tenim el gatet a l'escenari i el traurem. Ja sabeu com fer-ho: agafem les tisores i eliminem el gatet. La idea és quedar-nos sense res!

Ara obrim l'eina de dibuix per dibuixar una rodona.

És molt senzill. Triem la rodona per dibuixar, intentem fer una rodona ni massa gran ni massa petita (ni massa poc rodona) i la pintem amb el cubell . Fem clic a D'acord i ja està. Ara tenim un objecte nou amb el que podem fer coses.

Què podem fer? Per començar podem fer-la rebotar en prémer la bandereta verda. Ja sabem com fer-ho, oi? Ja coneixem les instruccions 'mou-te','rebota al tocar una vora', l'estructura iterativa 'per sempre' i la instrucció que detecta si hem premut la bandera verda per començar. Combinant tot això podem fer el programet senzill

És molt entretingut? Doncs no, perquè sempre comença des d'allà on estigui la pilota i en la mateixa direcció, per tant sempre farà el mateix camí amb els mateixos rebots. No gaire espectacular.

Amb el que vam aprendre al mòdul anterior podem millorar-ho bastant. Per exemple, podríem posar la pilota en un punt de partida determinat i amb una direcció inicial aleatòria (és a dir, triada a l'atzar). Recordeu la instrucció 'vés a'? Doncs la podem combinar amb 'apunta en direcció' (a la categoria 'Moviment') per aconseguir precisament això que volem:

Fixem-nos que hem utilitzat l'expressió 'nombre a l'atzar entre' amb -60 i 60 com a arguments. Això ens triarà un nombre entre -60 i 60 (n'hi ha 121 de possibles) a l'atzar per decidir en quina direcció es mourà inicialment la pilota. I ara, si més no, es mou en diferents direccions cada vegada que premem la bandera verda.

Variables

Aprofitarem aquest programa per explicar un concepte molt important en programació i que no ha aparegut encara en aquest curs. És el concepte de Variable.

Pitgem la categoria 'Variables' i ens trobarem (si encara no en tenim cap de variable) dos botons. Fem clic a 'Nova variable' i ens demanarà quin nom volem posar-li a la variable. Escrivim 'velocitat', fem D'acord i ens apareixeran noves instruccions, com podem veure a la figura de la dreta

Però, què és una variable? Imagineu una variable com una capseta on guardem un valor (qualsevol valor). Sovint, en els programes que farem començant per aquest, ens caldrà guardar valors i anar canviant-los a mida que el programa s'executa. El lloc on guardem aquests valors és allò que anomenarem variable. En el nostre cas, tenim una capseta anomenada 'velocitat' on guardarem un número que indicarà la velocitat amb la que es mou la piloteta.

Fixem-nos en la casella de selecció al costat de l'expressió numèrica (fixem-nos en els contorns arrodonits) anomenada 'velocitat' , que ara està marcada. Això farà que el valor de la variable sigui visible a l'escenari

Si fem clic a sobre de la casella, es desmarca i desapareix de l'escenari. Així podem, si ens interessa, veure el valor que té la variable mentre el programa s'executa. També podem fer que es mostri o s'amagui la variable a l'escenari des del mateix programa, amb les instruccions

Una variable, donat que conté un valor, és en si mateixa una expressió numèrica (com ho pot ser un sol nombre). El resultat de l'expressió 'velocitat' és el valor guardat a la capseta 'velocitat. Naturalment pot formar part d'altres expressions, com qualsevol altra expressió numèrica.

Tenim dues instruccions més que tenen a veure amb les variables: 'fixa' i 'suma'. La primera, 'fixa variable a expressió numèrica' posa el valor corresponent a l'expressió numèrica dins de la capseta amb el nom de la variable.

En aquest cas, la variable 'velocitat' pren per valor el número 0.

L'altra instrucció, 'suma expressió numèrica a variable' el que fa és canviar el valor de la variable sumant-li el resultat de l'expressió numèrica. Així, si executem la instrucció 'suma 1 a velocitat' no podem saber a priori quin serà el nou valor de 'velocitat', ja que dependrà del valor que tenia abans d'executar la instrucció.

Si abans d'executar la instrucció 'suma 1 a velocitat' la variable 'velocitat' tenia per valor 2, després d'executar-la el valor de 'velocitat' serà 3, en canvi, si abans d'executar la instrucció 'suma 1 a velocitat' la variable 'velocitat' valia 15, després d'executar-la el valor de 'velocitat' serà 16. Ara bé, si la instrucció és 'suma -3 a velocitat' i 'velocitat' valia 32 abans d'executar-la, després el valor de 'velocitat' serà 29.

Seguim...

Ara que tenim la variable 'velocitat' com a petit magatzem d'un nombre, podem aprofitar per fer que el nostre programa sigui una mica més divertit. Introduirem la variable 'velocitat' en el programa per accelerar la piloteta a mida que aquest s'executa. Això requerirà tres afegits:

• Utilitzarem la variable per indicar la velocitat de la pilota. Ara per ara, la velocitat de la pilota és "10 passos per iteració", és a dir, la pilota avança 10 passos cada cop que s'executa 'mou-te 10 passos'. Ara farem que aquest número de passos depengui del valor de la variable 'velocitat', arrossegant la variable 'velocitat' i posant-la al lloc que indica el nombre de passos a moure

• Inicialitzarem la variable. Farem 'fixa velocitat a 0' abans de començar la iteració. És molt important que les variables tinguin un valor abans d'utilitzar-les per primera vegada. No inicialitzar variables és un dels errors més típics en un programa.
• A cada volta de la repetició afegirem 1 a la velocitat, de manera que la piloteta anirà més de pressa a cada volta de la iteració.

Així, el programa modificat és

Aquest programa admet moltes variacions amb les que podeu passar una estona entretinguts. Penseu-ne vosaltres alguna.

Desa el programa com M2Pong1NomiCognom.sb

El Pong (II)

Primer modifiquem el programa anterior traient l'increment de la velocitat de dins del 'per sempre'. Només això! la inicialització i la utilització de la variable 'velocitat' dins del 'mou-te' s'han de quedar.

Seguirem afegint més elements al Pong. Tornem a obrir l'editor de dibuixos per crear una barra rectangular, no massa llarga ni massa gruixuda

Si la barra no ens ha sortit bé, cap problema. Amb la barra seleccionada, fem clic a la pestanya 'vestits' i amb el botó 'Edita' podem tornar a l'editor de dibuixos per arreglar el que no ens agradi.

Ara ja tenim dos elements al Pong: La pilota i la barra. La pilota té un programa associat (com podeu veure si la seleccioneu) però la barra encara no. Ara, arrosseguem la barra dins l'escenari fins a posar-la a la meitat inferior, més o menys (tampoc cal ser molt precís).

Quin programa tindrà la barra? Si heu jugat al Pong alguna vegada, recordareu que la missió de la barra és que la pilota no arribi a tocar el "terra" del joc. Cada cop que toca el terra es perd. Per tant, seria desitjable tenir alguna manera de controlar el desplaçament lateral (sense que la seva coordenada y variï).

El que farem serà controlar-ho amb el ratolí, ja que si fem clic a la categoria 'Sensors' veiem que hi ha una expressió que ens retorna la coordenada x del ratolí. Així doncs, podem utilitzar 'fixa x a' (a la categoria 'Moviment') per identificar la coordenada x de la barra amb la coordenada x del ratolí. Si això ho fem 'per sempre', començant 'al prémer la bandera verda', ja ho tenim

Premeu la bandera verda. Què observeu? La pilota va rebotant, podeu moure la barra amb el ratolí però no hi ha cap mena d'interacció entre els dos objectes.

Caldrà fer que la pilota reboti en tocar la barra. Seleccionem la pilota, ja que és el seu programa el que modificarem.

Fem clic a 'Sensors' i ens fixem en que podem detectar si un objecte en toca un altre amb l'expressió lògica (fixeu-vos en el contorn angular) 'tocant menú desplegable?' Precisament en aquest menú podrem triar amb quin altre objecte ens hem tocat.

Si triem l'opció correcte, l'expressió es dirà 'tocant Animació2 ?'

Afegirem un 'si…' dins de la iteració per fer alguna cosa quan la pilota toqui la barra (recordem que estem modificant el programa de la pilota).

El blanc és avorrit

Fem un petit descans per fer el joc una mica més atractiu visualment. Seleccionem l'escenari

i triem la pestanya 'Fons'

Ara buscarem un fons que ens agradi molt, si més no, molt més que el color blanc que teníem fins ara. Podem triar entre un munt de possibilitats, hi ha molts fons diferents que ja venen amb l'Scratch (és clar que ens en podem fer un nosaltres mateixos). En el nostre cas triem la carpeta 'Nature' i escollim un fons (probeu, alguns no els deixa possar el programa).

Un cop fet això, veiem com la lluna apareix com el nou fons del Pong

I si mirem la finestra de visualització, és a dir, el joc del Pong, veurem que ara la nostra piloteta es mou en un entorn més còsmic

la qual cosa es reflecteix a la icona de l'escenari

Seguim? Perdre el joc

Continuem complicant, i fent més interessant, el joc. Volem saber quan la pilota ha passat la barra sense rebotar, és a dir, quan hem estat incapaços d'interceptar la pilota.

Ja sabem que podem detectar el contacte entre dos objectes. Així hem estat capaços de fer rebotar la pilota amb la barra. De la mateixa manera, puc crear un nou objecte per detectar aquestes col·lisions. Obrim, per tant, l'editor de dibuixos per crear una barra tan llarga com ampla és l'escenari. Ha d'anar de punta a punta (no detallarem com fer-ho; si heu creat la pilota i la barra no hauríeu de tenir cap problema creant aquest objecte). Un cop creat, l'arrossegueu dins de l'escenari fins a la part de baix, que quedi col·locat sota de tot. Vegeu la barra vermella de la figura

Ara, si el que volem és que s'acabi el joc, hi ha una cosa que ens fa nosa. Quelcom que s'acaba no put durar 'per sempre'!

Així doncs, haurem de canviar el 'per sempre' per alguna estructura que respongui a les nostres intencions. I n'hi ha una, no? Recordeu la darrera pràctica del mòdul 1? Allà vam conèixer el 'repetir fins', i és precisament això el que ens cal. Però… fins quan? Doncs fins que la pilota toqui la barra gran, la vermella, en el nostre cas. Utilitzarem la mateixa expressió lògica que hem fet servir per detectar el rebot, és a dir, 'tocant … ?' a 'Sensors', però amb l'"Animació3", que és com es diu la barra vermella. Ja sabem com combinar-ho tot plegat, i el programa resultant és

Ara hem de jugar molt bé perquè el joc s'acaba de seguida que l'espifiem. Les segones oportunitats sempre van bé, no? Doncs a la propera pràctica haurem de veure com arreglar-ho.

Desa el programa com M2Pong2NomiCognom.sb

El Pong (III)

Ara volem tenir el que usualment s'anomenen "vides". No acabar el joc de seguida que ens passa la pilota de la barra petita, sinó permetre unes quantes equivocacions.

Això ho farem amb una altra d'aquelles capsetes que en dèiem variables. Amb una variable podrem emmagatzemar el nombre de vides inicial i anar restant una vida cada cop que ens equivoquem.

Així doncs, creem una nova variable (categoria 'Variables', botó 'Nova variable')

Fixem-nos que tenim disponibles les mateixes instruccions sobre la variable 'velocitat' i sobre la variable 'vides'.

Per saber a quina variable es refereix cada instrucció, cal triar-la del menú desplegable. Per exemple, si volem inicialitzar les 'vides' al valor 3, utilitzarem 'fixar…' amb la variable 'vides'

Ara la idea és que allò que fèiem una sola vegada, ho hem de repetir tantes vegades com 'vides' tinguem. Per tant, proposarem el següent:

• Separar el 'repetir fins…' que ja tenim, i afegir-ne un altre que l'englobi, és a dir, que el repetir que ja teníem estigui dins del nou 'repetir fins…'

• Crear l'expressió lògica que determina el final del nou 'repetir fins…'. Aquesta denotarà que el valor de la variable 'vides' sigui zero.

I així hem creat aquest programa. Proveu-lo si us plau.

Si ja heu provat el programa, haureu vist que NO funciona. Proveu de trobar què està malament, abans de continuar llegint!.

Esperem que hagueu pensat força i hagueu trobat vosaltres mateixos els errors. N'hi ha diversos:

1. Primer, la variable 'vides' no canvia mai. Això és absurd! Si tenim una repetició que depèn del valor d'una variable, el valor d'aquesta ha de canviar dins de la repetició, en altre cas serà impossible que la condició d'acabament del 'repetir fins…' es satisfés mai!
2. Segon, les inicialitzacions han d'executar-se cada cop que comencem el joc amb vida nova, així doncs les hem de moure de lloc.

Aquesta figura il·lustra les modificacions

El programa queda finalment així, amb el programa de la pilota i el programa de la barra curta:

Aquest és, essencialment, el nostre Pong!

Repassem-ho:

1. Tenim tres objectes i un fons. Dels tres objectes, dos, la pilota i la barra curta, tenen associat un programa que governa el seu comportament. Un altre, la barra llarga, és passiu i l'únic paper que juga és el de ser detectat.
2. El gruix del programa està a la lògica de la pilota. És la pilota l'objecte actiu que més decisions ha de prendre.
3. El programa de la pilota es composa de:
   1. Inicialització de variables ('vides' i 'velocitat'). Fixem-nos que 'vides' és modificada mentre el programa s'executa. En canvi, el valor de 'velocitat' es fixa al principi i ja no es toca més.
   2. Una iteració o repetició (de vegades parlem també de "bucle") que controla quantes vides ens queden. A cada volta d'aquest bucle, decrementem el valor de 'vides', assegurant-nos que, desprès d'un cert nombre de vides (el valor inicial de la variable 'vides'), el bucle s'acabarà.
   3. Dins de la repetició mencionada al punt anterior, tenim una inicialització de partida, col·locant la pilota a la seva posició de començament del joc
   4. I també un altre bucle, que essencialment mou la pilota a la velocitat que marca la variables 'velocitat', i vigila si toquem la barra curta o una vora. Si toquem la barra curta rebotem calculant nosaltres el rebot, i si toca la vora rebota gràcies a la instrucció corresponent.

I això és tot.

Desa el programa com M2Pong3NomiCognom.sb

El Pong (i IV)

Guarniments

Podem fer diverses millores en el nostre programa.

1.- Podem afegir-li algun so per comunicar que el joc s'ha acabat. Amb la pilota seleccionada, anem a la pestanya 'Sons' i fem clic a 'Grava'.

Ara ens apareixerà una finestra per enregistrar sons. Prement el botó vermell podem dir qualsevol cosa, que quedarà enregistrada. Per exemple, podríem dir "Game Over" amb veu molt solemne, perquè quedi força clar que el joc s'ha acabat.

Ara canviem el nom del so que tot just hem gravat. Podem anomenar-lo, per exemple, 'gameover'.

I ara afegirem al final del nostre programa la instrucció 'toca so' amb el nom del nou so triat al menú desplegable

2.-Oi que va massa ràpid quan perd una vida i comença la partida amb la següent? Per això tenim la instrucció 'espera… segons' (a la categoria 'Control').

Podem posar-la tot just desprès de les inicialitzacions de la pilota i abans de la repetició 'repeteix fins tocant Animació3?', és a dir, ha d'estar dins del repetir més exterior però fora del repetir més interior. Amb un segon d'espera n'hi ha de sobres.

3.-Podem escriure amb l'editor de dibuixos el text (botó de l'editor amb una "T" dibuixada) "Game Over" (si no ens surt bé, el seleccionem, anem a la pestanya 'Vestits' i fem clic a 'Edita' perquè torni a obrir-se l'editor de dibuixos).

Però ara, quan juguem, el "Game Over" hi és sempre! El "Game Over" hauria de desaparèixer en començar i només sortir quan el joc s'acaba. Fixem-nos que a la categoria 'Aspecte' tenim dues instruccions 'amaga' i 'mostra'. Podem provar d'associar al text "Game Over" el programa

Amb la qual cosa s'amaga quan comencem. Això està bé. Fixem-nos, però, que quan acabem no apareix! Així doncs, encara tenim feina.

No sé si us n'heu adonat de que, qui sap quan s'acaba el programa és la pilota, o el programa associat a la pilota, en canvi qui ha d'aparèixer quan el joc s'acaba és el text "Game Over".

Com li pot dir la pilota al text que el joc s'ha acabat??

A Scratch els objectes poden enviar missatges a tots els altres objectes. Seleccionem la pilota (si no ho estava) i fem clic a la categoria 'Control'. Allà podem veure la instrucció 'envia a tots menú desplegable'.

Arrosseguem la instrucció fins a la zona de programes i mirem el menú. No hi ha res, només l'opció 'nou…'

Si triem l'opció 'nou…' ens demanarà el nom d'un missatge:

Podem escriure, per exemple, "fidejoc". Un cop ho haguem fet, afegim la instrucció 'envia a tots fidejoc' al final del programa de la pilota, com a darrera instrucció del programa (possiblement darrera de 'toca so gameover').

Aquesta instrucció envia a tots els objectes el missatge "fidejoc". Ara bé, hi haurà objectes que en faran cas d'aquest missatge, i hi haurà objectes que no.

Un dels objectes que n'hauria de fer cas és el text "Game Over". En rebre aquest missatge, hauria de fer-se visible. Ho tenim fàcil! Si ens fixem a les instruccions de la categoria 'Control' hi ha una instrucció 'al rebre menú desplegable' que ens va força bé. Seleccionem el text "Game Over" i arrosseguem 'al rebre…' cap a la zona de programa. Triem "fidejoc" en el menú de la instrucció. Tot just a sota hi enganxem 'mostra', de la categoria 'Aspecte', i ja ho tenim! Els programes associats al text "Game Over" són

"Però… com? Dos programes per a un sol objecte?" deveu estar pensant. Fixeu-vos que cada un d'aquests programes s'activarà en determinades condicions. Un ('amaga') quan es premi la bandera verda, un altre ('mostra') quan es rebi el missatge "fidejoc". Són situacions diferents que no interfereixen entre elles. Així doncs, cap problema. Aquest mecanisme que té Scratch d'enviar missatges entre objectes el veurem sovint en els propers mòduls.

Final

I el Pong guarnit quedarà de la següent manera, per a la pilota, pel text "Game Over" i per a la barra curta (únics objectes que tenen programa associat) respectivament:

I ara sí que hem acabat el Pong!

Desa el programa com M2Pong4NomiCognom.sb

Exercici 1. Variants del programa de la pilota que rebota

A la pràctica 1 del mòdul 2 començarem a fer el Pong amb un programa que conté una pilota que rebota. Ara ho aprofitem per introduir la noció de variable i fer el programa

Es poden fer moltes variants d'aquest programa:

• Proveu de posar un valor inicial alt (100 per exemple) i que la pilota vagi cada cop més a poc a poc. Què passa quan la velocitat comença a prendre valors negatius (recordeu que sempre podeu aturar el programa amb l'stop del costat de la bandera verda.
• Podeu resoldre el problema anterior? És a dir, com podeu evitar que la pilota es mogui si la velocitat pren valors negatius?
• Ara més difícil. Com podeu duplicar la velocitat a cada iteració.

Desa el programa com M2Ex1NomiCognom.sc

Exercici 2. Canviar el ratolí per tecles

El programa de la barra és molt senzill. Proveu de canviar la utilització del ratolí per tecles, per exemple, la fletxa esquerra per anar a l'esquerre i la fletxa dreta per anar a la dreta.

Per fer aquest canvi cal fer una cosa molt senzilla, però que no hem explicat encara. Consisteix en tenir diversos programets en un mateix objecte, de manera que cada un d'ells s'activi, no pas quan es premi la bandera verda, sinó quan passin altres coses, com per exemple prémer segons quines tecles. Això ho explicarem en detall cap al final del Pong. Així doncs, si no us surt, sobretot no us desanimeu! Deixeu-ho estar i torneu-hi en acabar el mòdul 2.

Desa el programa com M2Ex2NomiCognom.sc