T3 talp barrejat

1. TEMA 3 1/14
TalpBarrejat
En aquest tema es mostra com crear
TalpBarrejat, un joc inspirat en el clàssic arcade
Whac-A-Mole, on criatures mecàniques apareixen
breument fora dels forats, i els jugadors guanyen
punts per colpejar amb un mall. TalpBarrejat va
ser creat per un membre de l'equip de App
Inventor per provar la funcionalitat de sprites.
El que construirà
Per a fer l'aplicació TalpBarrejat com es mostra
a la Figura 3-1, implementarà les següents
funcions:
• Un talp apareix en llocs a l'atzar a la
pantalla, movent-se una vegada cada
segon.
• Tocar el talp fa que el telèfon vibri,
s'incrementa el comptador d'encerts , i el
talp passa immediatament a una nova
ubicació.
• En tocar la pantalla, però sense tocar el
talp, s'incrementa el numero d'errors.
• En prémer el botó Restablir restableix els
comtes d'encerts i errors.
El que aprendràs
El tutorial inclou els següents components i conceptes:
• El component ImageSprite sensible al tacte per imatges mòbils.
• El component de Canvas, que actua com una superfície sobre la qual col·locar
el ImageSprite.
• El component del rellotge per moure el sprite cada cert temps.
• El component de so per produir una vibració quan es toca el talp.
• El component Button per iniciar un nou joc.
• Els procediments per implementar un comportament repetit, com moure el
talp.
• Generació de nombres aleatoris.
• Ús dels blocs de suma (+) i resta (-).
Figura 3-1. La interfície d'usuari de
TalpBarrejat

2. TEMA 3 2/14
Introducció
Connectar-se a la pàgina web de App Inventor i començar un nou projecte.
Anomenar-lo "TalpBarrejat" i també establir el títol de la pantalla de
"TalpBarrejat". Obriu l'Editor de blocs i connectar al telèfon.
Descarregar aquesta imatge d'un talp de la carpeta “Recursos 3” del tema 3. A la
secció Media del Dissenyador de components, feu clic a Afegeix, busqui on es troba
l'arxiu en el seu ordinador, i pujar-lo a App Inventor.
Disseny dels components
Anem a utilitzar aquests components per fer TalpBarrejat:
• Un Canvas que serveix com un camp de joc.
• Un ImageSprite que mostra una imatge d'un talp i pot moure i sentir quan el
talp es toca.
• El so que vibra quan es toca el talp.
• Etiquetes que mostren "Encerts:", "Errors:" i el nombre real d'encerts i errors.
• HorizontalArrangements per posicionar correctament les etiquetes.
• Un botó per restablir el nombre d'encerts i errors a 0.
• Un rellotge per fer el moviment del talp una vegada per segon.
La Taula 3-1 mostra la llista completa dels components.
Taula 3-1. La llista completa de components per a TalpBarrejat
Component Paleta Nom assignat Objectiu
Canvas Basic Canvas1 El contenidor per ImageSprite.
ImageSprite Animation Talp L'usuari haurà de tractar de tocar això.
Button Basic BRestablir L'usuari prem aquest per restablir la partida.
Clock Basic Clock1 Controlar el moviment del talp.
Sound Media Sound1 Vibrar quan el talp es toca.
Label Basic EtEncerts Mostra "Encerts:".
Label Basic EtComptaEncerts Mostra el nombre d'encerts.
Horizontal–
Screen
Arrangement
Arrangement
HorizontalArrangement1 Posició EtEncerts pròxima a EtComptaEncerts.
Label Basic EtErrors Mostra "Errors:".
Label Basic EtComptaErrors Mostra el nombre d'errors.
Horizontal–
Screen
Arrangement
Arrangement
HorizontalArrangement2 Posició EtErrors pròxima a EtComptaErrors.

