MoleMash

Que estàs construin

En el joc MoleMash, un talp apareix en posicions aleatòries en un camp de joc, i el jugador aconsegueix punts golpendo al talp abans que desaparegui. Aquest tutorial mostra com construir MoleMash com un exemple de joc simple que utilitza una animació.

En aquest toturial se suposa que has completat algun dels tutorials HelloPurr amb l’emulador , o HelloPurr amb el telèfon i PaintPot .

Primers passos

Connecta’t al lloc web de App Inventor i comença un nou projecte. Nómbralo MoleMash, i també estableix el Title(títol) de la pantalla a MoleMash. Obre l’Editor de blocs i connecta el telèfon.

També descàrrega aquesta imatge d’un talp i guarda-la al teu ordinador.

Introducció

Dissenyaràs el joc perquè el talp es mogui cada mig segon. Si és tocat la puntuació s’incrementarà en un punt i el telèfon vibrarà. Prement restart posaràs el comptador a zero.

Aquest tutorial introdueix:

• Sprites d’imatge
• Temporitzadors i el component Clock
• Procediments
• Prendre un nombre aleatori entre 0 i 1
• Blocs de text
• Typeblocking (creació de bloc mitjançant el teclat)

Els primers components

Molts components et resultaran familiars de tutorials anteriors:

• Un Canvas (llenç) anomenat MyCanvas. Aquesta és l’àrea on el talp es mourà.
• Una Label (etiqueta) anomenada ScoreLabel que mostra la puntuació, p. ex. el nombre de vegades que el jugador colpeja el talp.
• Un Button (botó) anomenat ResetButton

Arrossega aquests components des de la Paleta al Visor i assigneu els seus noms. Col · loca en MyCanvas dalt i s’ajusta seves dimensions a 300 píxels d’amplada per 300 píxels d’alt. Canvia la propietat Text de ScoreLabel a Score: —. Canvia la propietat Text de ResetButton a Reset. Afegeix també un component Sound i nómbralo Noise. Usaràs Noise per fer que el telèfon vibri quan el talp sigui tocat, de la mateixa manera que vas fer amb el ronc del gat en HelloPurr.

Temporitzadors i el component Clock (rellotge)

Necessitaràs que el talp salti periòdicament, i faràs això amb l’ajuda d’un component Clock.

El component Clock proporciona diverses operacions relacionades amb el temps, com dir-te la data. Aquí, usaràs el component com un temporitzador que es dispari a intervals regulars. L’interval de tret està determinat per la propietat TimerInterval de Clock. Arrossega un component Clock, es col · locarà a l’àrea de components no visibles (non-visible components). Nómbralo MoleTimer. Ajusta la seva TimeInterval a 500 milisegons per fer que el talp es mogui cada mig segon. Assegura’t queEnabled (activat) està marcat.

Afegir un Sprite d’imatge (imatge animada)

Per afegir el talp en moviment utilitzarem un sprite.

Els sprites són imatges que es mouen a la pantalla en un Canvas (llenç). Cada sprite té una velocitat i una direcció, i també un interval que determina la freqüència dels moviments del sprite a la seva velocitat assenyalada. Els sprites també poden detectar quan es toquen. En MoleMash, el talp té una velocitat zero, de manera que no es mou per si mateix. En el seu lloc, vas a configurar la posició del talp cada vegada que s’activi el temporitzador. Arrossega un component ImageSprite al Viewer(visor). Trobaràs aquest component en la categoria Animation de la Paleta. Col · loca dins de l’àrea MyCanvas. Estableix aquestes propietats per al sprite Mole:

• Picture: Usa mole.png, el qual has descarregat a l’inici d’aquest tutorial.
• Enabled: marcat
• Interval: 500
• L’interval no importa aquí, perquè la velocitat del talp és zero: no es mou per si mateix.
• Heading: 0 La direcció no importa aquí tampoc, perquè la velocitat és 0.
• Speed: 0.0
• Visible: activat
• Width: Automatic
• Height: Automàtica

Has de veure les propietats X i Y ja emplenades. Aquestes van ser determinades pel lloc on posaves el sprite quan ho arrossegar a MyCanvas. Arrossega una mica més al talp. Has de veure com canvien X i Y. Has de veure també al talp al telèfon connectat, i moure pel telèfon quan ho arrossega al Designer (dissenyador). Ja has especificat tots els components. El Designer hauria ser així. Fixa’t que Mole està inclòs sota MyCanvas en l’estructura de la llista de components, indicant que el sprite és un sub-component de la tela (canvas).

Comportament de components i controladors d’esdeveniments

Ara anem a especificar el comportament dels components. Això introdueix algunes idees noves de App Inventor. La primera és la idea d’un procediment.

Un procediment és una seqüència d’instruccions a les quals es pot fer referència a totes alhora amb un únic comandament. Si tens una seqüència que cal utilitzar més d’una vegada en un programa, aquesta es pot definir com un procediment, per no haver-la repetir cada vegada que la facis servir. Els procediments en App Inventor poden prendre arguments i retornar valors. Aquest tutorial cobreix només el cas més simple: els procediments que no tenen arguments i no tornen cap valor.

Definir els procediments

Defineix dos procediments:

• MoveMole mou el sprite Mole a una nova posició a l’atzar en el llenç.
• UpdateScore mostra la puntuació, en canviar el text de ScoreLabel

