5 marieta caçadora

Capítol 5 1/21
Caça de la marieta
Els jocs són algunes de les aplicacions més interessants de
telèfons mòbils, tant per jugar i crear. L'èxit recent de
Angry Birds ha estat descarregat 50 milions de vegades en
el seu primer any i es juga més d'un milió d'hores cada
dia, d'acord amb Rovio, el seu desenvolupador. (Fins i tot
es parla del que fa en una pel·lícula!) Vas a crear els teus
propis jocs amb App Inventor, inclòs aquest que implica
una marieta menjant pugons evitant al mateix temps una
granota.
El que construiràs
Amb l'aplicació de la caça de la
marieta que es mostra a la Figura 5-
1, l'usuari pot:
• Control d'una marieta per la
inclinació del telèfon.
• Veure una barra d'energia de
nivell a la pantalla, el que
disminueix amb el temps, que
condueix a la inanició de la
marieta.
• Fer la marieta caçar i menjar
pugons per obtenir energia i
evitar la inanició.
• Ajudar a la marieta per a evitar
que se la menge una granota.

Capítol 5 2/21
El que aprendràs
Has de d'haver treballat l'aplicació TalpBarrejat al Capítol 3 abans d'aprofundir en
aquest capítol, ja que assumeix que sàpiga de la creació del procediment, la
generació de nombres aleatoris, el bloc ifelse i els components ImageSprite, Canvas,
Sound i Clock.
A més de revisar el material dels capítols anteriors i TalpBarrejat altra banda, aquest
capítol presenta:
• L'ús de components ImageSprite múltiples i detectar col·lisions entre ells.
• La detecció del telèfon quan s'inclina amb un component OrientationSensor i
usar-lo per controlar un ImageSprite.
• Canvi de la imatge mostrada per un ImageSprite.
• Dibuix de línies en un component Canvas.
• Control d'esdeveniments múltiples amb un component Clock.
• Utilització de variables per realitzar un seguiment dels números (nivell
d'energia de la marieta).
• Creació i ús de procediments amb paràmetres.
• Ús del bloc and.
Disseny dels components
Aquesta aplicació tindrà un Canvas que proporciona un camp de joc que conté tres
components ImageSprite. Un per a la marieta, una per al pugó, i un altre per a la
granota, que també requerirà un component de so per al seu raucar.
L'OrientationSensor s'utilitzarà per mesurar la inclinació del telèfon per moure la
marieta, i un rellotge s'usa per canviar la direcció dels pugons. Hi haurà un segon
Canvas que mostra el nivell de l'energia de la marieta. Un botó de reinici reprendrà
el joc si la marieta es mor de fam o es menjada. La Taula 5-1 proporciona una llista
completa dels components d'aquesta aplicació.
Taula 5-1. Tots els components per al joc de la Caça de la marieta
Component Paleta Nom assignat Objectiu
Canvas Drawing and Animation JocCanvas Terreny de joc.
ImageSprite Drawing and Animation Marieta Controlat per l'usuari jugador.
OrientationSensor Sensors OrientationSensor1 Detectar la inclinació del telèfon per controlar la
marieta.
Clock Sensors Clock1 Determina quan canviar la capçalera de
ImageSprites
ImageSprite Drawing and Animation Pugo La marieta presa.
ImageSprite Drawing and Animation Granota La marieta depredadora.
Canvas Drawing and Animation EnergiaCanvas Mostrar el nivell d'energia de la marieta.
Button Basic BRestaurar Reinicieu el joc.
Sound Media Sound1 "Croar" quan la granota es menja la marieta.

Capítol 5 3/21
Introducció
Connectar-se a la pàgina web de App Inventor i començar un nou projecte. Nomena-
lo "Marieta" i també estableix el títol de la pantalla de "Caça de la Marieta". Obriu
l'Editor de Blocs i connectar al telèfon. Afegeix les imatges que has baixat de la
carpeta del capítol 5 (Recursos5), així com l'arxiu de so en el panell Media.
Si vols utilitzar un telèfon, hauràs de desactivar autorotació de la pantalla, que
canvia la direcció de visualització en engegar el telèfon. En la majoria dels telèfons,
heu d'anar a la pantalla inicial, premeu el botó de menú, seleccionant Configuració,
seleccioneu Pantalla, i desmarcant la casella "Autorotació de pantalla".
L'animació de la marieta
En aquest joc, l'usuari estarà representat per una marieta, el moviment serà
controlat per la inclinació del telèfon. Ací l'usuari interactua en el joc d'una manera
diferent de TalpBarrejat, en la que l'usuari estava fora del telèfon.

Capítol 5 4/21
Afegir els components
En capítols anteriors s'ha hagut de crear tots els components a la vegada, això no és
com els desenvolupadors solen treballar. És més comú crear una part d'un programa
i al mateix temps, provar-la, i després passar a la següent part del programa. En
aquesta secció, crearem la marieta i controlarem el seu moviment.
• Crear un Canvas en el Dissenyador de components, nomena-lo JocCanvas i
estableixi el seu Width a "Fill parent" i la seva Height a 300 píxels.
• Col·loqueu una ImageSprite sobre el Canvas, canvieu-li el nom a Marieta i
establint la seva propietat Picture a la imatge marieta (la viva, no la morta).
No et preocupes pels valors de les propietats X i Y, que dependran de en
quina part del Canvas has col·locat la ImageSprite.
Com t'hauràs adonat, les ImageSprites també tenen les propietats de Interval,
Heading i Speed, el que utilitzarem en aquest programa:
• La propietat Interval, que es pot configurar al 10 (mil·lisegons) per aquest joc,
especifica la freqüència amb que la ImageSprite s'hauria moure (en lloc de ser
moguda pel procediment MoveTo que vas utilitzar en TalpBarrejat).
• La propietat Heading indica la direcció en què s'ha de moure la ImageSprite,
en graus. Per exemple, 0 vol dir cap a la dreta, 90 significa cap amunt, 180
significa cap a l'esquerra, i així successivament. Afegeix el Heading cap a la
dreta en aquest moment, el canviarem a l'Editor de Blocs.
• La propietat Speed especifica el nombre de píxels de la ImageSprite que s'ha
de moure quan l'interval (10 mil·lisegons) passa. També anem a canviar la
propietat de Speed en l'Editor de Blocs.
El moviment de la marieta serà controlat per un OrientationSensor, que detecta com
el telèfon està inclinat. Volem utilitzar el component Clock per comprovar l'orientació
del telèfon cada 10 mil·lisegons (100 vegades per segon) i canviar la marieta de
direcció (Heading) en conseqüència. Anem a configurar això en l'Editor de Blocs de
la següent manera:
1. Afegir un OrientationSensor, que es ficarà a la secció "Non-visible de
components".
2. Afegir un Clock, que també apareixen en el "Non-visible de components", i
estableixi la seua propietat TimerInterval a 10 mil·lisegons. Revisi el que ha
afegit en la Figura 5-2.

