💾 Archived View for gamifi.cat › blog › 2016-08-17_pong captured on 2024-02-05 at 09:59:43. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Projectes

Glossari

Contacte

Tutorial Snap! Joc del Pong

Pong

Sóc molt fan del Pong: és un joc molt i molt senzill que fa reflexionar sobre els dualismes i dicotomies. A més, és molt versàtil: pots canviar els vestits dels personatges i crear-ne altres versions. Al Pong, que es com un joc de tennis o ping pong, trobem dues pales i una pilota. Si la pilota depassa la paleta del contrari, se’ls suma un punt al marcador. Hi poden jugar dues personetes (una a cada pala) o un jugador contra la màquina.

Aquí el Pong clàssic: la imatge l’he trobat a videojuegos antiguos[1].

1: https://videojuegosantiguos.blogspot.com.es/2011/04/comienzo.html

pong [IMG]

Un dels primers projectes que vaig trastejar amb Scratch va ser un Pong. Com tot just aterrava i no sabia fer gairebé res, vaig reciclar el codi d’un projecte existent i vaig canviar els personatges: a la pala de l’esquerra, hi vaig posar un la paraula LOVE en vertical, i a la pala de l’esquerra, hi vaig posar la paraula HATE en vertical.

Enlloc d’una pilota, vaig posar un cor. Si el cor tocava la pala LOVE, se sentia el so d’un petonet i el cor canviava a un cor amb fletxa; si el cor tocava la pala HATE, se sentia el so d’un clatellot i el cor canviava a un cor trencat.

Pala

De moment, farem un Pong horitzonal per a un sol jugador on només tindrem una pala i una pilota: l’objectiu és moure la pala amb el ratolí i fer que la pilota reboti al tocar la pala. Posarem fi al joc quan la pilota toqui “el terra”.

Un cop tenim dibuixats i nombrats els nostres objectes “Pala” i “Pilota” i els seus respectius vestits que hem dibuixat amb l’editor gràfic d’Snap!, comencem la programació de la pala. Veiem que té poca cosa:

Al començar el joc amb la bandera verda,
“Per sempre”,
Es posiciona la pala en unes coordenades de l’escenari: l’eix de la x a la posició x del ratolí i l’eix de la y a -140.
Farem rebotar la pala perquè la pala no se surti dels límits de l’escenari.

blocs-moviment-automatic-x-140 [IMG]

No és un imperatiu que es mogui amb el ratolí. Tal com vam veure al joc del laberint, podem fer que la pilota es mogui amb les tecles del teclat. En aquest cas, però, només necessitaríem dues instruccions de moviment: fletxa dreta i fletxa esquerra (o qualsevol altra tecla però dreta-esquerra és més lògic, no?).

Pilota

La pilota és qui porta el pes del joc i no volia programar-la així…però he tingut un problema que després explico. Ara, la pilota fa el següent:

Quan es prem la bandera verda,

Es posiciona al centre de l’escenari i...

“Apunta en direcció a un nombre a l’atzar entre -60 i 60” graus. Això fa que la pilota apunti cap amunt però no recte amunt. Prova posar 0º i ja veuràs quin avorriment de joc ;) Prova 90º o -90º i veuràs que el joc perd tot el seu sentit…

Tot seguit, trobem un bloc que encara no havíem fer servir en aquestes pràctiques: “repeteix fins que la posició y (vertical) de la pilota sigui inferior a -140. (és dir, si depassa la pala, que hem vist que la teníem a una y de -140). Si poses superior a -140, la pilota no es mourà perquè l’hem posicionat a y:0 al començar el joc. 0 és superior a -140, així que, s’aturaria el joc.

Veiem que fora del bucle “repeteix fins” posa “atura tot”. La cosa és que el programa va repetint les instruccions de dins el bucle fins que la posició és més petita que -140. Quan ho detecta, fa el que sigui que posem fora del bucle, en el nostre cas, aturar el joc perquè ha depassat la pala. Game Over.

Dins del bucle “repeteix fins” hem posat que reboti perquè no surti de l’escenari i un moviment de 5 passos (que com tot el que hi ha al bucle s’aniran repetint fins que la posició sigui inferior a -140, amb el que el moviment de la pilota serà constant). A més, programem una condició: si la pilota toca la pala, que toqui un so i que apunti en direcció contrària a la que porta (apunta en direcció 180 – direcció).

blocs-pong-pilota [IMG]

Angles i graus

Gràcies als llenguatges de programació visual, per fi he entès perquè serveix realment un transportador d’angles… De petita el feia servir com bonament podia però, realment, no li veia la utilitat a saber fer anar el catxarret aquell (a part d’aprovar l’assignatura, és clar).

Una cosa bonica dels llenguatges de programació visual és que tornen les mates i la física mooolt significatives: les necessitem per posicionar objectes, fer-los moure cap a on vulguem, etc. Com hem vist, la nostra pilota es posiciona al iniciar al joc al centre de la pantalla i apunta en una direcció a l’atzar entre -60 i 60 graus.