3. TEMA 3 3/14
La col·locació dels components d'acció
En aquesta secció, anem a col·locar els components necessaris per a l'acció del joc.
A la següent secció, anem a col·locar els components per a la visualització de la
partida.
1. Arrossegueu un component Canvas, deixant-lo amb el nom predeterminat,
Canvas1. Estableixi la seva Propietat Width a "Fill parent" per a que siga tan
ampla com la pantalla i ajustar la seva alçada a 300 píxels.
2. Arrossegueu un component ImageSprite del Grup Animation de la Paleta.
Col·loca'l en qualsevol lloc de Canvas1. Feu clic a canvia el nom a la part
inferior de la llista Components i canvieu el seu nom a "Talp". Indiqueu la
propietat Picture per talp.png, que has pujat abans.
3. Arrossegueu un component Button del Grup Basic de la Paleta, col·locant-lo
sota Canvas1. Canviar el nom a "BRestablir" i estableixi la seva propietat Text
en "Restablir".
4. Arrossegueu un component del rellotge. Apareixerà a la part inferior del visor
en la secció "Non-visible components".
5. Arrossegueu un component de so del Grup Media de la Paleta. També es
ficarà a la secció "Non-visible components".
La seva pantalla s'hauria d'assemblar a la Figura 3-2 (tot i que el seu talp pot estar
en una posició diferent).
Figura 3-2. La vista Dissenyador de components

4. TEMA 3 4/14
La col·locació dels components Label
Ara anem a col·locar els components per a la visualització de la puntuació de
l'usuari, específicament el nombre d'encerts i errors.
1. Arrossegueu una HorizontalArrangement del Grup Screen Arrangement de la
Paleta, col·locant-lo sota el botó i mantenir el nom predeterminat de
HorizontalArrangement1.
2. Arrossegueu dues etiquetes del Grup Basic en HorizontalArrangement1.
a) Canviar el nom de l'etiqueta d l'esquerra a "EtEncerts" i estableixi la seva
propietat Text a "Encerts: " (assegurant-se d'incloure un espai després
dels dos punts).
b) Canviar el nom de l'etiqueta de la dreta de "EtComptaEncerts" i estableixi
la seva propietat Text en "0".
3. Arrossegueu una segona HorizontalArrangement, col·locant-la sota
HoritzontalArrangement1.
4. Arrossegueu dues etiquetes en HorizontalArrangement2.
a) Canviar el nom de l'etiqueta de l'esquerra a "EtErrors" i estableixi la seva
propietat Text en "Errors: " (assegurant-se d'incloure un espai després
dels dos punts).
b) Canviar el nom de l'etiqueta de la dreta de "EtComptaErrors" i estableixi
la seva propietat Text en "0". La seva pantalla s'hauria d'assemblar a
alguna cosa com la Figura 3-3.
Figura 3-3. La vista Dissenyador de components de tots els components de TalpBarrejat