Capítol 5 5/21
Afegir el comportament
Passant a l'Editor de Blocs, crear el procediment ActualitzaMarieta i un bloc
Clock1.Timer, com es mostra a la Figura 5-3. Provi a escriure els noms d'alguns dels
blocs (com "Clock1.Timer") en lloc d'arrossegar fora dels calaixos. (Tingueu en
compte que l'operació aplicada al número 100 és la multiplicació, assenyalen amb
un asterisc, que pot ser difícil de veure a la figura.) No és necessari crear
comentaris grocs, encara que es pot fer clic al botó dret en un bloc i seleccionant
Add Comment.
El procediment ActualitzaMarieta fa ús de dues propietats més útils de
OrientationSensor:
• Angle, que indica la direcció en la que s'inclina el telèfon (en graus).
• Magnitude, que indica la quantitat d'inclinació, que van des de 0 (sense inclinació)
a 1 (inclinació màxima).
Multiplicant Magnitude per 100 de la marieta, li diu que hauria de moure entre 0 i
100 píxels en la direcció (Heading) especificada. Sempre que el seu TimerInterval,
que prèviament havíem establert en 10 mil·lisegons en el Dissenyador de
Components, passa.
Si després de fer això, veus que el moviment de la marieta va massa lent, augmenta
el multiplicador de velocitat. Si la marieta sembla massa ràpid, el disminueixes.
Figura 5-2. Configuració de la interfície d'usuari del Dissenyador de Components per a l'animació de la marieta