Com sabem per altres pràctiques, el bloc de moviment “apunta en direcció” té una pestanyeta amb quatre opcions: 0º=amunt, 180º=avall, 90º=dreta i -90º = esquerra. Al joc, la nostra pilota es posiciona al iniciar i apunta en una direcció a l’atzar entre -60 i 60 graus.

En aquest dibuixet veiem cap a on apunten, a l’escenari, aquests -60 i 60 graus. La pilota apuntarà un nombre a l’atzar entre aquests dos valors. Pots provar altres graus guiant-te amb el transportador per fer apuntar la pilota on vulguis: de -45 a 45 graus també seria una bona opció. Trasteja!

He magrejat el vector original del transportador per fer el dibuixet. La rodona verda és la nostra pilota situada al centre de l’escenari.

angle-60 [IMG]

Problema

Al joc del laberint de l’entrada anterior, vam programar un bloc blau de sensor “tocant?” que detectava si un objecte (abella) estava tocant un altre objecte “flor”. Per tal de veure un altre sensor, “tocant color?”, volia programar que si la pilota tocava el color vermell, s’acabés el joc. I és per això que l’escenari té una línia vermella sota de la pala.

El problema ve quan muntant els blocs (tan en un sol bloc com en esdeveniments en paral·lel) m’adono que la pilota es clava… Com no sabia si era jo que programava malament, la velocitat del meu ordinador o la connexió o el programa…, vaig decidir canviar la fi del joc: no acaba quan la pilota toca el color vermell sinó quan depassa l’eix y de -140, que és a l’alçada que està la pala.

joc pong [IMG]

A dins del projecte deixo els blocs que vaig programar originalment per trastejar amb el sensor “tocant color?”. Pots eliminar, tranquil·lament, la línia vermella de l’escenari esborrant el vestit i deixant l’escenari blanc per defecte. La línia vermella, ara, no serveix per a res perquè, finalment, no hem programat la interacció amb el color vermell…

En resum, que es pot fer finalitzar el joc de diferents maneres i, aquest handicap, ens ha portat a buscar una altra solució: hem descobert el magnífic bloc “repeteix fins”… Jo li vaig agafar mania al bloc “per sempre” i, sempre que puc, faig servir el “repeteix fins”: no hi ha res per sempre…

Velocitat

D’altra banda, el joc es tornarà molt avorrit en pocs segons… Per fer-lo més divertit, el podem fer més difícil… Podem programar, per exemple, que la velocitat de la pilota augmenti cada segon que passa. Per fer-ho, necessitarem implementar una variable:

Un cop haguem creat una variable que podem nombrar com “Velocitat”,

Hem de crear un bloc que indiqui que, al començar el joc clicant la bandera verda, la variable tingui un valor que, com veurem, seran les passes que va donant la pilota. Aquest valor, per exemple, el podem establir a 3, “assigna a velocitat el valor 3”.

Després, afegirem un altre bloc de “repeteix fins que la posició y sigui més petita de -140” i, dins del bucle del bloc de control, hi posarem dos blocs més.

El primer, “augmenta velocitat en 0.5”, farà incrementar la variable.

El segon, “espera 1 segon”, determina cada quan de temps s’ha d’incrementar aquest 0.5 al valor inicial 3 que hem indicat al bloc “assigna”.

Per fer efectiva aquesta variable, hem d’indicar al bloc “mou-te passos” que enlloc les passes fixes que havíem programat (5) es mogui a una velocitat variable determinada pel bloc de la variable. El resulta serà que, cada segon que passa, la velocitat de la pilota augmenta 0.5 i arribarà a un punt que serà ingovernable i la pilota “tocarà el terra”, és a dir, que depassarà l’eix y de -140 i s’aturarà el joc.

joc pong velocitat [IMG]

<a href="https://snap.berkeley.edu/snap/snap.html#present:Username=Gamificat&ProjectName=Practica%209%20-%20Joc%20%28Pong%201%20rapid%29">Juga al pong d'una pala amb velocitat variable!</a>

Continuació

Ara, pots provar de posar la pala en vertical i afegir una altra pala per fer un joc multijugador. Hauràs de tenir en compte que l’eix de moviment haurà de ser y (i no x, com ara). És probable que faci una altra pràctica per mostrar com fer un joc Pong clàssic multijugador.

Per cert, ahir ja vaig veure que havien canviat cosetes a Snap! Et despistes una setmana i ja tens el tutorial obsolet, hehe. He detectat que, a la icona del document que gestiona els projectes, han canviat l’opció “Desar com” per “Anomena i desa” i el bloc “moure passos” ara es diu “mou-te passos”. Aviam si em passen una llista amb els canvis que van fent i així vaig actualitzant, que sinó me’ls trobo com bolets.