5. TEMA 3 5/14
Afegir comportaments als Components
Després de crear els components anteriors, podem passar a l'Editor de Blocs per
implementar el comportament del programa. En concret, volem que el talp vagi a un
lloc a l'atzar en el Canvas a cada segon. L'objectiu de l'usuari és prémer al talp
sempre que apareix, i l'aplicació es mostrarà el nombre de vegades que l'usuari
prem o no toca el talp. (Nota: Es recomana utilitzar el dit, no un mall!) En pressionar
el botó Restablir restableix el nombre d'encerts i errors a 0.
Trasllat del Talp
En els programes que has escrit fins ara, has cridat procediments Built-in, com ara
vibrar en HolaGateta. No seria bonic si App Inventor tinguera un procediment que
presentara una ImageSprite a un lloc a l'atzar a la pantalla? La mala notícia: no és
així. La bona notícia és que pots crear els teus propis procediments! Igual que els
procediments incorporats, el teu procediment es mostrarà en un calaix i es pot
utilitzar en qualsevol lloc de l'aplicació.
En concret, crearem un procediment per moure el talp a un lloc a l'atzar a la
pantalla, que anomenarem MoureTalp. Volem cridar MoureTalp en l'inici del joc,
quan l'usuari toca amb èxit el talp, i un cop per segon.
Crear MoureTalp
Per entendre com moure el talp, hem de veure com Android funciona gràficament. El
Canvas (i la pantalla) estan pensats com una quadrícula amb x (horitzontal) i y
(vertical), on les coordenades (x, y) de la cantonada superior esquerra són (0, 0). La
coordenada x augmenta a mesura que es mou cap a la dreta, i la coordenada y
augmenta mentre es mou cap avall, com es mostra a la Figura 3-4. Les propietats x i
y d'un ImageSprite indiquen on està la seva cantonada superior esquerra, de
manera que la part superior esquerra del talp té els valors de x i y a 0.
Per determinar els valors màxims disponibles de x i y perquè el Talp capia a la
pantalla, hem de fer ús de les propietats Width i Height de Talp i Canvas1. (Ample i
alt del Talp són el mateix que la mida de la imatge que ha pujat. Quan va crear
Canvas1, s'estableix la seva altura a 300 píxels i la seva amplada a "Fill parent", que
copia l'amplada del seu element "parent", la pantalla.) Si el Talp és de 36 píxels
d'amplada i el Canvas és de 200 píxels d'amplada, la coordenada x de la part
esquerra del Talp pot ser tan baixa com 0 (tot el camí a l'esquerra) o tan alta com
164 (200 - 36, o Canvas1.Width - Talp.Width) sense que el Talp s'estenga fora de la
vora dreta de la pantalla. De la mateixa manera, la coordenada y de la part superior
de Talp pot variar de 0 a Canvas1.Height – Talp.Height.
La Figura 3-5 mostra el procediment que crearà, anotat amb comentaris descriptius
(Que si ho desitja, pot afegir al seu procediment).
Per posar a l'atzar el Talp, haurà de seleccionar una coordenada x en l'interval de 0
a Canvas1.Width - Talp.Width. Igualment, es vol que la coordenada y per estar en
l'interval de 0 a Canvas1.Height - Talp.Height. Podem generar un nombre aleatori
mitjançant el procediment random integer, que es troba al calaix de Matemàtiques.

6. TEMA 3 6/14
Hauràs de canviar els paràmetres per defecte "from" d'1 a 0 i reemplaçar els
paràmetres "to", com es mostra a la Figura 3-5.
Figura 3-4. Posicions del Talp a la pantalla, amb informació de coordenades d'alçada i amplada, les coordenades x i
amples es mostren en blau, mentre que la coordenada y i altures es mostren en taronja
Figura 3-5. El procediment MoureTalp, que col·loca el talp en una ubicació aleatòria

7. TEMA 3 7/14
Per crear el procediment:
1. Feu clic al calaix Definició de la fitxa Built-In en l'Editor de Blocs.
2. Arrossega el bloc to procedure (no to procedureWithResult).
3. Feu clic al text "procedure" en el bloc de nou i escriviu "MoureTalp" per
establir el nom del procediment.
4. Atès que volem moure el talp, feu clic a la pestanya My Blocks, feu clic al
calaix Talp i arrossegueu Talp.MoveTo en el procedure, a la dreta de "do".
Tingueu en compte que hem de proporcionar les coordenades x i y.
5. Per especificar que la nova coordenada x per el Talp ha d'estar entre 0 i
Canvas1.Width - Talp.Width, com es va discutir anteriorment:
a) Feu clic a la pestanya Built-In per arribar als procediments incorporats.
b) Feu clic al calaix de Matemàtiques.
c) Arrossegueu el bloc random integer, posar el Tap (protuberància) en el seu
costat esquerre en la "x" en el socket de Talp.MoveTo.
d) Canviar el número 1 en el socket "of" fent clic i després introduint 0.
e) Rebutgi el número 100 fent clic i pressionant Delete del teclat o el Botó
Eliminar, o arrossegant a la paperera.
f) Feu clic al calaix de Matemàtiques i arrossegar una resta (-) en el bloc
socket "to".
g) Feu clic a My Blocks per arribar als seus components.
h) Feu clic al calaix Canvas1 i desplaceu-vos cap avall fins que vegis
Canvas1.Width, que heu d'arrossegar cap al costat esquerre de l'operació
de resta.
i) De la mateixa manera, feu clic al calaix Talp i arrossegueu Talp.Width al
costat dret del bloc resta.
6. Seguir un procediment similar per especificar que la coordenada y ha de ser
un enter aleatori en l'interval de 0 a Canvas1.Height – Talp.Height.
7. Comproveu els seus resultats amb la figura 3-5.
Per provar-ho crida Talp.MoveTo, feu clic al bloc i trieu “Do It”. (És possible que hagi
de reiniciar l'aplicació fent clic a "Connect to Device" en primer lloc.) Heu de veure el
moviment de Talp a la pantalla del telèfon, anant a un lloc diferent cada vegada
(excepte en el cas molt poc probable que el generador de nombres aleatoris escull
el mateix lloc dues vegades seguides).

8. TEMA 3 8/14
Trucar a MoureTalp quan s'inicia l'aplicació
Ara que has escrit el procediment MoureTalp, farem ús. Perquè és molt comú que els
programadors volen que passi alguna cosa quan s'inicia una aplicació, hi ha un bloc
per a aquest mateix propòsit: Screen1.Initialize.
1. Feu clic a My Blocks, feu clic al calaix Screen1, i arrossegueu
Screen1.Initialize.
2. Feu clic al calaix My Definitions, on trobaràs un bloc call MoureTalp.
Arrossegueu cap a fora, posar-lo en Screen1.Initialize, com es mostra a la
Figura 3-6.
Figura 3-6. Quan s'inicia l'aplicació aquesta crida al procediment MoureTalp
Cridar a MoureTalp cada segon
Fer que el Talp es moga cada segon requerirà el component del rellotge. Deixem la
propietat CLOCK1 de TimerInterval amb el valor predeterminat de 1000
(mil·lisegons), o 1 segon. Això vol dir que cada segon, el que s'especifica en un bloc
Clock1.Timer es durà a terme. Heus aquí com posar això en marxa:
1. Feu clic a My Blocks, feu clic al calaix CLOCK1, i arrossegueu Clock1.Timer.
2. Feu clic al calaix My Definitions i arrossegueu un bloc call MoureTalp al bloc
Clock1.Timer, com es mostra a la Figura 3-7.
Figura 3-7. Cridarà al procediment MoureTalp quan el temporitzador s'apagui (cada segon)
Si això és massa ràpid o lent, pots canviar la propietat de CLOCK1 TimerInterval al
Dissenyador de components per fer que es mogui a més o menys freqüència.

9. TEMA 3 9/14
Puntuació
Com es recordarà, s'han creat dues etiquetes, EtComptaEncerts i EtComptaErrors,
que tenien valors inicials de 0. Ens agradaria incrementar els nombres en aquestes
etiquetes cada vegada que l'usuari toca el Talp (un 1) o toqueu la pantalla sense
tocar el Talp (un zero). Per això, utilitzarem el bloc Canvas1.Touched, el que indica
que el Canvas va ser tocat, les coordenades x i y on s'hagi tocat (que no cal saber),
si un sprite va ser tocat (que ens cal saber). La Figura 3-8 mostra el codi que crearà.
Figura 3-8. L'increment del nombre d'encerts (EtComptaEncerts) o errors (EtComptaErrors) quan es toca Canvas1
La traducció de la Figura 3-8 és que sempre que el Canvas es toca, pot comprovar si
un sprite va ser tocat. Atès que només hi ha un sprite en el nostre programa, ha de
ser Talp1. Si Talp1 es toca, afegir un al nombre de EtComptaEncerts.Text, en cas
contrari, afegir un a EtComptaErrors.Text. (El valor de touchedSprite és fals si el
sprite no va ser tocat.)

10. TEMA 3 10/14
Així és com es creen els blocs:
1. Feu clic a My Blocks, feu clic al calaix Canvas1, i arrossegueu
Canvas1.Touched.
2. Feu clic a Built-In, feu clic al calaix de control i arrossegament ifelse,
col·locant dins de Canvas1.Touched.
3. Feu clic a My Blocks, feu clic al calaix My Definitions, i arrossegueu
touchedSprite i poseu en el sòcol ifelse.
4. Com volem que EtComptaEncerts.Text s'incrementi si la prova va tenir èxit (si
el talp va ser tocat):
a) Del calaix EtComptaEncerts, arrossegueu el bloc set EtComptaEncerts.Text
to, posant-lo a la dreta de "then-do".
b) Feu clic a Built-In, feu clic al calaix de Matemàtiques, i dibuixeu un signe
més (+), col·locant-lo al socket "to".
c) Feu clic a My Blocks, feu clic al calaix EtComptaEncerts i arrossegueu el
bloc EtComptaEncerts.Text a l'esquerra del signe més.
d) Feu clic a Built-In, feu clic al calaix de Matemàtiques i arrossegueu un bloc
número 123 a la dreta del signe més. Feu clic a 123 i canviar a 1.
5. Repetiu el pas 4 per EtComptaErrors a la secció "else-do" de la ifelse.
Posa a prova la teva app. Pots provar aquest nou codi al telèfon tocant
el Canvas, dins i fora del Talp, i veient el canvi en la puntuació.