Capítol 5 6/21
Figura 5-3. Canvi de Heading de la marieta i la velocitat cada 10 mil·lisegons
Veient el nivell d'energia
Anem a mostrar el nivell de l'energia de la marieta amb una barra roja en un segon
Canvas. La línia serà d'1 píxel d'alt, i la seva amplada serà el mateix nombre de
píxels com l'energia de la marieta, que oscil·la entre 200 (ben alimentats) a 0 (mort).
Afegint un component
Al dissenyador, crear un nou Canvas, col·locant-lo sota JocCanvas i nomenar-lo
EnergiaCanvas. Indiqueu la propietat Width a "Fill parent" i la seva Height d'1 píxel.
Creació d'una variable: Energia
En l'Editor de Blocs, hauràs de crear una variable energia amb un valor inicial de 200
per fer un seguiment del nivell d'energia de la marieta. (Com es recordarà, es va
utilitzar per primera vegada una variable, MidaGota, en aplicació del capítol 2
PotDePintar). Així és com es fa:
1. En l'Editor de Blocs, a la columna Built-In, obri el calaix Variables. Arrossega
un bloc «initialize global name to». Canvieu el text "name" a "energia".
2. Crear un bloc number 200 (ja sigui per començar a escriure el número 200 o
arrossegant un bloc número del calaix de Matemàtiques) i connectar-lo a
initialize global energia, com es mostra a la Figura 5-4.
Figura 5-4. Inicialització de la variable d'energia a 200

Capítol 5 7/21
Dibuix de la barra d'energia
Volem comunicar el nivell d'energia amb una barra roja, la longitud en píxels és el
valor de l'energia. Per això, podríem crear dos conjunts similars de blocs de la
manera següent:
1. Dibuixa una línia vermella de (0, 0) a (energia, 0) en JocCanvas per mostrar el
nivell actual d'energia.
2. Dibuixa una línia blanca de (0, 0) a (EnergiaCanvas.Width, 0) en JocCanvas
per esborrar el nivell actual d'energia abans de treure el nou nivell.
No obstant això, una millor alternativa és crear un procediment on es pot traçar una
línia de qualsevol longitud i de qualsevol color en JocCanvas. Per això, cal especificar
dos arguments, la longitud i el color, quan el nostre procediment es cridat, de la
mateixa manera que necessitàvem per passar valors de paràmetres en TalpBarrejat
quan cridem al procediment built-in random integer.
Aquests són els passos per a la creació d'un procediment DibuixaLiniaEnergia, que
es mostra a la Figura 5-6.
1. Anar al calaix Procedures i arrossegar un bloc to procedure.
2. Feu clic en el seu nom i canviar-ho a "DibuixaLiniaEnergia".
3. Ompli la resta del procediment, com es mostra a la Figura 5-6.
Figura 5-6. Definició del procediment DibuixaLiniaEnergia
Ara que estàs creant els teus propis procediments, també anem a escriure un
procediment MostraEnergia que crida a DibuixaLiniaEnergia dues vegades, una
vegada per esborrar l'antiga línia (traçant una línia blanca a tot l'ample del canvas) i
una altra per mostrar la nova línia, com es mostra a la Figura 5-7.

Capítol 5 8/21
Figura 5-7. Definició del procediment MostraEnergia
El procediment MostraEnergia consta de quatre línies que fan el següent:
1. Ajustar el color de la pintura en blanc.
2. Dibuixar una línia a tot l'ample EnergiaCanvas (que és a 1 píxel d'alçada).
3. Ajustar el color de la pintura de color roig.
4. Dibuixar una línia la longitud en píxels és el mateix que el valor de l'energia.
Nota. El procés de substitució de codi comú amb les cridades a un nou procediment
es diu refactorització, un conjunt de tècniques poderoses i fiable per fer més fàcil de
mantenir programes. En aquest cas, si mai volia canviar l'altura o la ubicació de la
línia d'energia, només hauria de fer un únic canvi en DibuixaLiniaEnergia, en lloc de
fer canvis en totes les cridades a la mateixa.

