Capítol 5 1/21

Caça de la marieta

Els jocs són algunes de les aplicacions més interessants detelèfons mòbils, tant per jugar i crear. L'èxit recent deAngry Birds ha estat descarregat 50 milions de vegades enel seu primer any i es juga més d'un milió d'hores cadadia, d'acord amb Rovio, el seu desenvolupador. (Fins i totes parla del que fa en una pel·lícula!) Vas a crear els teuspropis jocs amb App Inventor, inclòs aquest que implicauna marieta menjant pugons evitant al mateix temps unagranota.

El que construiràs

Amb l'aplicació de la caça de lamarieta que es mostra a la Figura 5-1, l'usuari pot:

• Control d'una marieta per lainclinació del telèfon.

• Veure una barra d'energia denivell a la pantalla, el quedisminueix amb el temps, quecondueix a la inanició de lamarieta.

• Fer la marieta caçar i menjarpugons per obtenir energia ievitar la inanició.

• Ajudar a la marieta per a evitarque 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 enaquest capítol, ja que assumeix que sàpiga de la creació del procediment, lageneració 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, aquestcapí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 iusar-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 (nivelld'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é trescomponents ImageSprite. Un per a la marieta, una per al pugó, i un altre per a lagranota, que també requerirà un component de so per al seu raucar.L'OrientationSensor s'utilitzarà per mesurar la inclinació del telèfon per moure lamarieta, i un rellotge s'usa per canviar la direcció dels pugons. Hi haurà un segonCanvas 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 llistacompleta dels components d'aquesta aplicació.

Taula 5-1. Tots els components per al joc de la Caça de la marietaComponent 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". Obriul'Editor de Blocs i connectar al telèfon. Afegeix les imatges que has baixat de lacarpeta 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, quecanvia 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 maneradiferent 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 éscom els desenvolupadors solen treballar. És més comú crear una part d'un programai al mateix temps, provar-la, i després passar a la següent part del programa. Enaquesta secció, crearem la marieta i controlarem el seu moviment.

• Crear un Canvas en el Dissenyador de components, nomena-lo JocCanvas iestableixi 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 iestablint 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 enquina 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 sermoguda 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, 180significa cap a l'esquerra, i així successivament. Afegeix el Heading cap a ladreta en aquest moment, el canviarem a l'Editor de Blocs.

• La propietat Speed especifica el nombre de píxels de la ImageSprite que s'hade moure quan l'interval (10 mil·lisegons) passa. També anem a canviar lapropietat de Speed en l'Editor de Blocs.

El moviment de la marieta serà controlat per un OrientationSensor, que detecta comel 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 dedirecció (Heading) en conseqüència. Anem a configurar això en l'Editor de Blocs dela següent manera:

1. Afegir un OrientationSensor, que es ficarà a la secció "Non-visible decomponents".

2. Afegir un Clock, que també apareixen en el "Non-visible de components", iestableixi la seua propietat TimerInterval a 10 mil·lisegons. Revisi el que haafegit 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 blocClock1.Timer, com es mostra a la Figura 5-3. Provi a escriure els noms d'alguns delsblocs (com "Clock1.Timer") en lloc d'arrossegar fora dels calaixos. (Tingueu encompte que l'operació aplicada al número 100 és la multiplicació, assenyalen ambun asterisc, que pot ser difícil de veure a la figura.) No és necessari crearcomentaris grocs, encara que es pot fer clic al botó dret en un bloc i seleccionantAdd Comment.

El procediment ActualitzaMarieta fa ús de dues propietats més útils deOrientationSensor:

• 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 i100 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 deComponents, passa.

Si després de fer això, veus que el moviment de la marieta va massa lent, augmentael 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 segonCanvas. La línia serà d'1 píxel d'alt, i la seva amplada serà el mateix nombre depí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-loEnergiaCanvas. 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 200per fer un seguiment del nivell d'energia de la marieta. (Com es recordarà, es vautilitzar per primera vegada una variable, MidaGota, en aplicació del capítol 2PotDePintar). Així és com es fa:

1. En l'Editor de Blocs, a la columna Built-In, obri el calaix Variables. Arrossegaun 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 oarrossegant un bloc número del calaix de Matemàtiques) i connectar-lo ainitialize 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 elvalor de l'energia. Per això, podríem crear dos conjunts similars de blocs de lamanera següent:

1. Dibuixa una línia vermella de (0, 0) a (energia, 0) en JocCanvas per mostrar elnivell actual d'energia.

2. Dibuixa una línia blanca de (0, 0) a (EnergiaCanvas.Width, 0) en JocCanvasper 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 unalínia de qualsevol longitud i de qualsevol color en JocCanvas. Per això, cal especificardos arguments, la longitud i el color, quan el nostre procediment es cridat, de lamateixa manera que necessitàvem per passar valors de paràmetres en TalpBarrejatquan cridem al procediment built-in random integer.

Aquests són els passos per a la creació d'un procediment DibuixaLiniaEnergia, quees 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 unprocediment MostraEnergia que crida a DibuixaLiniaEnergia dues vegades, unavegada per esborrar l'antiga línia (traçant una línia blanca a tot l'ample del canvas) iuna 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 procedimentes diu refactorització, un conjunt de tècniques poderoses i fiable per fer més fàcil demantenir programes. En aquest cas, si mai volia canviar l'altura o la ubicació de lalínia d'energia, només hauria de fer un únic canvi en DibuixaLiniaEnergia, en lloc defer 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 manerad'acabar: es va acabar quan la marieta no menge suficients pugons o és menjat perla granota. En qualsevol d'aquests casos, volem que la marieta deixi de moure (quepodem fer en establint Marieta.Enabled a false) i que la imatge canvie d'una marietaviva a una morta (que podem fer canviant Marieta.Picture pel nom de la imatgeapropiada). 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 icomprovar que el nivell d'energia disminueix amb el temps, causantfinalment 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 delJocCanvas.

Si la marieta topa amb el pugó (de manera que se'l menja), el nivell de la marietad'energia hauria d'augmentar i el pugó ha de desaparèixer, per ser reemplaçat perun 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 altraImageSprite, assegurant-se de no posar-lo a la part superior de la marieta. Ha decanviar el nom dels pugons i les seves propietats s'estableixen de la següentmanera:

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 10mil·lisegons.

3. Ajust el seu Speed a 2, pel que no es mou massa ràpid per a que la marietapuga atrapar-lo.

No es preocupi per les seves propietats X i Y (sempre que no sigui en la part superiorde 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 dedirecció aproximadament una vegada cada 50 mil·lisegons (5 "tics" de Clock1). Unenfocament per permetre aquest comportament seria crear un segon rellotge ambun TimerInterval de 50 mil·lisegons. No obstant això, estaria bé que intentes unatè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 cadavegada que es cridat. Creu el procediment ActualitzaPugó mostrat a la Figura 5-10 iafegir 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 queuna random fraction entre 0 i 1 és generat (per exemple, 0,15). Si aquest nombre ésmenor que 0,20 (que passarà el 20% de les vegades), el pugó canviarà la sevadirecció a un nombre aleatori de graus entre 0 i 360. Si el nombre no és menor que0,20 (que serà el cas que el restant 80% de les vegades), el pugó mantindrà elHeading.

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·lisionsentre els components ImageSprite, el que planteja la pregunta: què ha de succeirquan la marieta i el pugó col·lisionen? És possible que vulgueu aturar i pensar sobreaixò abans de continuar llegint.

Per fer front al que succeeix quan la marieta i el pugó xoquen, crearem unprocediment, 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 elmateix 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 desucceir, com els efectes de so, podeu afegir-los.

Figura 5-11. Afegir el procediment MenjaPugo

Com funcionen els blocs

Cada vegada que es cridat MenjaPugo, afegeix 50 a la variable energia, ajornant lafam per a la marieta. A continuació, propietats Visible i Enabled del pugó s'estableixen false pel que sembla desaparèixer i deixa de moure. Finalment, les coordenades xi y són generades a l'atzar fent una crida a Pugo.MoveTo de manera que, quan tornaa aparèixer el pugó, està en una nova ubicació (en cas contrari, es pot menjar tanbon 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 testapareix.

Figura 5-12. Detectar i actuar sobre les col·lisions entre la marieta i el pugó

Com funcionen els blocs

Quan la marieta xoca amb un altre ImageSprite, Marieta.CollidedWith es cridat, ambel 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ó perconfirmar 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 enl'energia sense que l'usuari sapiera el per què.

Nota. La programació defensiva és la pràctica de l'escriptura de codi de tal maneraque é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 actualmentpoden col·lidir amb el pugó és la marieta, però tenir el control evitarà que el nostreprograma funcioni incorrectament si afegim un altre ImageSprite i us oblideu decanviar la marieta.CollidedWith. Els programadors generalment passen més tempscorregint errors que escrivint nou codi, pel que val la pena prendre una mica detemps 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 esmostra a la Figura 5-13, de manera que canvia la direcció del pugó només si ésvisible. (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

Com funcionen els blocs

ActualitzaPugó s'està tornant bastant complex, així que anem a fer un pasacuradament 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 blocifelse s'executarà. Un nombre aleatori es genera a continuació. Si és menysde 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 10mil·lisegons, i hi ha una possibilitat d'1 a 20 (5%) del pugó es fa visible de nou, elpugó 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 pugonsque s'alimenten, el joc realment té un botó de reinici. Aquesta és una altra raó per laqual és útil dissenyar i construir la teua aplicació en trossos xicotets i desprésprovar, que sovint descobreixes coses que pots haver passat per alt, i és més fàcilper afegir a mesura que avança que tornar i canviar un cop l'aplicació és"completa". Al Dissenyador de components, afegir un component Button sotaEnergiaCanvas, 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üentquan 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 undepredador. En concret, anem a afegir una granota que es mou directament cap a lamarieta. 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 Dissenyadorde Components i afegint 3 ImageSprite granotes a JocCanvas. Indiqueu la propietatPicture de la imatge apropiada, Interval a 10, i Speed a 1, ja que hauria de ser méslents que les altres criatures.La figura 5-15 mostra ActualitzaGranota, un nou procediment d'assignar i cridar desde Clock1.Timer.

Figura 5-15. Fer que la granota es moga cap a la marieta

Com funcionen els blocs

A hores d'ara, has d'estar familiaritzat amb l'ús del bloc random fraction per fer queun esdeveniment ocorrega amb una certa probabilitat. En aquest cas, hi ha unapossibilitat del 10% que la direcció de la granota es canviarà per anar directamentcap a la marieta. Això requereix la trigonometria, però no es preocupis! App Inventorservir un munt de funcions matemàtiques, fins i tot coses com trigonometria. Enaquest cas, vols utilitzar el bloc atan2 (arctangent), que retorna l'angle corresponenta un determinat conjunt de valors de x i y.

(Per a aquells que estiguin familiaritzats amb la trigonometria, la raó i l'argumentperquè atan2 té el signe contrari del que es podria esperar (l'ordre invers delsarguments per restar), és que l'augment de les coordenades en la direcció cap avallsobre un Canvas d'Android, és el contrari del que passaria en un sistema decoordenades 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 lagranota, el nivell d'energia i la barra va a 0 i el joc acaba, com es mostra a la Figura5-16.

Figura 5-16. Fer que la granota es menge a la marieta

Com funcionen els blocs

A més del primer if, que comprova si la marieta va xocar contra el pugó, ara hi ha unsegon if, que comprova si la marieta ha xocat amb la granota. Si la marieta i lagranota 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 elnou 0-1).

3. El procediment que escrivim abans, JocAcabat, està cridat a aturar la marietade 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 dela marieta viva. Ara ha de afegir codi per moure la marieta en directe a un lloc al'atzar. (Penseu en el que passaria si no es mou la marieta al començament d'un noujoc. 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

Com funcionen els blocs

L'única diferència entre aquesta versió de BRestaurar.Click i la versió anterior és elbloc Marieta.MoveTo i els seus arguments. En built-in la funció random integer éscridada dues vegades, una vegada per generar una coordenada x i un cop pergenerar una coordenada y. Si bé no hi ha res que impedeixi que la marieta escol·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 espresenta 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 quanun animal es menjat. Per afegir efectes de so i la retroalimentació tàctil, feu elsegüent:

1. En el Dissenyador de components, afegir un component de so. Estableixi elseu 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'unbloc 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 aSound1.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 jocha acabat. Per evitar-ho, estableix de les seves propietats Enabled en false enJocAcabat i torna a ficar BRestaurar.Click a true.

• Mostrar una puntuació que indica el temps que la marieta s'ha mantingut ambvida. Pots fer això mitjançant la creació d'una etiqueta que s'incrementi enClock1.Timer.

• Fer la barra d'energia més visible mitjançant l'augment de l'alçada deEnergiaCanvas a 2 i traçant dues línies, una a sobre de l'altra, enDibuixaLiniaEnergia. (Aquest és un altre dels beneficis de comptar amb unprocediment en lloc de codi duplicat per esborrar i tornar a dibuixar la líniad'energia: només ha de fer un canvi en un sol lloc per canviar la mida o elcolor, o la ubicació de la línia).

• Afegir un ambient amb una imatge de fons i més efectes de so, com ara sonsde 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çantl'augment de la propietat Speed de la granota o disminuint la seva propietatInterval.

• Tècnicament, la marieta hauria de desaparèixer quan es menjada per lagranota. Canviar el joc de manera que la marieta es converteix en invisible sies 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 unhò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 elsseus propis jocs, que és la meta de molts nous programadors o aspirants! Enconcret, 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 espot utilitzar per controlar el moviment d'un objecte mòbil (o qualsevol altracosa que pugui imaginar).

• un component de rellotge únic pot controlar diversos esdeveniments que esprodueixen en la mateixa freqüència (canvis de direccions en la marieta i enla granota), o diferents freqüències, mitjançant l'ús del bloc random fraction.Per exemple, si vols que succeeixi un esdeveniment aproximadament unaquarta part (25 per cent) de les vegades, el va posar en el cos d'un bloc quenomé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 fetper tenir tant un camp de joc i mostrar gràficament una variable (en lloc de atravé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 enquè té l'aspecte d'un cercle farcit en lloc d'una imatge arbitrària.