MoleMash 2

Que estàs construint

Aquest tutorial et mostra com construir in joc similar al arcade Whac-A-MoleTM. Específicament, el teu objectiu és arribar a un talp que apareix aleatòriament en un de cinc forats fixats. Cada vegada que ho aconsegueixis, la teva puntuació s’incrementarà en un punt.

Per tal de posar de relleu les noves funcions de App Inventor-la fitxa opcions Avançades i les capes Z per als Sprites-aquesta aplicació té un enfocament diferent al tutorial original de Mole Mash , el qual no és necessari haver realitzat amb la finalitat de fer aquest. Has, de tota manera, estar familiaritzat amb els fonaments de App Inventor – l’ús del Dissenyador de components per construir una interfície d’usuari i ús de l’Editor de blocs per especificar controladors d’esdeveniments.

Introducció

Aquest tutorial inclou:

1. Creació d’una llista dels components
2. L’ús de la funcionalitat de la secció Avançat de l’Editor de blocs per obtenir i establir propietats arbitràries per als components
3. Tenir esdeveniments del joc controlats pel component Clock
4. L’ús de capes en Z per assegurar que un sprite (ImageSprite o una Ball) apareix per davant d’un altre

Primers passos

Connecta’t a la pàgina web de App Inventor i comença un nou projecte. Estableix la propietat del títol de la pantalla Title a nom apropiat, com “Mole Mash”. Obre l’Editor de blocs i conéctalo al telèfon. Descàrrega aquests arxius d’imatge (creats per Yun Miao) fent clic dret sobre ells, i després afegeix-los al projecte prement el botó “Afegeix …” en el panell de mitjans.

hole.png	mole.png

Configuració dels components

La interfície d’usuari contindrà un total de 6 ImageSprites: 5 forats immòbils i 1 talp, que es mourà a la part superior dels forats. Utilitza el dissenyador de components per crear la interfície d’usuari. Quan hagis acabat, ha de ser semblant a la imatge de sota. No et preocupis per alinear els forats de manera uniforme. Hauràs especificar la seva localització a través de les seves propietats X i Y. Les instruccions addicionals estan per sota de la imatge.

Crea els següents components arrossegant des de la paleta al visor.

Tipus de component	Grup de la Paleta	Com ho nombrarás	Objectiu del component
Canvas	Basic	GameCanvas	El camp de joc
ImageSprite (5)	Animation	Hole1, …, Hole5	Forats per aparèixer el talp
ImageSprite	Animation	Mole	El talp
HorizontalArrangement	ScreenArrangement	ScoreArrangement	Per veure la puntuació
Label	Basic	ScoreTextLabel	Per mantenir “Puntuació:”
Label	Basic	ScoreValueLabel	Per mantenir la puntuació (nombre de vegades que s’assoleix al talp)
Clock	Basic	MoleClock	Per controlar el moviment del talp
Sound	Mitjana	Buzzer	Perquè vibri quan es toca el talp

Fes els següents canvis en les propietats dels components:

Component	Acció
Canvas1	Canvia BackgroundColor a Verd. Canvia Width a 320 píxels. Canvia Height a 320 píxels.
Hole1	Canvia X a 20 i Y a 60 (a dalt esquerra).
Hole2	Canvia X a 130 i Y a 60 (dalt centre).
Hole3	Canvia X a 240 i Y a 60 (a dalt dreta)
Hole4	Canvia X a 75 i Y a 140 (baix esquerra).
Hole5	Canvia X a 185 i Y a 140 (baix dreta).
Mole	Canvia Picture a “mole.png”. Canvia Z a 2 perquè el talp aparegui per davant dels altres ImageSprites, que per defecte tenen valor 1 per Z.
ScoreTextLabel	Canvia Text a “Score:”.
ScoreTextValue	Canvia Text a “0”.

No hi fa la configuració de la propietat de Picture per als forats; anem a establir la propietat en l’Editor de blocs.

Afegir comportaments als components

Heus aquí un resum del que necessitem crear amb els blocs:

1. Crear variables:
   1. holes: una llista dels forats
   2. currentHole: el forat del qual el talp està sortint
2. Quan l’aplicació s’inicia:
   1. Completar la llista dels forats.
   2. Establir la propietat Picture de cada forat a “hole.png”.
   3. Trucar al procediment MoveMole (baix).
3. Crear un procediment per MoveMove per:
   1. Establir currentHole a un forat a l’atzar de la llista holes.
   2. Moure el talp a la ubicació de currentHole.
4. Fer que MoleClock truqui a MoveMole cada vegada que el temporitzador es dispari (cada segon).
5. Implementar un controlador que fa el següent quan el talp es toca:
   1. Afegeix un a la puntuació.
   2. Fer que el telèfon vibri.
   3. Trucar a MoveMole.

Per continuar, obre l’Editor de blocs.

Creació de variables

Crea les variables holes i currentHole. Per ara, els donarem “falsos” valors inicials, anem a establir els seus valors inicials reals al controlador d’esdevenimentsScreen1.Initialize, que s’executa quan l’aplicació s’inicia. (Per raons tècniques, els components no pot ser referits als blocs def, que s’executen abans que l’aplicació s’iniciï) Aquí hi ha una imatge i la llista dels blocs que es necessiten:

.

Tipus de bloc	Calaix	Propòsit
def variable es (holes)	Definition	Mantenir una llista dels forats.
make a list	Lists	Crear una llista buida, que s’omple quan s’inicia el programa.
def variable es (currentHole)	Definition	Mantenir el forat actual del talp.
number (0)	Numbers	Proporcionar un valor inicial requerit per currentHole.