Capítol 5 9/21
Fam
A diferència de les aplicacions en els capítols anteriors, aquest joc té una manera
d'acabar: es va acabar quan la marieta no menge suficients pugons o és menjat per
la granota. En qualsevol d'aquests casos, volem que la marieta deixi de moure (que
podem fer en establint Marieta.Enabled a false) i que la imatge canvie d'una marieta
viva a una morta (que podem fer canviant Marieta.Picture pel nom de la imatge
apropiada). Crear el procediment JocAcabat com es mostra a la Figura 5-8.
Figura 5-8. Definició del procediment JocAcabat
A continuació, afegiu el codi que s'indica en roig a la Figura 5-9 a ActualitzaMarieta
(que, com es recordarà, és cridat per Clock.Timer cada 10 mil·lisegons):
• Disminuir el seu nivell d'energia.
• Visualitzar el nou nivell.
• Acabar el joc si l'energia és 0.
Posa a prova la teva app. Has de ser capaç de provar el codi al telèfon i
comprovar que el nivell d'energia disminueix amb el temps, causant
finalment la mort de la marieta. Per reiniciar l'aplicació, premeu el botó
" Connect to Device...", en l'Editor de Blocs.
Figura 5-9. Segona versió del procediment ActualitzaMarieta

Capítol 5 10/21
Afegir un pugó
El següent pas és afegir un pugó. En concret, un pugó ha de voletejar al voltant del
JocCanvas.
Si la marieta topa amb el pugó (de manera que se'l menja), el nivell de la marieta
d'energia hauria d'augmentar i el pugó ha de desaparèixer, per ser reemplaçat per
un altre una mica més tard. (Des del punt de vista de l'usuari, serà un pugó diferent,
però en realitat és el mateix component ImageSprite).
Afegir una ImageSprite
El primer pas per afegir un pugó és tornar al dissenyador i crear una altra
ImageSprite, assegurant-se de no posar-lo a la part superior de la marieta. Ha de
canviar el nom dels pugons i les seves propietats s'estableixen de la següent
manera:
1. Estableixi la propietat Picture de la imatge del pugó que has pujat.
2. Indiqueu la propietat Interval en 10, així com la marieta, que es mou cada 10
mil·lisegons.
3. Ajust el seu Speed a 2, pel que no es mou massa ràpid per a que la marieta
puga atrapar-lo.
No es preocupi per les seves propietats X i Y (sempre que no sigui en la part superior
de la marieta) o la seva propietat Heading, que s'establirà en l'Editor de Blocs.
El control del pugó
En experimentar, ens va semblar que funcionava millor per al pugó de canviar de
direcció aproximadament una vegada cada 50 mil·lisegons (5 "tics" de Clock1). Un
enfocament per permetre aquest comportament seria crear un segon rellotge amb
un TimerInterval de 50 mil·lisegons. No obstant això, estaria bé que intentes una
tècnica diferent perquè puguis aprendre sobre el bloc random fraction (fracció
aleatòria), que torna un nombre aleatori major o igual que 0 i menor d'1 cada
vegada que es cridat. Creu el procediment ActualitzaPugó mostrat a la Figura 5-10 i
afegir una crida a ella en Clock1.Timer.

Capítol 5 11/21
Com funcionen els blocs
Quan soni l'alarma (100 vegades per segon), ambdós ActualitzaMarieta (com abans)
i ActualitzaPugó són cridats. La primera cosa que succeeix en ActualitzaPugo és que
una random fraction entre 0 i 1 és generat (per exemple, 0,15). Si aquest nombre és
menor que 0,20 (que passarà el 20% de les vegades), el pugó canviarà la seva
direcció a un nombre aleatori de graus entre 0 i 360. Si el nombre no és menor que
0,20 (que serà el cas que el restant 80% de les vegades), el pugó mantindrà el
Heading.
Figura 5-10. Afegir el procediment ActualitzaPugo

Capítol 5 12/21
Després que la marieta es menja el pugó
El següent pas és com es menja la marieta el pugó quan col·lisionen.
Afortunadament, App Inventor proporciona elements per a la detecció de col·lisions
entre els components ImageSprite, el que planteja la pregunta: què ha de succeir
quan la marieta i el pugó col·lisionen? És possible que vulgueu aturar i pensar sobre
això abans de continuar llegint.
Per fer front al que succeeix quan la marieta i el pugó xoquen, crearem un
procediment, MenjaPugo, que fa el següent:
• Augmenta el nivell d'energia d'un 50 per a simular el sabrós menjar.
• Fa que el pugó desaparegui (establint la seva propietat Visible en false).
• Fa que el pugó deixi de moure (establint la propietat Enabled en false).
• Fa que el pugó es trasllada de a un lloc a l'atzar a la pantalla. (Això segueix el
mateix patró que el codi per moure el talp en TalpBarrejat).
Comproveu els blocs d'acord amb la figura 5-11. Si teniu altres idees del que ha de
succeir, com els efectes de so, podeu afegir-los.
Figura 5-11. Afegir el procediment MenjaPugo
Cada vegada que es cridat MenjaPugo, afegeix 50 a la variable energia, ajornant la
fam per a la marieta. A continuació, propietats Visible i Enabled del pugó s'estableix
en false pel que sembla desaparèixer i deixa de moure. Finalment, les coordenades x
i y són generades a l'atzar fent una crida a Pugo.MoveTo de manera que, quan torna
a aparèixer el pugó, està en una nova ubicació (en cas contrari, es pot menjar tan
bon punt reapareix).

