tutorial appinventor minigolf
TRANSCRIPT
-
8/12/2019 Tutorial Appinventor Minigolf
1/13
-
8/12/2019 Tutorial Appinventor Minigolf
2/13
Minigolf
Este ejemplomuestra cmousarel Fling (deslizamiento) y los gestos TouchUp(tocar) y
TouchDown(soltar).
Parajugar a esteminijuego eljugador primero posiciona su pelota en soporte y entonces
puede lanzarlahaciaelagujero, lapelotarebotarcontra losobstculosyparedes.Porcada
lanzamiento el contadorde golpes aumentar. Lapuntuacin totales elnmerode golpes
utilizados.
Parte1CreaunanuevaAppyunapelotaquerespondaaloslanzamientosVamos
a
construir
esta
aplicacin
por
etapas,
aadiendo
una
funcionalidad
del
juego
cada
vez.
AccedealAppInventorycreaunnuevoproyectoconelnombreMinigolf.Cuandoseabrela
ventanadediseoobservaqueAppInventor automticamentenombra laprimerapantalla
comoScreen1,peropuedescambiarlo.
En la pantalla de Propiedades (panel de la derecha). Desmarca la Checkbox llamada
Scrollableparaquelapantallanosemuevamientraslaappestenmarcha.Laspantallasen
lasquesepuedehacerscroll(deslizaryquesemueva)notienenunaalturadeterminada.Al
nopermitirelscrollennuestraApptendremosquedefinirla.
Aadelossiguientescomponenteseneldesigner:omponent
TypePaletteGroup
Nombre Objetivo Properties
Canvas1 Basic Canvas1 Elcanvasserelcampo
degolf
Height:300
Width:FillParent
BackgroundColor:Verdeodelcolorque
quieras;)
BallSprite Animation GolfBall Estaeslapelotaquehay
quemeterenelagujero
Radius=10
Color:Blanco(tpico)
Speed:0
Interval:1(ms)
Z=2(asaparecerporencimadelcampoz=0)
BallSprite Animation Hole Esteseraelagujero Radius=15
Color:negro(porejemplo)
Speed:0
Clock1 Basic Clock1 Controlarel
movimientodelapelota
respecto
del
tiempo
TimerAlwaysFires
TimerEnabled
TimerInterval:
100
-
8/12/2019 Tutorial Appinventor Minigolf
3/13
-
8/12/2019 Tutorial Appinventor Minigolf
4/13
ProgramaunnuevoprocedimientollamadoSetupNewHole(colocarunnuevoagujero):Esteprocedimientoentrarenaccincuandolapelotaentraenelagujero.Sufuncinserque
cuando lapelotaentreenelagujerodevolver lapelotaal inicioymoverelagujeroaotro
lugaraleatorioparajugarlasiguientepartida.
ProgramaelcomportamientodelAgujero:Cuando lapelotagolpeaalagujero reduce lavelocidadde lapelotaa0yllama (activa)al
bloquedearriba(SetupNewHole)
Nota: cuando arrastras elbloque GolfBall.CollidedWith, lapiezanombre se llama other
(otro). Puedes renombrarla clickando en ella y escribiendo elnombrequequieras. En este
ejemplo la hemos llamado ObjectHitByGolfBall (objeto golpeado por la pelota de golf).
Observaqueelbloqueifthen(sipasaxxxentonceshazyyy)compruebasielelementoque
chocaconelagujeroeslapelota,poresousaelcomponentHole.
-
8/12/2019 Tutorial Appinventor Minigolf
5/13
Seatascalapelotaenelborde?Estoesfcilmentesolucionableconestepequeobloque.Puedesencontrarelbloque edge
(borde)debajodeMydefinitions.
Parte2:MantenerlapuntuacinLosjuegossonmsdivertidossipuedesverqutalloestshaciendo.Porello,vamosaaadir
uncontadorqueaumentarunaunidadconcada lanzamientode lapelota.Deformaqueel
objetivoesconseguirlamnimapuntuacin.Mostraremoselnmerodegolpesqueeljugador
tieneen
el
hoyo
que
est
jugando
ytambin
en
toda
la
partida.
ParaellovolveremosalDesignerycrearemoslossiguientescomponentes:
omponentType
Palette Group Nombre Objetivo Properties
Horizontal
Arrangement
Screen
Arrangement
HorizontalArrangement1 Contiene LabelScore
y LabelStroke
Place at top
of screen
Label1 Basic LabelScore Muestra los golpesde toda la partida
Label2 Basic LabelStroke Muestra los golpes
del hoyo actual
En el editor de bloques podemos programar actualizaciones a la puntuacin. Primero,
crearemos 2 variables globales llamadas StrokeCount (Contador de golpes) y Score
(puntuacin)ylasinicializaremosa0.
EntoncesaadiremosaleventoGolfBall.Flunglosbloquesqueseencuentranrecuadradosen
rojo.
-
8/12/2019 Tutorial Appinventor Minigolf
6/13
-
8/12/2019 Tutorial Appinventor Minigolf
7/13
Conestoscambiosdeberasver loscontadoresTotalStrokes (golpestotales)yThisHole
(este agujero)en laparte superiorde lapantalla.Ambos aumentarnunaunidad con cada
lanzamientodelapelotaperoelcontadorThisHolesepondra0cuandolapelotaentreen
elhoyo.
Parte 3: Posicionar la pelota en el soporte usando los eventosTouchUpyTouchDownYatenemosunjuegoquefunciona!Peroahoravamosahacerlomsinteresanteydivertido.
Primero colocaremos un soporte y dejaremos aljugador posicionar la pelota de golf en l
antesdeempezaralanzarla.
VuelvealDesigneryaadetresnuevoscomponentes:omponent
TypePaletteGroup
What YoullName It
Purpose Properties
ImageSprite Animation Tee Un area rectangular en la que el
jugador puede colocar la pelota
antes de lanzarla.
Sube la imagen del
soporte (ctrl+click
para descargar).
ImageSprite Animation LeftSprite Esta es una fleche que el jugador
usar para mover la pelota hacia
la izquierda en el Tee
(soporte).
Sube la imagen de la
flecha (ctrl+clickpara
descargar)
ImageSprite Animation RightSprite Esta es una fleche que el jugadorusar para mover la pelota hacia
la derecha en el Tee (soporte).
Sube la imagen de laflecha (ctrl+clickpara
descargar
Programaeltamaodelcanvasylacolocacindelapelota:Primeroprograma ladisposicinde los componentes anterioresenpantalla. Lomejorpara
acomodarseatodos lostamaosdepantallaescolocar losobjetosen lapantallaenrelacin
conel tamaode lapantallade formaqueenpantallasmsgrandes las imgenes severn
ms
grandes
y
si
las
pantallas
son
pequeas
las
imgenes
se
vern
pequeas.
De
forma
que
siempreseverbienindependientementedeltamaoyresolucindelapantalla.
Los bloques de abajomuestran cmo crear la pantalla dinmicamente para que todo est
donde tengaqueestary tengael tamaoque tieneque tener.Empezamoshaciendoqueel
canvasseadeltamaodelapantallaydespuscolocamoscadaobjetoenrelacinaltamao
delcanvas.Intentacomprenderestosbloquesantesdecontinuar.
-
8/12/2019 Tutorial Appinventor Minigolf
8/13
-
8/12/2019 Tutorial Appinventor Minigolf
9/13
Encadapartidaeljugadorpuedeposicionarlapelotaencualquierlugardelteeantesde
lanzarlapelota.Paraprogramaresto,primerotienesqueasegurartedequelapelotanoha
sidolanzadaya.Sielnmerodelanzamientos=0sabemosquesepuedemoverlapelota.
LosbloquesdentrodeClock1.Timersehanmovidoaunnuevoprocedure(mtodo)
llamadoMoveBallOnCourse.
Permiteelreset(reinicio)deljuego:Eljuegofuncionamuybienperopodramejorarsipermitimosquepuedanreiniciareljuego.
Tambin sera buena idea dar aljugador unas pocas instrucciones para que sepanjugar a
nuestrojuego.Mientras el usuariojuega le daremos una indicacin de cuantos hoyos ha
completado.Para
ello
aadiremos
los
siguientes
componentes
en
el
Designer:
-
8/12/2019 Tutorial Appinventor Minigolf
10/13
-
8/12/2019 Tutorial Appinventor Minigolf
11/13
Parte4:IntroduceunobstculoLamayorademinigolfstienenobstculosyademshaceneljuegomsdivertido.Vamosa
aadirun
obstculo
rectangular
simple
que
se
colocar
aleatoriamente
en
algn
lugar
entre
el
Teeyelhoyo.Cadapartidaelobstculosemover(aligualquelohaceelhoyo).
AadeelsiguientecomponenteenelDesigner:omponent
TypePaletteGroup
Nombre Objetivo Properties
ImageSprite Animation ObstacleSprite1 Esta imagen estar en cualquier
lugar entre la pelota de golf y el
hoyo. Su objetivo sera hacer ms
difcil que lleguen al hoyo.
Sube el obstculo
(rectngulo)
(ctrl+click)
Programaelcomportamientodelobstculoenelblockseditor.Primero,creaelprocedimiento
porel cual cuando lapelotagolpeealobstculo.Paraellomodificaremos ladireccinde la
pelotadelainiciala0lainicialparaquesiemprerebotedeunaformanatural.
-
8/12/2019 Tutorial Appinventor Minigolf
12/13
Cadavezquesereseteeeljuegoelobstculosecolocaraleatoriamente.Aadeestebloqueal
procedure(mtodo)SetupNewHole:
Yyaest ;).Comparte laapk con tusamigosypruebaeljuegoparaverque todo funciona
comotienequefuncionar.Enestejuegoseutilizamuchsimo laaleatoriedad,esalgonormal
paraque
que
el
juego
siempre
sea
diferente
ylos
jugadores
no
se
aburran
as
que
intenta
introducirlaentusjuegos.
Parte5:retosAquhay3retosquepuedenhacertujuegomejor.
Reto1:programalacolisinentrelabolayelhoyoparaquelabolasoloentresillevapocavelocidad(comoenlavidareal).
Reto2:Hay
un
pequeo
bug
(error)
cuando
la
pelota
golpea
los
lados
verticales
del
obstculo.Piensaencmosolucionaresteproblemaparaquelapelotareboteenladireccin
esperada.
Reto3:Limitaelnmerodehoyosporjuego.Mantnlacuentadelnmerodehoyosyacabaeljuegodespusdeunnmero.(Unminigolftpicotiene18hoyos).
-
8/12/2019 Tutorial Appinventor Minigolf
13/13
Resumen:Elproyectoalfinalquedatalqueas:
Aladerechapodemosverelpanelde
Componentes
AbajopodemosverelBlocksEditorresultante