Com sempre, els comentaris (crear blocs amb el botó dret del ratolí) es recomana però no és obligatori.

Iniciant l’aplicació

El primer esdeveniment es produeix en qualsevol programa en Screen1.Initialize, pel que posarem el codi d’inici a aquest controlador. En concret, anem a afegir els components dels forats a la llista holes, establirem la propietat Picture de cada forat a la imatge “hole.png”, i anomenarem a MoveMole. Com que encara no hem escritMoveMole, crearem un procediment buit amb aquest nom, que anem a omplir més tard.

A continuació hi ha una imatge i la taula dels elements que necessites crear. Tingues en compte que el calaix “Any ImageSprite” (Qualsevol ImageSprite) es troba sota la pestanya “Advanced” a la dreta de “Built-In” i “My Blocks” en l’Editor de blocs.

Tipus de bloc	Calaix	Propòsit
Screen1.Initialize	Screen1	Especifiqueu ha de passar quan l’aplicació s’inicia.
add items to list	Lists	Afegeix els valors a …
holes	My Definitions	… La llista de forats:
component Hole1	Hole1	• Forat de la part superior esquerra
component Hole2	Hole2	• El forat central superior
component Hole3	Hole3	• L’orifici superior dret
component Hole4	Hole4	• L’orifici inferior esquerre
component Hole5	Hole5	• L’orifici inferior dret
foreach	Control	Especificar que ens agradaria …
name (hole)	Definitions	… Una variable anomenada “hole” …
holes	My Definitions	… A prendre en cada un dels valors de la llista holes.
ImageSprite.Picture	Any Image Sprite	Establir la propietat Picture de …
value hole	My Definitions	… El ImageSprite que fa referència a la variable hole …
text (hole.png)	Text	… A la imatge del forat buit.
to procedure (MoveMole)	Definition	Crear un procediment, que han de completar més tard, per moure el talp.
MoveMole	My Definitions	Trucar a MoveMole per a la primera col · locació del talp.

Compara el bloc foreach amb els blocs equivalents que serien necessaris sense ell:

Nou	Vell

No només el conjunt de blocs l’esquerra és més curt, és menys repetitiu, evitant que el programador sigui semi-inconscient en copiar i enganxar, i és més fàcil de modificar, per exemple, si el nom de la imatge ha canviat.

Movent el Talp

Ara anem a omplir el cos del procediment MoveMole, que anomenarem quan s’inicia el programa, quan es toca el talp, i quan el nostre comptador de temps es dispari cada segon. El que volem fer és escollir a l’atzar un forat i posar al talp sobre. Aquí hi ha una imatge i la llista dels nous blocs:

Tipus de bloc	Calaix	Propòsit
setembre currentHole to	My Definitions	Guardar el …
call pick random item	Lists	… Seleccionat a l’atzar …
holes	My Definition	… Forat.
call Mole.MoveTo	Mole	Mou el talp a la …
ImageSprite.X	Advanced / ImageSprite	.. Coordenada x de …
currentHole	My Definitions	… El forat escollit …
ImageSprite.Y	Advanced / ImageSprite	… I la coordenada i de …
current Hole	My Definitions	… El forat escollit.

Ara hem de especificar que MoveMole ha de ser cridat cada vegada que el temporitzador MoleClock Timer es dispari. Només necessitem dos blocs per fer-ho:

Tipus de bloc	Calaix	Propòsit
MoleClock.Timer	MoleClock	Quan el temporitzador acaba …
call MoveMole	My Definitions	… Mou el talp.

Registre de tocs

Finalment, hem de especificar el que passa quan el talp es toca. En concret, volem:

1. Incrementar la puntuació.
2. Fer que el telèfon vibri breument.
3. Moure el talp.

És fàcil traduir aquests als blocs:

Mole.Touched	Mole	Quan el talp es toca …
setembre ScoreValueLabel.Text to	ScoreValueLabel	… Actualitza la puntuació visible a …
+	Math	… El resultat de sumar …
number (1)	Math	… 1 [i] …
ScoreValueLabel.Text	ScoreValueLabel	… La puntuació anterior.
call Buzzer.Vibrate	Buzzer	Fa que el telèfon vibri …
number (100)	Math	… 100 mil · lisegons.
call MoveMole	My Definitions	Mou el talp a una nova ubicació.

Programa Final

Variacions

Aquestes són algunes de les variacions és possible que vulguis posar en pràctica:

• Afegir un botó de reinici per establir la puntuació a 0.
• Fer la puntuació dependent no només de la quantitat d’encerts, sinó també del nombre de fallades i que el talp va escapar.
• Augmentar la velocitat del moviment del talp en el joc, si el jugador ho està fent bé i disminuir-si el jugador ho està fent malament.
• Afegir un segon talp amb un temporitzador diferent.

Pots veure la manera d’aplicar les dues primeres variacions en el tutorial original de Mole Mash .

Revisió

Aquestes són algunes de les idees que es tracten en aquest tutorial:

• La col · locació de components en una llista List.
• Realitzar una operació a cada component en List (una llista) utilitzant el bloc foreach i característiques avançades.
• Col · locar un ImageSprite sobre d’un altre, utilitzant la seva propietat Z per controlar que va davant.
• L’ús del component Clock (rellotge) per controlar el joc.
• Creació d’un procediment i cridar des de múltiples llocs.

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