Capítol 5 13/21
La detecció d'una col·lisió marieta-pugó
La figura 5-12 mostra el codi per detectar col·lisions entre la marieta i el pugó.
Tingueu en compte que en afegir una condició al bloc "and", un sòcol nou test
apareix.
Figura 5-12. Detectar i actuar sobre les col·lisions entre la marieta i el pugó
Quan la marieta xoca amb un altre ImageSprite, Marieta.CollidedWith es cridat, amb
el paràmetre "other" lligat al que va xocar contra la marieta.
Ara mateix, l'únic que pot xocar amb el pugó, però després agregarem una granota.
Anem a fer servir la programació defensiva i explícitament comprovar que la col·lisió
va ser amb el pugó abans de cridar MenjaPugo. Hi ha també una verificació per
confirmar que el pugó és visible. En cas contrari, després d'un pugó que es menja,
però abans que reaparegui, podria xocar amb la marieta de nou. Sense la verificació,
el pugó invisible es menjaria una altra vegada, provocant un nou increment en
l'energia sense que l'usuari sapiera el per què.
Nota. La programació defensiva és la pràctica de l'escriptura de codi de tal manera
que és probable que funcioni fins i tot si el programa és modificat. A la Figura 5-12,
en el test other = Pugo no és estrictament necessari ja que l'únic que actualment
poden col·lidir amb el pugó és la marieta, però tenir el control evitarà que el nostre
programa funcioni incorrectament si afegim un altre ImageSprite i us oblideu de
canviar la marieta.CollidedWith. Els programadors generalment passen més temps
corregint errors que escrivint nou codi, pel que val la pena prendre una mica de
temps per escriure codi d'una manera que evita errors.

