Tutorial MoleMash Aquesta pràctica consistirà en crear un joc interactiu mitjançant l’APP Inventor, una pàgina web creada per els membres de la universitat de massachusetts que ens permet crear diferents tipus d’apps d’una manera simple. El joc constarà d’un talp que es mourà de manera constant, l’objectiu serà arribar a tocar el talp, al tocar-lo, tindrem un comptador que contarà els punts i un botó per retornar el resultat a zero. Pàgina d’app inventor: http://ai2.appinventor.mit.edu Imatge del talp: http://beta.appinventor.mit.edu/learn/tutorials/molemash/MoleMashAss ets/mole.png
1. Primer de tot haurem de crear un nou projecte i anomenar-lo MoleMash
2. Segon ens situarem a la secció de disseny i d’aparença de l’app.
3. Insertarem un Canvas i dins d’aquest, un ImageSprit cosa que donarà moviment a la imatge seleccionada.
4 Al Canvas li ficarem les següents mides: 300X300.
4. En l’ImageSprite on posa Picture, insertarem la imatge del talp descarregada la qual es mourà a l’hora de jugar el joc.
Resultat d’aquest procés:
En la llista de components, és recomanable posar noms als diferents elements perquè quan tinguem que dissenyar el funcionament de l’app, ens serà més fàcil. 5 Insertarem un Horizontal Arrangement sota del Canvas.
6 A dins d’aquest horizontal arrangement inclourem un label on escriurem Score:
Resultat:
6. Un cop fet els passos anteriors, afegirem un botó sota el resultat anomenat Reset , que servirà per retornar el comptador a zero.
7. Afegirem dos elements que no estaran visibles en la pantalla: un rellotge amb un interval de 500 milisegons que l’anomenarem mole_timer i un àudio també amb un interval de 500 milisegons que farà que el mòbil vibri al tocar el talp.
Resultat final:
Amb això haurem acabat de dissenyar l’aspecte de l’app i podrem passar a dissenyar el funcionament.
Per fer que l’app funcioni tindrem que seguir una sèrie de passos per tal d’assolir el nostre objectiu. Tindrem que anar a l’apartat dels Blocks:
Si seguim els passos següents d’una manera correcta obtindrem aquest resultat:
El primer bloc que tindrem que formar serà aquest:
Aquest donarà donarà un moviment de posició indeterminada al talp 1.
Començarem anant cap a Built it/ Procedures i escollirem to procedures do i li canviarem el text a MoveMole.
2.
Anirem a Mole/ Set Mole to X i Set Mole to Y i els insertarem dins del MoveMole.
3.
Anirem Built-in/ Math i seleccionarem la peça matemàtica de la multiplicació:
4.
Aquesta peça la duplicarem i les unirem a Set mole to X i a Set mole to Y
5.
Un cop fet lo anterior, insertarem les següents peces dins de la peça matemàtica de sumar:
6.
Dins d’aquesta peça: X. Insertarem les següents: i
conectada amb la peça Set Mole to
7.
Dins d’aquesta peça: conectada amb la peça Set Mole to Y. Insertarem les mateixes peces però en comptes de Width, ho canviarem a Height.
El següent bloc que formarem serà :
Ens permetrà inicialitzar el joc amb un comptador partint del zero. 1 Anirem a Built-in/Variables/ initialize global name to:
1.
A initialize global name to, en comptes de name, canviarem el text a score.
2.
Després de formar aquesta peça la unirem amb una peça matemàtica de número:
El pròxim bloc que formarem serà aquest:
Ens permetrà fer actualitzar el comptador cada cop que toquem el talp. 1. Anirem
a Built-in/ Procedures/ Do to procedure
2.Dins
d’aquesta
peça
insertarem
la
peça
que es troba anant a : Screen 1/Horrizontal Arrengement1/ Score
2.
Unirem una altre peça amb la peça verda anterior. La trobarem anant a Built-in/Text/ Join.
3.
Amb la peça anterior:
, la connectarem amb aquesta
peça:
Anant a Built-in/ Text/ i dins de la peça escriurem ‘’Score’’. 4 També unirem la següent peça: principal
amb la peça rosa
:
Anant a Built-in/ Variables/ Get i seleccionarem, escriurem Global Score.
Un cop format l’anterior bloc continuarem amb la formació d’aquest:
Sense aquest bloc, el talp no es mouria de forma automàtica.
1.
Anirem a Screen 1/ Mole_Timer/ When_mole timer. Timer
2.
Dins
de
la
peça
anterior
insertarem
una
peça:
que la trobarem anant a Built-in/ Procedures/call Movemole.
A contínuament d’aquest bloc, anirem a formar un altre bloc:
Gràcies a aquest, un cop tocat el talp, fa vibrar el mòbil i li suma un punt més al comptador.
1.
Ens dirigirem a Screen 1/My Canvas/ Mole/ When Mole Touched.
2.
Dins d’aquesta peça:
insertarem
d’altres, la primera que insertarem , la trobarem a Built-in/ Variables/ set_to. I canviarem el text d’aquesta peça a global score.
3.
Amb la peça taronja connectada anterior, la unirem amb una peça matemàtica de sumar in/Math
4.
. Es troba a Built-
Dins d’aquesta peça blava insertarem dues peces:
La primera la trobarem a Built-in/Variables / get I modificarem el text d’aquesta a global score.
i
5.
L’altre peça que insertarem a When mole is touched es troba anant a Screen 1/ Sound 1:
6.
Aquesta peça que farà vibrar el mòbil quan toquem el talp la connectarem amb la següent peça matemàtica:
7.
El número de la peça recent col·locada, li canviarem el número de 0 a 100.
8.
Finalment per acabar de formar aquest bloc, insertarem la les peces:
i
a la peça principal :
El següent i últim bloc que formarem serà el següent, aquest, tornarà a posar el comptador a 0 al prémer el botó Reset :
Fa possible retornar el resultat del comptador a zero un cop premsat el bot贸 Reset.
1.
Primer de tot seleccionarem aquesta pe莽a :
La trobarem a Screen 1/ HorrizontalArrangement1/ Reset/ When Reset click...
+
2.
Dins d’aquesta peça inclourem
anant a
Build-in/ Procedures/ Call UpdateScore i que la trobarem a Build-in/Variables/ Set to.
3.
I finalment, en aquesta peça aquesta peça matemàtica que es mantingui a zero.
, li afegirem sense canviar-li el número,
Això serà el final d’aquest tutorial, espero que us hagi servit de gran ajuda i que hagueu pogut aconseguir la creació de l’app.