11. TEMA 3 11/14
Abstracció de Procediments
L'habilitat de nomenar i cridar més tard, un conjunt d'instruccions com MoureTalp és
una de les eines claus en informàtica i es coneix com a abstracció de procediments.
Es diu "abstracció" perquè el que crida el procediment (que, en projectes del món
real, és probable que sigui diferent de l'autor del procediment), només ha de saber
el que fa el procediment (mou el talp), no com ho fa. Sense abstracció de
procediments, programes informàtics grans no seria possible, ja que contenen codi
massa gran per a una sola persona i per mantenir-lo en el seu cap alhora. Això és
anàleg a la divisió del treball en el món real, on, per exemple, els enginyers de
disseny dissenyen diferents parts d'un cotxe, cap d'ells compren tots els detalls, i el
conductor només ha de entendre la interfície (per exemple, en prémer el pedal de
fre per aturar el vehicle), no la implementació.
Alguns avantatges d'abstracció de procediments a més de copiar i enganxar codi
són:
• És més fàcil per provar el codi si està nítidament separades de la resta del
programa.
• Si es produeix un error en el codi, només ha de fixar-se en un sol lloc.
• Per canviar l'aplicació, com ara assegurar-se que el talp no es mou en algun
lloc que va aparèixer fa poc, només ha de modificar el codi en un sol lloc.
• Els procediments es poden recollir en una biblioteca i utilitzar en diferents
programes. (Malauradament, aquesta funcionalitat no s'admet actualment en
App Inventor.)
• Trencar a trossos codi ajuda a pensar i executar l'aplicació ("divideix i
venceràs").
• Triar un bon nom per als procediments ajuda a documentar el codi, el que fa
que sigui més fàcil per a una altra persona (o per a tú, un mes més tard) de
llegir.

12. TEMA 3 12/14
Restabliment de la puntuació
Un amic que et veu jugant TalpBarrejat probablement voldrà donar-li una
oportunitat també, així que és bo tenir una manera de restablir el nombre d'encerts i
errors a 0. Pots ser capaç de trobar la manera de fer això sense necessitat de llegir
les següents instruccions. Penseu en la possibilitat de fer-ho sense de llegir les
instruccions.
El que necessitem és un bloc BRestablir.Click que estableix els valors de
EtComptaEncerts.Text i EtComptaErrors.Text a 0. Creu els blocs mostrats a la Figura
3-9.
Figura 3-9. Restabliment del nombre d'encerts (EtComptaEncerts) i d'errors (EtComptaErrors) quan fem click al botó
BRestablir
En aquest punt, probablement no necessites pas a pas les instruccions per crear un
controlador d'esdeveniments d'etiquetes de text, però aquí va un consell per ajudar
a accelerar el procés: en lloc d'aconseguir el seu número del calaix de
Matemàtiques, poseu 0 i el bloc ha de ser creat per a tu. (Aquest tipus de dreceres
de teclat existeixen per altres blocs, també.)
Posa a prova la teva app. Intenta colpejar i perdre el talp i després
prement el botó Restablir.

13. TEMA 3 13/14
Afegir comportament quan el Talp es toca
Hem dit anteriorment que volem que el telèfon vibri quan el Talp es toca, el que
podem fer amb el bloc Sound1.Vibrate, com es mostra a la Figura 3-10. Observeu
que els noms dels paràmetres x1 i y1 s'utilitzen en Talp.Touched perquè x i y s'han
utilitzat ja en Canvas1.Touched.
Figura 3-10. Fer que el telèfon vibri breument (durant 100 milisegons) quan el Talp es toca
Posa a prova la teva app. Vegi com la vibració funciona quan s'arriben
a tocar el Talp. Si la vibració és massa llarga o massa curt per al teu
gust, canviar el nombre de milisegons a Sound1.Vibrate.
L'aplicació completa: TalpBarrejat
Figura 3-11 il·lustra els blocs per a l'aplicació TalpBarrejat completa.
Figura 3-11. L'aplicació TalpBarrejat completa

14. TEMA 3 14/14
Variacions
Aquí hi ha algunes idees per a afegir a TalpBarrejat:
• Agrega botons perquè l'usuari pugui fer que el Talp es moga més ràpid o més
lent.
• Afegir una etiqueta sempre visible que mostre el nombre de vegades que el
Talp ha aparegut (desplaçat).
• Afegir un ImageSprite segon amb una foto d'alguna cosa que l'usuari no ha de
colpejar, com una flor. Si l'usuari ho toca, li penalitzarà mitjançant la reducció
de la seva qualificació o acabarà el joc.
• En lloc d'utilitzar una imatge d'un Talp, permetre a l'usuari seleccionar una
imatge amb el component ContactPicker.
Resum
En aquest tema, hem cobert una sèrie de tècniques útils per a aplicacions en
general i els jocs en particular:
• El component Canvas fa ús d'un sistema de coordenades x-y, on x representa
la direcció horitzontal (des de 0 a l'esquerra per Canvas.Width-1 a la dreta) i y
la direcció vertical (de 0 a la part superior a la Canvas.Height-1 a la part
inferior). L'altura i l'ample d'un ImageSprite es pot restar de l'alçada i
l'amplada d'un Canvas per assegurar-se que el sprite s'ajusta del tot al
Canvas.
• És possible crear aplicacions en temps real que no només reaccionen a la
entrada de l'usuari, sinó també en resposta al temporitzador intern del
telèfon. Específicament, el bloc Clock.Timer funciona a la freqüència
especificada a la propietat Clock.Interval i es pot utilitzar per moure
ImageSprite (o altres) components.
• Les etiquetes es poden utilitzar per mostrar les puntuacions que van cap
amunt (o cap avall) en resposta a les accions del jugador.
• La retroalimentació tàctil es pot proporcionar als usuaris a través del mètode
Sound.Vibrate, el que fa que el telèfon vibri durant el nombre especificat de
milisegons.
• En lloc d'utilitzar els procediments incorporats en els mètodes, es poden crear
per nomenar un conjunt de blocs (MoureTalp) que poden cridar-se igual que
els incorporats. Això es coneix com a abstracció de procediments i és una
idea clau en la informàtica, el que permet la reutilització de codi i fent
possible aplicacions complexes.
• Es pot generar un comportament impredictible en el bloc random integer al
Calaix de Matemàtiques, fent un joc diferent cada vegada que es juga.