Capítol 5 14/21
El retorn del pugó
Per fer que el pugó finalment reaparega, has de modificar ActualitzaPugo com es
mostra a la Figura 5-13, de manera que canvia la direcció del pugó només si és
visible. (canviar-ho si és invisible és una pèrdua de temps.) Si el pugó no és visible
(ha sigut menjat recentment), hi ha una possibilitat d'1 a 20 (5%) que serà reactivat,
en altres paraules, fa elegible per ser menjat de nou.
Figura 5-13. Modificació ActualitzaPugo per a fer invisibles els pugons i tornar a la vida
ActualitzaPugó s'està tornant bastant complex, així que anem a fer un pas
acuradament a través del seu comportament:
• Si el pugó és visible (que serà el cas, llevat que s'acaba de menjar),
ActualitzaPugó es comporta com el primer que ho va escriure. Específicament,
hi ha una possibilitat de 20% del seu canvi de direcció.
• Si el pugó no és visible (va ser menjat fa poc), llavors la part "else-do" del bloc
ifelse s'executarà. Un nombre aleatori es genera a continuació. Si és menys
de 0.05 (que serà 5% del temps), el pugó torna a estar visible i està habilitat,
el que fa ser elegible per a ser menjat de nou.
A causa que ActualitzaPugó és cridat per Clock1.Timer, que passa cada 10
mil·lisegons, i hi ha una possibilitat d'1 a 20 (5%) del pugó es fa visible de nou, el
pugó tindrà una mitjana de 200 mil·lisegons (1/5 d'un segon) per reaparèixer.

Capítol 5 15/21
Afegir un botó de reinici
Com t'hauràs adonat al provar l'aplicació amb la seua nova funcionalitat dels pugons
que s'alimenten, el joc realment té un botó de reinici. Aquesta és una altra raó per la
qual és útil dissenyar i construir la teua aplicació en trossos xicotets i després
provar, que sovint descobreixes coses que pots haver passat per alt, i és més fàcil
per afegir a mesura que avança que tornar i canviar un cop l'aplicació és
"completa". Al Dissenyador de components, afegir un component Button sota
EnergiaCanvas, canviar-li el nom a "BRestaurar" i estableixi la seva propietat Text en
"Reinicia".
En l'Editor de Blocs, crear el codi que es mostra a la Figura 5-14 per fer el següent
quan es fa clic al BRestaurar:
1. Ajusteu el nivell d'energia de nou a 200.
2. Torneu a activar el pugó i fer-lo visible.
3. Torneu a activar la marieta i canviar la seva imatge de nou a la marieta viva
(a menys que vulguis marietes zombies!).
Figura 5-14. Reiniciar el joc quan es prem BRestaurar
Afegir la granota
En aquest moment, mantenir viva la marieta no és massa difícil. Necessitem un
depredador. En concret, anem a afegir una granota que es mou directament cap a la
marieta. Si xoquen, la marieta es menjada, i el joc acaba.

Capítol 5 16/21
Després que la granota cace la marieta
El primer pas per tenir la granota perseguint la marieta està tornant al Dissenyador
de Components i afegint 3 ImageSprite granotes a JocCanvas. Indiqueu la propietat
Picture de la imatge apropiada, Interval a 10, i Speed a 1, ja que hauria de ser més
lents que les altres criatures.
La figura 5-15 mostra ActualitzaGranota, un nou procediment d'assignar i cridar des
de Clock1.Timer.
Figura 5-15. Fer que la granota es moga cap a la marieta
A hores d'ara, has d'estar familiaritzat amb l'ús del bloc random fraction per fer que
un esdeveniment ocorrega amb una certa probabilitat. En aquest cas, hi ha una
possibilitat del 10% que la direcció de la granota es canviarà per anar directament
cap a la marieta. Això requereix la trigonometria, però no es preocupis! App Inventor
servir un munt de funcions matemàtiques, fins i tot coses com trigonometria. En
aquest cas, vols utilitzar el bloc atan2 (arctangent), que retorna l'angle corresponent
a un determinat conjunt de valors de x i y.
(Per a aquells que estiguin familiaritzats amb la trigonometria, la raó i l'argument
perquè atan2 té el signe contrari del que es podria esperar (l'ordre invers dels
arguments per restar), és que l'augment de les coordenades en la direcció cap avall
sobre un Canvas d'Android, és el contrari del que passaria en un sistema de
coordenades estàndard X-Y)

Capítol 5 17/21
Després de que la granota menja la marieta
Ara hem de modificar el codi de col·lisió de manera que si xoquen la marieta amb la
granota, el nivell d'energia i la barra va a 0 i el joc acaba, com es mostra a la Figura
5-16.
Figura 5-16. Fer que la granota es menge a la marieta
A més del primer if, que comprova si la marieta va xocar contra el pugó, ara hi ha un
segon if, que comprova si la marieta ha xocat amb la granota. Si la marieta i la
granota xoquen, succeeixen tres coses:
1. L'energia variable baixa a 0, ja que la marieta ha perdut la seva força vital.
2. MostraEnergia es cridat, per esborrar la línia d'energia anterior (i dibuixar el
nou 0-1).
3. El procediment que escrivim abans, JocAcabat, està cridat a aturar la marieta
de moviment i canvia la seva imatge a la d'una marieta morta.

Capítol 5 18/21
El retorn de la marieta
BRestaurar.Click ja té codi per reemplaçar la imatge de la marieta morta amb el de
la marieta viva. Ara ha de afegir codi per moure la marieta en directe a un lloc a
l'atzar. (Penseu en el que passaria si no es mou la marieta al començament d'un nou
joc. On estaria en relació amb la granota?)
La Figura 5-17 mostra els blocs per moure la marieta quan el joc es reinicia.
Figura 5-17. La versió final de BRestaurar.Click
L'única diferència entre aquesta versió de BRestaurar.Click i la versió anterior és el
bloc Marieta.MoveTo i els seus arguments. En built-in la funció random integer és
cridada dues vegades, una vegada per generar una coordenada x i un cop per
generar una coordenada y. Si bé no hi ha res que impedeixi que la marieta es
col·loqui a la part superior del pugó o la granota, les probabilitats estan en contra.
Posa a prova la teva app. Reinicieu el joc i assegura't que la marieta es
presenta en un lloc nou aleatori.

