appinventor cap5 final
Post on 06-Jan-2016
42 Views
Preview:
TRANSCRIPT
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 1/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
Manejo de Sprites
¿ Qué aprenderé ?.................................................................................................................................2
Diseñar los componentes......................................................................................................................2
Empeamos...........................................................................................................................................!
De"inir el comportamiento de los componentes..............................................................................#
Dotar de mo$imiento a la mari%uita............................................................................................#
&'(E)A****.........................................................................................................................................+
,ostrar el ni$el de energía..........................................................................................................+
Di-uar la -arra de energía........................................................................................................../0nanici1n......................................................................................................................................
&'(E)A****.........................................................................................................................................3
Añadir una pulga.........................................................................................................................3
&'(E)A****.......................................................................................................................................42
&'(E)A****.......................................................................................................................................4!
&'(E)A****.......................................................................................................................................4#
(n ltimo detalle...........................................................................................................................4+
&'(E)A****.......................................................................................................................................4+
&'(E)A****.......................................................................................................................................4/
6ariaciones.........................................................................................................................................4
En este capítulo $eremos un uego %ue tiene por protagonistas a una mari%uita7 una pulga 8
una rana. Con la aplicaci1n Ladybug Chase el usuario podr9:
• Controlar el mo$imiento de una mari%uita inclinando el telé"ono.
• Compro-ar su ni$el de energía gracias a una -arra %ue ir9 reduciendo su tamaño con el paso
del tiempo o -ien aumentando el ni$el cuando la mari%uita coma.
• Dirigir la mari%uita para %ue se coma a la pulga 8 recupere energía.
• E$itar %ue la rana se coma la mari%uita.
6icente Destruels ,oreno &9gina 4
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 2/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
¿ Qué aprenderé ?
Antes de empear la aplicaci1n7 de-es de re$isar todo el material %ue se $i1 durante el
desarrollo de “Dale Fuerte” en el capítulo !. Adem9s7 este capítulo 5 te enseñar9 a:
• (tiliar $arios componentes ImageSprite para detectar c;o%ues entre ellos.
• Emplear el componente OrientationSensor para detectar el grado de inclinaci1n del
telé"ono 8 recurrir a él para controlar un ImageSprite.
• Cam-iar la imagen %ue muestra un ImageSprite.
• (tiliar el componente Cloc para controlar $arios e$entos.
• Emplear variables para registrar nmeros <como el ni$el de energía de la mari%uita=.
• Crear 8 utiliar procedimientos con par!metros.
• 'ecurrir al -lo%ue and.
Diseñar los componentes
Esta aplicaci1n tiene un componente Canvas %ue se utiliar9 como ta-lero de uego. En él
;a-r9 tres ImageSprite: uno para la mari"uita7 otro para la pulga 8 un ltimo para la rana.
>am-ién emplearemos un componente Sound para el croar de este animal. 'ecurriremos a
OrientationSensor para medir el grado de inclinaci1n del telé"ono 8 mo$er la mari%uita en
consecuencia.
El componente Cloc lo usaremos para modi"icar la direcci1n del mo$imiento de la pulga.
a-r9 un segundo Canvas %ue mostrar9 el nivel de energ#a de nuestra protagonista. &or ltimo7 un
-ot1n $einiciar permitir9 reiniciar el uego cuando la mari%uita muera de ;am-re o sea de$orada
por la rana.
6icente Destruels ,oreno &9gina 2
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 3/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
@a siguiente ta-la contiene todos los componentes %ue emplearemos:
%ipo de
componente
&rupo de
'alette
C(mo lo
llamaremos
Finalidad
Canvas Basic ieldCan$as >a-lero de uego.
ImageSprite Animation ,ari%uita &ersonae controlado por el usuario.
OrientationSensor Sensors Brientationensor4 Detecta la inclinaci1n del telé"ono 8
controla el mo$imiento de la mari%uita.
Clock Basic Cloc4 Determina cu9ndo de-e modi"icar la
posici1n de 0mageprite.
ImageSprite Animation &ulga @a presa de la mari%uita. ImageSprite Animation 'ana El depredador de la mari%uita.
Canvas Basic Energ8Can$as ,uestra el ni$el de energía de la mari%uita.
Button Basic 'estart)utton 'einicia el uego.
Sound )edia ound4 Cuando la rana se come a la mari%uita7
;ace %ue creo.
Empezamos
Conéctate a AppInventor e inicia un nue$o pro8ecto llamado LadyBugChase 8 cam-ia el
teto de la -arra de título por LadyBug Chase. A-re Blocs *ditor 8 agrega todas las im9genes del
capítulo suministradas 8 el arc;i$o de sonido al panel desde )edia <,ultimedia=.
i las prue-as las $as a realiar en el telé"ono7 de-er9s desacti$ar la rotaci1n autom9tica de
la pantalla. En la ma8oría de los aparatos7 esta opci1n estar9 en A+ustes,- 'antalla.
6icente Destruels ,oreno &9gina !
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 4/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
Definir el comportamiento de los componentes
Dotar de movimiento a la mariquita
&ara mo$er a nuestra mari%uita de-eremos inclinar el telé"ono. 6amos a crear a la mari%uita
8 el sistema %ue controlar9 su mo$imiento.
• Añade un elemento Canvas7 %ue ser9 nuestro ta-lero de uego. Cam-ia el nom-re a
FieldCanvas. @a propiedad .idth ponla a Fill parent 8 /eight a 011 p#2els.
•
Coloca un elemento ImageSprite desde la secci1n Animation7 dentro de Canvas. Cam-iael nom-re a )ari"uita 8 modi"ica su aspecto incorporando la imagen de la mari%uita $i$a
dentro de la propiedad 'icture <imagen=.
• El $alor de la propiedad Interval ser9 31 milisegundos. Determinar9 la "recuencia con la
%ue se mo$er9 el elemento 0mageprite.
• @a propiedad /eading indica la direcci1n ;acia donde se mo$er9. 6iene de"inida en grados.
&or eemplo7 si tiene el $alor F se dirigir9 a la derec;a el $alor 3F indicar9 %ue se desplaar9
;acia arri-a 4F a la i%uierda7 etc. De momento7 no la modi"icamos.
• @a propiedad Speed determina el nmero de píels %ue de-er9 recorrer 0mageprite cada
$e %ue se cumpla el tiempo determinado por 0nter$al. @a con"iguraremos despes.
El encargado de controlar el mo$imiento de la mari%uita ser9 OrientationSensor7 %ue
detectar9 el grado de inclinaci1n del telé"ono. (tiliaremos el componente Cloc para compro-ar la
orientaci1n del aparato cada 10 ms. >am-ién eaminaremos si ;a ;a-ido algn cam-io en la
direcci1n de la mari%uita < Heading =. Con"iguraremos estos comportamientos desde Blocs *ditor:
• Agrega un componente OrientationSensor7 desde Sensors7%ue aparecer9 en la secci1n
4on,5isible,components.
6icente Destruels ,oreno &9gina #
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 5/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
• Añade un elemento Cloc 7 desde Basic7 %ue tam-ién estar9 en la secci1n 4on,5isible,
components 87 con"igura su propiedad %imerInterval a 4F ms.
A;ora asignaremos comportamientos a los componentes %ue aca-amos de agregar.
6amos a Blocs *ditor a crear los procedimientos 6pdate)ari"uita 8 Cloc7%imer
como muestra la "igura de a-ao:
'ecuerda %ue para escri-ir un procedimiento de-erías ir a :
En $e de arrastrar los -lo%ues de los caones7 prue-a a escri-ir directamente so-re el 9rea
de tra-ao sus nom-res <como por eemplo7 Cloc37%imer=. &ara añadir comentarios ;a clic con el
-ot1n derec;o del rat1n 8 selecciona la opci1n Add Comment <agregar comentario=. >ermina los
-lo%ues tal %ue:
El procedimiento 6pdate)ari"uita usar9 dos de las propiedades de OrientationSensor:
• Angle: 0ndica la direcci1n en la %ue se inclina el telé"ono <medida en grados=.
• )agnitude: 0ndica la cantidad de inclinaci1n %ue se aplica al telé"ono. u $alor $a desde F
6icente Destruels ,oreno &9gina 5
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 6/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
<cuando no se asigna ninguna= ;asta 4 <inclinaci1n m9ima=.
Al multiplicar )agnitude por 4FF7 estaremos diciéndole a la mari%uita %ue de-e mo$erse
entre F 8 4FF píels en la direcci1n %ue especi"i%ue la propiedad /eading. Esta operaci1n tendr9
lugar siempre %ue se agote el tiempo de"inido por %imerInterval7 %ue ser9 de 4F milisegundos.
Guarda primero el pro8ecto con el nom-re LadybugChase7 se generar9 el "ic;ero
“LadyBugChase7ap” %ue es el %ue de-es copiar a tu telé"ono. i $es %ue el mo$imiento de la
mari%uita es lento7 aumenta su $elocidad. i se desplaa demasiado r9pido7 redcela.
PRUEBA!!!!
Mostrar el nivel de energía
(tiliaremos una barra de color ro+o para mostrar el ni$el de energía de la mari%uita.
>endr9 un píel de alto 8 su anc;o indicar9 el ni$el de energía7 %ue ir9 desde 2FF <-arra de energía
llena= ;asta cero <muere la mari%uita=.
Desde Component Designer7 generaremos un nue$o elemento Canvas7 %ue colocaremos
de-ao de FieldCanvas 8 -autiaremos como *nergyCanvas. A su propiedad .idth le
asignaremos el $alor Fill parent 8 en la propiedad /eight le asignaremos el $alor de 4 píel.
6amos a crear una $aria-le llamada energy desde Blocs *ditor. A%uí crearemos una
$aria-le para la energía %ue tendr9 un valor inicial de 811 8 %ue guardar9 in"ormaci1n so-re el
ni$el de energía de la ,ari%uita:
• A-re el ca1n De9inition del Built,In de )locs Editor. Arrastra ;asta el 9rea de tra-ao un
-lo%ue para de"inir una $aria-le. 'enom-ra el teto variable por energy.
• i ;u-iese un -lo%ue en la ranura %ue est9 a la derec;a de energy7 elimínalo.
• Desde ,at; arrastra el -lo%ue number ;asta el 9rea
de tra-ao7 col1calo en la ranura de la parte derec;a
6icente Destruels ,oreno &9gina +
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 7/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
del -lo%ue de de"inici1n de la $aria-le energy. &on el $alor 811 como inicial para la
$aria-le.
Dibujar la barra de energía
,ostraremos el ni$el de energía a tra$és de una -arra roa. &ara generar el procedimiento
Dibu+a*nergia realiaremos lo siguiente:
4. Desde el ca1n De9inition arrastra un -lo%ue to procedure al 9rea de tra-ao.
2. Cam-ia el nom-re 8 ll9malo Dibu+a*nergia.
!. Desde el ca1n De9inition arrastra un -lo%ue name ;asta el 9rea de tra-ao. Col1calo en la
ranura arg de Dibu+a*nergia. a clic so-re él 8 cam-ia su nom-re por color.
#. 'epite el tercer paso para añadir un segundo argumento al -lo%ue Dibu+a*nergia. Esta $e
cam-ias el nom-re por longitud.
5. Completa el resto del procedimiento para %ue %uede como en la "igura siguiente:
A;ora crearemos un segundo
procedimiento llamado
)uestra4ivel*nergia 8 %ue se
encargar9 de llamar dos $eces a
Dibu+a*nergia. Con la primera
6icente Destruels ,oreno &9gina /
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 8/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
in$ocaci1n -orrar9 la línea %ue mostra-a el ltimo estado de energía conocido <di-uar9 encima de
ella otra -lanca= 8 con la segunda enseñar9 en la pantalla la línea correspondiente al nue$o estado
de energía7 como en la siguiente "igura:
Inanición
A di"erencia de lo %ue ocurría con las aplicaciones de los capítulos anteriores7 este uego
puede terminarse. Cuando la mari%uita no consiga comer las su"icientes pulgas o sea de$orada por
la rana7 el uego "inaliar9. En cual%uiera de los casos7 detendremos el mo$imiento de la
protagonista <asignaremos el $alor 9alse a )ari"uita7*nabled= 8 cam-iaremos su "oto por una en
la %ue aparece muerta. Esto ltimo lo conseguiremos escri-iendo el nom-re de la nue$a imagen
dentro de )ari"uita7'icture. 6amos a crear el procedimiento Fin como en la "igura:
A continuaci1n7 $amos a añadir tres -lo%ues de c1digo al procedimiento 8a creado
6pdate)ari"uita. Como recordar9s7 Cloc7%imer lo llama-a cada 4F milisegundos. @a "inalidad
de estos tres nue$os c1digos es la siguiente:
• 'educir el ni$el de energía.
• ,ostrar el nue$o ni$el en la pantalla.
• inaliar el uego si el ni$el de energía es F.
6icente Destruels ,oreno &9gina
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 9/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
Guarda primero el pro8ecto con el nom-re LadybugChase87 se generar9 el "ic;ero
“LadyBugChase87ap “%ue es el %ue de-es copiar a tu telé"ono.
6eri"ica si el ni$el de energía $aría con el paso del tiempo. Agota el ni$el de energía para $er
si la mari%uita se muere.
PRUEBA!!!!
Añadir una pulga
El siguiente paso ser9 añadir una pulga. El insecto de-er9 re$olotear por FieldCanvas. i la
mari%uita c;oca con ella7 es decir7 si se la come7 su ni$el de energía de-er9 aumentar 8 la pulga
desaparecer de la pantalla. Al poco tiempo7 la aplicaci1n $ol$er9 a colocar otra en el ta-lero de
uego. Aun%ue para nosotros ésta sea el mismo componente ImageSprite7 para el usuario ser9 un
insecto di"erente.
El primer paso para añadir la pulga al uego es $ol$er a Component Designer para crear
otro elemento ImageSprite. Asegrate de no colocarlo encima de la mari%uita. Cam-ia su nom-re
predeterminado por 'ulga 8 con"igura sus propiedades:
4. A-re la imagen de la pulga HAphid7png” en la propiedad 'icture.
2. Asigna el $alor 4F a Interval para %ue se mue$a cada 4F milisegundos como la mari%uita.
!. Asigna el $alor 2 a Speed para %ue no se mue$a demasiado r9pido 8 permita %ue la
mari%uita pueda cogerla. Io te preocupes por las propiedades X,Y o Heading por%ue las
con"iguraremos desde Blocs *ditor m9s tarde.
)as9ndonos en las prue-as %ue ;emos realiado al uego7 ;emos $isto %ue es con$eniente
%ue la pulga cambie de direcci(n aproimadamente una $e cada 5F milisegundos <cada 5 ciclos
completos de Cloc4=. (na "orma de conseguirlo sería creando un segundo relo %ue tu$iese un
inter$alo <%imerInterval= de :1 milisegundos. &ero ;emos pre"erido utiliar una técnica distinta
para %ue aprendas a usar el -lo%ue random 9raction %ue7 cuando se in$oca7 de$uel$e un nmero
6icente Destruels ,oreno &9gina 3
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 10/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
aleatorio mayor o igual ue 0 y menor ue 1. Crea el procedimiento 6pdate'ulga 8 luego ;a %ue
Cloc37%imer lo in$o%ue como en la "igura %ue tienes m9s a-ao.
Cada $e %ue se agota el tiempo <4FF $eces por segundo=7 se llama a 6pdate)ari"uita
<igual %ue ocurría antes= 8 a 6pdate'ulga. @o primero %ue ;ace 6pdate'ulga es generar una
"racci1n aleatoria comprendida entre F 8 4<por eemplo7 F745=. si este nmero es menor %ue F72F
<algo %ue pasar9 el 2F por cien de las $eces=7 la direcci1n de la pulga cam-iar9 a una cantidad
aleatoria de grados comprendida entre F 8 !+F. i la ci"ra es ma8or de F72F <algo %ue ocurrir9 el F
por cien de las $eces=7 la pulga continuar9 su tra8ectoria.
El siguiente paso ser9 conseguir %ue la mari%uita se coma a la pulga cuando impacte con ella
<procedimiento nue$o llamado Come'ulga=. A"ortunadamente7 AppInventor cuenta con -lo%ues
para detectar las colisiones entre componentes ImageSprite. ¿Qué ocurrir9 cuando la mari%uita
c;o%ue con la pulga?
• Aumentar9 el ni$el de energía 5F puntos.
• @a pulga desaparecer9 de pantalla <de-eremos asignar el $alor 9alse a su propiedad 5isible=.
6icente Destruels ,oreno &9gina 4F
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 11/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
• @a pulga dear9 de mo$erse <asignaremos 9alse a su propiedad *nabled=.
• @a pulga se mo$er9 ;asta una u-icaci1n aleatoria de la pantalla. A%uí7 seguiremos el mismo
modelo de c1digo %ue $imos con DaleFuerte
• i consideras oportuno añade un sonido cuando se coma <; habla con tu pro9esor=.
Cada $e %ue se llame al procedimiento Come'ulga7 se suma :1 a la $aria-le energy.
@uego7 se asigna el $alor 9alse a las propiedades 5isible 8 *nabled para %ue la pulga desapareca
de la pantalla 8 detenga su mo$imiento. inalmente7 se generan unas coordenadas < e = aleatorias 8
se le entregan al procedimiento 'ulga7)ove%o. De esta "orma7 conseguimos %ue el insecto
reapareca en una nue$a u-icaci1n7 e$itando %ue la ,ari%uita se lo $uel$a a comer de inmediato.
El c1digo %ue de-es generar <sin sonido= es el siguiente:
&ara detectar la colisi1nJc;o%ue entre la mari%uita 8 la pulga ;emos de añadir el siguiente
c1digo:
6icente Destruels ,oreno &9gina 44
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 12/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
El anterior c1digo tiene la siguiente eplicaci1n:
Cuando la mari%uita c;oca con otro elemento ImageSprite7 la aplicaci1n llama a
)ari"uita7Collide.ith7 utiliando el par9metro other para ;acer re"erencia al o-eto con el %ue
top1 el insecto. De momento7 el nico elemento con el %ue puede impactar la mari%uita es la pulga
pero7 en -re$e7 añadiremos una rana. Antes de llamar a Come'ulga7 de-emos compro-ar %ue la
mari%uita ;a c;ocado7 e"ecti$amente7 con la pulga. >am-ién de-emos eaminar %ue la pulga esté
$isi-le en el ta-lero7 8a %ue si no lo est97 la mari%uita se la comería antes de %ue $ol$iese a aparecer
8 $ol$ería a su-ir su ni$el de energía.
Guarda primero el pro8ecto con el nom-re LadyBugChase07 se generar9 el "ic;ero
“LadyBugChase07ap” %ue es el %ue de-es copiar a tu telé"ono.
PRUEBA!!!!
&ara %ue la pulga pueda aparecer en la pantalla de-eremos modi"icar 6pdate'ulga. >an s1lo
se alterar! la direcci(n de la pulga cuando sea visible. Io merece la pena cam-iarlo cuando es
in$isi-le. Cuando no apareca en la pantalla7 es decir7 cuando la mari%uita aca-e de comérsela7
;a-r9 un 5 por cien de posi-ilidades <4 entre 2F= de %ue se $uel$a a acti$ar de nue$o7 es decir7 %ue
$uel$a a aparecer como presa de la mari%uita.
El c1digo modi"icado de 6pdate'ulga es el siguiente:
6icente Destruels ,oreno &9gina 42
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 13/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
Guarda primero el pro8ecto con el nom-re LadyBugChase>7 se generar9 el "ic;ero
“LadyBugChase>7ap” %ue es el %ue de-es copiar a tu telé"ono.
PRUEBA!!!!
A;ora agregaremos un bot(n de $einicio de partida. Desde Component Designer7
agregaremos un componente Button al 9rea de tra-ao 8 lo colocaremos de-ao de *nergyCanvas.
@o llamaremos $einiciar 8 en la propiedad %e2t escri-iremos $einiciar. Después7 en Blocs
*ditor? crearemos el c1digo asociado al pulsar el -ot1n:
• De$ol$er el ni$el de energía a 2FF.
• 6ol$er a acti$ar la pulga 8 mostrarla de nue$o en pantalla.
• 'eacti$ar a la mari%uita 8 cam-iar su imagen para %ue apareca $i$a.
6icente Destruels ,oreno &9gina 4!
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 14/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
Guarda primero el pro8ecto con el nom-re LadyBugChase:7 se generar9 el "ic;ero
“LadyBugChase:7ap” %ue es el %ue de-es copiar a tu telé"ono.
PRUEBA!!!!
A;ora añadiremos a un depredador de nuestra mari%uita7 la rana7 %ue se mo$er9 ;acia ella.
i la atrapa el uego "inaliar9.
@o primero es colocar la rana en el ta-lero de uego FieldCanvas desde Component
Designer7 arrastrando un ImageSprite7 al %ue llamaremos $ana. 0ncorporaremos su imagen en la
propiedad 'icture7 a su mo$imiento le asignaremos un inter$alo de 31 milisegundos 8 a su
velocidad le daremos el $alor 37 8a %ue de-er9 mo$erse m9s lento %ue el resto de criaturas del
uego.
A;ora ;emos de crear el procedimiento 6pdate$ana 8 modi"icar el 8a creado Cloc37%imer.
6icente Destruels ,oreno &9gina 4#
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 15/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
Atan87 es una "unci1n matem9tica de AppInventor? %ue de$uel$e el !ngulo correspondiente a los
$alores K e L suministrados.
A;ora ;emos de modi"icar el c1digo para controlar el c;o%ue de la mari%uita con cual%uier
otro elemento del ta-lero. A;ora7 si la mari%uita se topa con la rana7 la -arra 8 el nivel de energ#a
de-erían de descender ;asta 1 8 el uego terminaría. El $alor de la $aria-le energy descender9 ;asta
F. e llamar9 a la "unci1n )uestra4ivel*nergia para %ue -orre la línea de energía en la pantalla 8
di-ue una nue$a %ue estaría $acía. Adem9s7 la aplicaci1n llamar9 al procedimiento Fin para %ue
detenga el mo$imiento de la mari%uita 8 cam-ie su imagen por un insecto muerto:
6icente Destruels ,oreno &9gina 45
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 16/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
Un último detalle....
emos de tener en cuenta el retorno de la mari"uita en el -ot1n $einiciar. i no mo$emos
la mari%uita cuando reiniciamos el uego7 $ol$ería a aparecer en la -oca de la rana. Aun%ue $amos autiliar para ello la "unci1n random integer 8a conocida7 la pro-a-ilidad de %ue apareca la
mari%uita encima de la rana es tan -aa7 %ue no merece la pena complicar m9s el c1digo:
Guarda primero el pro8ecto con el nom-re LadyBugChase@7 se generar9 el "ic;ero
“LadyBugChase@7ap” %ue es el %ue de-es copiar a tu telé"ono.
PRUEBA!!!!
6amos a añadir e"ectos sonoros. &ara ello utiliaremos el componente Sound3 %ue añadimos
al principio de la pr9ctica <comprué-alo primero=. A;ora7 desde Blocs *ditor ;a lo siguiente:
• a %ue el telé"ono $i-re cuando la mari%uita se coma a la pulga. &ara ello7 de-er9s agregar
el -lo%ue Sound375ibrate a Come'ulga 8 asignarle un argumento de 3111 milisegundos.
6icente Destruels ,oreno &9gina 4+
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 17/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
• a %ue la rana croe cuando se coma a la mari%uita. Añade una llamada Sound37'lay en
)ari"uita7Collide.ith usta antes de %ue se in$o%ue a la "unci1n Fin.
De-er9s de cargar el "ic;ero “Frog7.av” desde )edia 8 en las propiedades del o-eto
Sound3 asign9rselo en el campo Source7
Guarda primero el pro8ecto con el nom-re LadyBugChase@7 se generar9 el "ic;ero
“LadyBugChase@” %ue es el %ue de-es copiar a tu telé"ono.
PRUEBA!!!!
6icente Destruels ,oreno &9gina 4/
7/17/2019 AppInventor Cap5 Final
http://slidepdf.com/reader/full/appinventor-cap5-final 18/18
Apuntes de Android – AppInventor de Google Capítulo 5 – LadyBug Chase
Variaciones
Algunas ideas para meorar el uego <M;a-lar con el pro"esor=:
• A;ora7 la rana y la pulga siguen mo$iéndose incluso después de terminar el uego. &ara
e$itarlo7 de-erías asignar el $alor 9alse a las propiedades *nabled %ue se encuentran en la
"unci1n Fin 8 el $alor true en $einiciar7Clic .
• ,uestra un marcador %ue indi%ue la cantidad de vida %ue le %ueda a la mari%uita. &ara
ello7 puedes crear una eti%ueta %ue incremente su $alor con Cloc37%imer.
• Aumenta la altura de la -arra de energía para %ue sea m9s llamati$a. 'ecuerda %ue puedes
;acerlo incrementando el $alor de la propiedad /eight de *nergyCanvas ;asta 8 8
di-uando dos líneas7 una so-re otra7 en Dibu+ar*nergia.
• Añade una imagen de "ondo para meorar el entorno 8 nue$os e"ectos de sonido7 como los
de la naturalea o algn a$iso de cuando el ni$el de energía de la mari%uita sea demasiado
-ao.
• a %ue el +uego sea cada $e m!s di9#cil. &ara ello7 puedes incrementar la velocidad de la
rana o disminuir el $alor de la propiedad Interval.
• >écnicamente7 la mari%uita de-ería desaparecer cuando sea de$orada por la rana. Cam-ia el
uego para %ue esto ocurra cuando sea comida pero permaneca en la pantalla cuando muera
de ;am-re.
• ustitu8e las im9genes de la mari%uita7 la pulga 8 la rana por otras %ue sean de tu gusto7
como por eemplo7 un ;o--it7 un orco 8 un mago dia-1lico.
6icente Destruels ,oreno &9gina 4
top related