Comença amb MoveMole:

• En l’Editor de blocs, sota Built-In, obre el calaix Definition. Arrossega un bloc te procedure i canvia l’etiqueta procedure a MoveMole.
  

  Nota: Hi ha dos blocs similars: procedure i procedureWithResult. Aquí has d’utilitzar procedure.

  El bloc to MoveMole té una ranura amb l’etiqueta do. Aquí és on has poses les declaracions per al procediment. En aquest cas hi haurà dos estats: un per establir la posició del talp x i un altre per definir la posició i. En cada cas, establiràs la posició a una fracció aleatòria, entre 0 i 1, de la diferència entre la mida del llenç i la mida del talp. Crearàs el valor usant blocs random-fraction i multiplicació i resta. Trobaràs aquests blocs al calaix Math.

• Construeix el procediment MoveMole. La definició completa ha de tenir aquest aspecte:
  

  Deixa buida la ranura arg de MoveMole perquè MoveMole no pren cap argument. Observa com els blocs es connecten entre si: La primera instrucció utilitza el bloc Mole.X gets per definir la posició horitzontal de talp. El valor connectat a la ranura del bloc és el resultat de multiplicar:

  1. el resultat del bloc call random-fraction, el qual té un valor entre 0 i 1
  2. el resultat de restar l’amplada del talp de l’amplada de la tela.

  La posició vertical es manegen de manera similar.

Amb MoveMole fet, el següent pas és definir una variable per a la puntuació anomenada score per mantenir la puntuació, (nombre d’encerts) i donar-li valor inicial 0.També hem de definir un procediment UpdateScore que mostri la puntuació en ScoreLabel. El contingut actual per mostrar en ScoreLabel és el text “Score:” pres del valor de score.

• Per crear la part de l’etiqueta “Score:”, arrossega un bloc text des del calaix Text. Canviar el bloc a “Score:” en lloc de “text”.
• Utilitza un bloc join per unir aquest al bloc que dóna el valor de la variable score. Pots trobar el bloc join al calaix Text.
• Així és com score i UpdateScore han d’aparèixer:

Afegeix un temporitzador

El següent pas és fer el talp mantenir-se en moviment. Aquí és on farem servir MoleTimer. El component Clock té un controlador d’esdeveniments anomenat when … Timer que es dispara repetidament a una velocitat determinada per TimerInterval.

Estableix MoleTimer per trucar a MoveMole cada vegada que s’activi el temporitzador, mitjançant la construcció d’un controlador d’esdeveniments com aquest:

Observa com el talp comença a moure al telèfon tan aviat com es defineix el controlador d’esdeveniments. Aquest és un exemple de com les coses en App Inventor comencen a succeir de forma instantània, tan aviat com es defineixen.

Afegeix un controlador tàctil per el talp

El programa ha d’incrementar la puntuació cada vegada que es toqui el talp. Els sprites, com els llenços, responen als esdeveniments tàctils. Així que crea un controlador d’esdeveniments tàctil per Mole que:

1. Incrementi la puntuació.
2. Truqui a UpdateScore per mostrar la nova puntuació.
3. Fer que el telèfon vibri durant 1/10 de 2 (100 mil · lisegons).
4. Truqui a MoveMole perquè el talp es mogui immediatament, en lloc d’esperar al temporitzador.

Així és com ha d’aparèixer això en blocs. Segueix i acobla els blocs Mole.Touched com es mostren.

Heus aquí un consell: Pots utilitzar typeblocking: per crear ràpidament els blocs.

• Per crear un bloc de valor 100, només has d’escriure 100 i prémer Intro.
• Per crear un bloc MoveMole, només has d’escriure MoveMole seleccionar el bloc que vulguis de la llista

Restablir la puntuació

Un detall final és restablir la puntuació. Això simplement és qüestió de fer que el botó Reset canviï la puntuació a 0 i truqui a UpdateScore.

Programa Complet

Aquí hi ha el programa MoleMash complet:

Variacions

Quan tinguis en funcionament el joc, és possible que desitgis explorar algunes variacions. Per exemple:

• Fer al joc variar la velocitat del talp en resposta al bé que el jugador ho està fent. Per variar la rapidesa dels moviments del talp, hauràs de canviar la propietatInterval de MoleTimer s.
• Portar un registre de quan el jugador colpeja el talp, i quan falla el tir, i mostrar una puntuació amb els encerts i errors. Per fer això, hauràs de definir controladors tàctils per Mole, com fins ara, i per MyCanvas. Una de les qüestions subtils, si el jugador toca el talp, això també compta com un toc per la tela? La resposta és sí. Tots dos esdeveniments es registraran.

Revisió

Aquestes són algunes de les idees incloses en aquest projecte:

• Els sprites són sensibles al tacte i es poden programar per moure en un llenç.
• El component Clock pot ser utilitzat com un temporitzador per fer que ocorrin esdeveniments a intervals regulars.
• Es defineixen els procediments mitjançant els blocs to.
• Per a cada procediment que es defineix, App Inventor crea automàticament un bloc de trucades associat i el col · loca al calaix My Definitions.
• La crida a random-fraction produeix un nombre entre 0 i 1
• Els blocs de text especifiquen, literalment, de la mateixa manera que els blocs de nombres especifiquen nombres literals
• Typeblocking és una manera de crear blocs de forma ràpida, escrivint el nom d’un bloc