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

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

Projectes

Glossari

Contacte

Tutorial Snap! Joc del laberint

Resum i objectiu

Fins ara, hem fet una introducció als llenguatges de programació visual, a la configuració i l’entorn d’Snap!, i hem trastejat totes les categories de blocs. També hem creat blocs propis, trastejat les coordenades de l’escenari i introduït els blocs de control d’enviament i recepció de missatges entre objectes i escenari.

L’objectiu d’aquesta pràctica és dissenyar i programar un joc d’un laberint, que és molt fàcil de fer. Som-hi!

laberint [IMG]

Escenari

Per al nostre joc del laberint, hem dissenyat una graella simple amb Inkscape. Al iniciar el projecte, d’una banda, tenim una abella i, de l’altra, una flor.

L’abella i la flor els he tret de Freepik, que al final m’hauran de posar en nòmina de comercial, hehe. M’agrada molt aquesta pàgina, només amb citar els autors, pots fer servir un munt d’imatges en vector que, a mi, personalment, em serien molt difícils (o impossibles) de dibuixar…

Aquests dibuixets tant monos de l’abella i la flor són de la @freshgraphix (Linda Murray)[1]. Merci, xata :)

1: http://www.freepik.com/freshgraphix

Ara, haurem de programar l’objecte de l’abella per a que es mogui i interactuï amb l’escenari i l’objecte de la flor:

L’abella es desplaça per l’escenari amb les fletxes del teclat.
Aconseguim guanyar el joc quan l’abella toca la flor.
La dificultat és, que cada vegada que l’abella toca el laberint, torna a la seva posició inicial.

Abella

abella [IMG]

En aquest projecte tenim l’escenari i dos objectes. Tan l’escenari com els objectes, tots tenen un sol vestidet. Un dels objectes, l’abella, és qui porta el pes de la programació del joc. Al iniciar-se el projecte,

L’abella es posiciona i es mostra.

Simultàniament, trobem un bucle amb dos blocs condicionals “si… llavors”. Aquests blocs comproven, “per sempre” (és a dir, fins que aturem el projecte) dues coses…

Si l’abella toca el color negre, és a dir, la graella del laberint. Com el condicional és dins d’un bucle “per sempre”, el programa verificarà tota l’estona per saber si està tocant o no el color negre. Si l’abella toca el color negre, doncs, torna a la seva posició inicial del joc.

A més, hi ha una segona condició: si l’abella toca la flor, li fem dir “Polinització!” i tot el joc s’atura.

Per tal que l’abella no surti de la pantalla, tal com vèiem a la primera pràctica dels blocs de control i moviment, posarem un bloc de “rebota en tocar un vora” dins del bucle per sempre.

blocs tocant objecte color [IMG]

A més, l’abella es mou per la pantalla. Per fer-la moure, en aquesta ocasió, utilitzarem blocs de control i moviment. Els blocs de control permeten activar scripts al tocar tecles del teclat: ho vèiem a la tercera pràctica de sensors i operadors.

Hem programat el moviment a les fletxes de direcció del teclat: esquerra, dreta, amunt i avall. Quan es clica la fletxa dreta, apunta a la dreta (90º) i es mou 10 passos; quan es clica la fletxa esquerra, apunta a l’esquerra (-90º) i es mou 10 passos; quan es clica la fletxa amunt, apunta amunt (0º) i es mou 10 passos; quan es clica la fletxa avall, apunta avall (180º) i es mou 10 passos.

Si recordem la pràctica de les coordenades, veurem que obtenim el mateix resultat de moviment si apuntem en una direcció i sumem passos a l’eix x o a l’eix y.

blocs duplicar [IMG]

Truc

Si un bloc s’assembla molt a un altre, no cal que el construïm de nou anant a buscar de nou tots els blocs a la paleta. Podem duplicar blocs! Si cliquem el botó dret sobre un bloc, el podem duplicar. En aquest cas és molt útil perquè hem de programar 4 blocs gairebé iguals on només hem de modificar:

La tecla que volem programar al bloc de control (fletxa esquerra, fletxa dreta, fletxa amunt, fletxa avall) amb la pestanyeta del propi bloc “Quan la tecla es premi”.

La direcció del bloc de moviment (dreta 90º, esquerra -90º, amunt 0º, avall 180º) amb la pestanyeta del propi bloc “apunta en direcció”.

<a href="https://snap.berkeley.edu/project?user=gamificat&project=Practica%209%20-%20Jocs%20(Laberint)">Juga al joc del laberint!</a>

Repte flor

flor [IMG]

La flor, en aquest projecte, fa ben poca cosa: simplement es mostra al iniciar el projecte. Una cosa que li podríem fer fer és canviar de vestit i així reciclem el que hem après sobre l’enviament i recepció de missatges.

blocs mostra [IMG]

Per exemple, ja que l’abella diu: “Polinització!” al tocar la flor, podríem fer que, després de parlar l’abella, la flor es convertís en una gerra de mel. Ho podríem fer de maneres diferents. Una proposta seria que,

Quan l’abella acabi de parlar, enviï un missatge a la flor.
Quan la flor rebi el missatge que ha enviat l’abella, que canviï de vestit i sigui la flor qui aturi el projecte.

blocs envia rep [IMG]

Per si algú s’anima, aquí deixo la gerra de mel de la Linda Murray[2] (si el feu servir, por fi, doneu-li crèdit). Cosetes a tenir en compte:

2: https://www.freepik.com/free-vector/bees-bear-with-honey_821878.htm

Hem d’afegir el vestit de la mel a l’objecte Flor i procurar que, quan s’iniciï el projecte, es mostri el vestit de la flor. Per pujar un vestit des del nostre ordinador, només cal arrossegar-lo des d’on el tinguem fins a l’àrea de treball.

Hem de fer enviar un missatge a l’abella quan acabi de parlar.

Hem de fer que la flor rebi el missatge que envia la flor i programar que canviï de vestit a la gerra de mel.

Hem de tenir en compte que el bloc d’aturar el projecte és a la flor i si s’atura quan acaba de parlar, no veurem el canvi de vestit de la flor a la mel. Per tant, hem de treure el bloc “atura tot” de sota el bloc digues de l’abella i posar-lo just després que la flor es converteixi en gerra de mel.

mel [IMG]

Segueix al proper joc, un Pong d’un jugador. Amb Scratch en vaig fer dos o tres versions. M’encanta el Pong, com a joc potser és poca cosa però és tant i tant versàtil… Pura dicotomia, un poema dual.