Capítol 5 19/21
Afegir efectes de so
Quan hages provat el joc, t'hauràs adonat que no hi ha una resposta molt bona quan
un animal es menjat. Per afegir efectes de so i la retroalimentació tàctil, feu el
següent:
1. En el Dissenyador de components, afegir un component de so. Estableixi el
seu origen en l'arxiu de so que has pujat.
2. Anar a l'Editor de Blocs, on podràs:
a) Fer que el telèfon vibri quan es menja un pugó mitjançant l'addició d'un
bloc Sound1.Vibrate amb un argument de 100 (mil·lisegons) en MenjaPugo.
b) Fer que la granota croe quan es menja la marieta afegint una crida a
Sound1.Play en Marieta.CollidedWith just abans de la crida a JocAcabat.

Capítol 5 20/21
Variacions
Aquí hi ha algunes idees de com millorar o personalitzar aquest joc:
• Actualment, la granota i el pugó es mantenen en moviment després que el joc
ha acabat. Per evitar-ho, estableix de les seves propietats Enabled en false en
JocAcabat i torna a ficar BRestaurar.Click a true.
• Mostrar una puntuació que indica el temps que la marieta s'ha mantingut amb
vida. Pots fer això mitjançant la creació d'una etiqueta que s'incrementi en
Clock1.Timer.
• Fer la barra d'energia més visible mitjançant l'augment de l'alçada de
EnergiaCanvas a 2 i traçant dues línies, una a sobre de l'altra, en
DibuixaLiniaEnergia. (Aquest és un altre dels beneficis de comptar amb un
procediment en lloc de codi duplicat per esborrar i tornar a dibuixar la línia
d'energia: només ha de fer un canvi en un sol lloc per canviar la mida o el
color, o la ubicació de la línia).
• Afegir un ambient amb una imatge de fons i més efectes de so, com ara sons
de la natura o un avís quan el nivell de la marieta d'energia estigui baixa.
• Feu el joc més difícil d'aconseguir amb el temps, com per exemple mitjançant
l'augment de la propietat Speed de la granota o disminuint la seva propietat
Interval.
• Tècnicament, la marieta hauria de desaparèixer quan es menjada per la
granota. Canviar el joc de manera que la marieta es converteix en invisible si
es menjada per la granota, però no si es mor de fam.
• Substituïu les fotos de la marieta, els pugons i la granota amb altres, com un
hòbbit, orc, i un malvat mag.

Capítol 5 21/21
Resum
Amb dos jocs ja fets (si ha completat el tutorial TalpBarrejat), ara sap com crear els
seus propis jocs, que és la meta de molts nous programadors o aspirants! En
concret, ha après:
• Pots tenir múltiples components ImageSprite (la marieta, el pugó, i la granota)
i pot detectar col·lisions entre ells.
• La inclinació del telèfon pot ser detectat pel OrientationSensor, i el valor es
pot utilitzar per controlar el moviment d'un objecte mòbil (o qualsevol altra
cosa que pugui imaginar).
• un component de rellotge únic pot controlar diversos esdeveniments que es
produeixen en la mateixa freqüència (canvis de direccions en la marieta i en
la granota), o diferents freqüències, mitjançant l'ús del bloc random fraction.
Per exemple, si vols que succeeixi un esdeveniment aproximadament una
quarta part (25 per cent) de les vegades, el va posar en el cos d'un bloc que
només s'executa quan el resultat de la fracció d'atzar és menor que 25.
• Pot tenir diversos components de canvas en una sola aplicació, que hem fet
per tenir tant un camp de joc i mostrar gràficament una variable (en lloc de a
través d'una etiqueta).
• El procediments User-defined es poden definir amb paràmetres (per exemple,
"color" i "longitud" en DibuixaLiniaEnergia) que controlen el comportament,
ampliant en gran mesura el poder d'abstracció de procediments.
Un altre component útil per als jocs és la bola, que només difereix de ImageSprite en
què té l'aspecte d'un cercle farcit en lloc d'una imatge arbitrària.

5 marieta caçadora

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a 5 marieta caçadora

Similar a 5 marieta caçadora (20)

5 marieta caçadora