TEMA 5 1/20

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.

TEMA 5 2/20

El que aprendràs

Has de d'haver treballat l'aplicació TalpBarrejat al tema 3 abans d'aprofundir en aquest tema, 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 temes anteriors i TalpBarrejat altra banda, aquest tema 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 croar. 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 marietaComponent Paleta Nom assignat Objectiu

Canvas Basic JocCanvas Terreny de joc.

ImageSprite Animation Marieta Controlat per l'usuari jugador.

OrientationSensor Sensors OrientationSensor1 Detectar la inclinació del telèfon per controlar la marieta.

Clock Basic Clock1 Determina quan canviar la capçalera de ImageSprites

ImageSprite Animation Pugo La marieta presa.

ImageSprite Animation Granota La marieta depredadora.

Canvas Basic 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.

TEMA 5 3/20

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 tema 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.

TEMA 5 4/20

Afegir els components

En temes 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.

TEMA 5 5/20

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

TEMA 5 6/20

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 tema 2 PotDePintar). Així és com es fa:

1. En l'Editor de Blocs, a la columna Built-In, obri el calaix Definitions. Arrossega un bloc def variable. Canvieu el text "variable" a "energia".

2. Si hi ha un bloc en el sòcol a la part dreta de def energia, eliminar-lo seleccionant i prement la tecla Supr o arrossegant-lo a la paperera.

3. 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 def energia, com es mostra a la Figura 5-4.

Figura 5-4. Inicialització de la variable d'energia a 200

La figura 5-5 mostra com creant la variable també s'afegixen blocs al calaix My Definitions per establir o obtenir el valor de l'energia.

Figura 5-5. Veure el calaix del My Definitions mostra els nous blocs de variable global energia i set global energia

TEMA 5 7/20

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 Definition i arrossegar un bloc to procedure.2. Feu clic en el seu nom (probablement "procedure1") i canviar-ho a "DibuixaLiniaEnergia".3. Tornar al calaix Definition i arrossegar un bloc name, col·locant al sòcol el arg (abreviatura d'argument). Feu clic en el seu nom i canviar a "color".4. Repetiu el pas 3 per afegir un segon argument i el nom "longitud".5. Ompli la resta del procediment, com es mostra a la Figura 5-6. Pots trobar els nous blocs de color i detall en el calaix My Definitions.

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.

TEMA 5 8/20

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.

TEMA 5 9/20

Fam

A diferència de les aplicacions en els temes 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

TEMA 5 10/20

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.

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.

TEMA 5 11/20

Figura 5-10. Afegir el procediment ActualitzaPugo

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.

TEMA 5 12/20

Figura 5-11. Afegir el procediment MenjaPugo

Com funcionen els blocs

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).

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ó

Com funcionen els blocs

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.

TEMA 5 13/20

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

Com funcionen els blocs

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.

TEMA 5 14/20

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.

TEMA 5 15/20

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

Com funcionen els blocs

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)

TEMA 5 16/20

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

Com funcionen els blocs

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.

TEMA 5 17/20

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

Com funcionen els blocs

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.

TEMA 5 18/20

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.

TEMA 5 19/20

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.

TEMA 5 20/20

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.