Tutorial

Appinventor

Minigolf

Minigolf
Este ejemplo muestra cmo usar el Fling (deslizamiento) y los gestos TouchUp(tocar) y
TouchDown(soltar).
Para jugar a este minijuego el jugador primero posiciona su pelota en soporte y entonces
puedelanzarlahaciaelagujero,lapelotarebotarcontralosobstculosyparedes.Porcada
lanzamiento el contador de golpes aumentar. La puntuacin total es el nmero de golpes
utilizados.

Parte 1 Crea una nueva App y una pelota que responda a los
lanzamientos
Vamosaconstruirestaaplicacinpor etapas,aadiendounafuncionalidaddeljuegocadavez.
AccedealAppInventorycreaunnuevoproyectoconelnombreMinigolf.Cuandoseabrela
ventana de diseo observa que AppInventor automtica mente nombra la primera pantalla
comoScreen1,peropuedescambiarlo.
En la pantalla de Propiedades (panel de la derecha). Desmarca la Checkbox llamada
Scrollableparaquelapantallanosemuevamientraslaappestenmarcha.Laspantallasen
lasquesepuedehacerscroll(deslizaryquesemueva)notienenunaalturadeterminada.Al
nopermitirelscrollennuestraApptendremosquedefinirla.

Aade los siguientes componentes en el designer:

Component

Palette

Type

Group

Canvas1

Basic

Nombre

Objetivo

Properties

Canvas1

Elcanvasserelcampo

Height:300

degolf

Width:FillParent
BackgroundColor:Verdeodelcolorque
quieras;)

BallSprite

Animation

GolfBall

Estaeslapelotaquehay

Radius=10

quemeterenelagujero

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

TimerAlwaysFires

movimientodelapelota

TimerEnabled

respectodeltiempo

TimerInterval:100

Abre el Blocks Editor

Programa el comportamiento de la pelota:
UsaelcontroladordeeventosGolfBall.Flunglanzamientodepelotapatramoverlapelotade
golfcuandoeslanzada.Esencialmente,establecelavelocidaddelapelotadegolfyladirigetal
cualhayashechoelgestodelanzar.Puedeserquequierasaumentarunpocolavelocidadya
quelavelocidaddellanzamientoesinferioracomounapelotadegolfdeberamoverse(pero
dependedegustos).PuedesjugarconGolfBall.Speed.valuemultiplicndoloporelnmeroque
quierashastaqueencuentreslavelocidadquemsteguste.

Programa el comportamiento del reloj:

Usaeleventotiempoparareducirlavelocidaddelapelotasegnvayapasandoeltiempo.
Cadamomentoqueelrelojseactivareducirunpocolavelocidaddelapelota.Silapelotano
seestmoviendoestosbloquesnoharnnada.Sinocolocaselrelojyestosbloqueslapelota
estarmovindosesiempreyaquenohabrnadaquelafrene.

Programa un nuevo procedimiento llamado SetupNewHole (colocar un nuevo

agujero):
Esteprocedimientoentrarenaccincuandolapelotaentraenelagujero.Sufuncinserque
cuando la pelota entre en el agujero devolver la pelota al inicio y mover el agujero a otro
lugaraleatorioparajugarlasiguientepartida.

Programa el comportamiento del Agujero:

Cuando la pelota golpea al agujero reduce la velocidad de la pelota a 0 y llama (activa) al
bloquedearriba(SetupNewHole)
Nota: cuando arrastras el bloque GolfBall.CollidedWith, la pieza nombre se llama other
(otro). Puedes renombrarla clickando en ella y escribiendo el nombre que quieras. En este
ejemplo la hemos llamado ObjectHitByGolfBall (objeto golpeado por la pelota de golf).
Observaqueelbloqueifthen(sipasaxxxentonceshazyyy)compruebasielelementoque
chocaconelagujeroeslapelota,poresousaelcomponentHole.

Se atasca la pelota en el borde?

Estoesfcilmentesolucionableconestepequeobloque.Puedesencontrarelbloqueedge
(borde)debajodeMydefinitions.

Parte 2: Mantener la puntuacin

Losjuegossonmsdivertidossipuedesverqutalloestshaciendo.Porello,vamosaaadir
uncontadorqueaumentarunaunidadconcadalanzamientodelapelota.Deformaqueel
objetivoesconseguirlamnimapuntuacin.Mostraremoselnmerodegolpesqueeljugador
tieneenelhoyoqueestjugandoytambinentodalapartida.
ParaellovolveremosalDesignerycrearemoslossiguientescomponentes:
Component

Palette Group

Nombre

Objetivo

Properties

Horizontal

Screen

HorizontalArrangement1

Contiene LabelScore

Place at top

Arrangement

Arrangement

y LabelStroke

of screen

Label1

Basic

Type

LabelScore

Muestra los golpes

de 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.


Ylossiguientesbloquesaleventoquecontrolacuandolapelotaentraenelagujero:

Con estos cambios deberas ver los contadores Total Strokes (golpes totales) y This Hole
(este agujero) en la parte superior de la pantalla. Ambos aumentarn una unidad con cada
lanzamientodelapelotaperoelcontadorThisHolesepondra0cuandolapelotaentreen
elhoyo.

Parte 3: Posicionar la pelota en el soporte usando los eventos

TouchUp y TouchDown
Yatenemosunjuegoquefunciona!Peroahoravamosahacerlomsinteresanteydivertido.
Primero colocaremos un soporte y dejaremos al jugador posicionar la pelota de golf en l
antesdeempezaralanzarla.
Vuelve al Designer y aade tres nuevos componentes:
Component

Palette

What Youll

Type

Group

Name It

ImageSprite

Animation

Tee

ImageSprite

Animation

LeftSprite

Purpose

Properties

Un area rectangular en la que el

Sube la imagen del

jugador puede colocar la pelota

soporte (ctrl+click

antes de lanzarla.

para descargar).

Esta es una fleche que el jugador

Sube la imagen de la

usar para mover la pelota hacia

flecha (ctrl+click para

la izquierda en el Tee

descargar)

(soporte).
ImageSprite

Animation

RightSprite

Esta es una fleche que el jugador

Sube la imagen de la

usar para mover la pelota hacia

flecha (ctrl+click para

la derecha en el Tee (soporte).

descargar

Programa el tamao del canvas y la colocacin de la pelota:
Primero programa la disposicin de los componentes anteriores en pantalla. Lo mejor para
acomodarseatodoslostamaosdepantallaescolocarlosobjetosenlapantallaenrelacin
con el tamao de la pantalla de forma que en pantallas ms grandes las imgenes se vern
ms grandes y si las pantallas son pequeas las imgenes se vern pequeas. De forma que
siempreseverbienindependientementedeltamaoyresolucindelapantalla.
Los bloques de abajo muestran cmo crear la pantalla dinmicamente para que todo est
donde tenga que estar y tenga el tamao que tiene que tener. Empezamos haciendo que el
canvasseadeltamaodelapantallaydespuscolocamoscadaobjetoenrelacinaltamao
delcanvas.Intentacomprenderestosbloquesantesdecontinuar.

Posicionar la pelota de golf en el Tee (soporte) usando TouchUp y TouchDown en

las imgenes de las flechas:
Paracontrolarestocrearemos2variablesglobalesmsqueseactivarncadavezquesepulsa
suflecha.

Programar el comportamiento de las flechas izquierda y derecha:

Lasflechasizquierdayderechasonspritesasquetienenlahabilidaddesabercundolas
pulsan.Lossiguientesbloquesmodificanlasvariablesglobalesquemarcanquflechaseest
pulsando.

Mtodo para mover la pelota en el Tee:

Creaunnuevoprocedure(mtodo)llamadoMoveBallOnTeequehacequelapelotade
golfsemuevaaladerechaoalaizquierdadependiendodelasvariablesglobalesdefinidas
anterioirmente.Aunquelamatemticaaquparezcacomplicadaessimple.Silapelotatiene
quemoversealaizquierdaprimerohayquecomprobarquemoviendolapelota2pxelesala
izquierdanosesaldrdelTee;ylomismosisemuevehacialaderecha.


Encadapartidaeljugadorpuedeposicionarlapelotaencualquierlugardelteeantesde
lanzarlapelota.Paraprogramaresto,primerotienesqueasegurartedequelapelotanoha
sidolanzadaya.Sielnmerodelanzamientos=0sabemosquesepuedemoverlapelota.

LosbloquesdentrodeClock1.Timersehanmovidoaunnuevoprocedure(mtodo)
llamadoMoveBallOnCourse.

Permite el reset (reinicio) del juego:

Eljuegofuncionamuybienperopodramejorarsipermitimosquepuedanreiniciareljuego.
Tambin sera buena idea dar al jugador unas pocas instrucciones para que sepan jugar a
nuestro juego. Mientras el usuario juega le daremos una indicacin de cuantos hoyos ha
completado.ParaelloaadiremoslossiguientescomponentesenelDesigner:

Component

Palette Group

Nombre

Objetivo

Properties

Horizontal

Screen

Horizontal

Contains the

Arrangement2

Arrangement

Arrangement2

NewGame button and

Type

the HoleNum label

Button

Basic

ButtonNewGame

Resets the game to

Text: "New Game"

Hole #1 with a score

of 0.
Label3

Basic

LabelHoleNum

Displays the current

Text = "Hole # 1"

hole number,

Font: bold, 28, blue

increments by one
each time a hole is
completed.
Label4

Basic

LabelInstruct

Displays instructions

Text = "Usa las

flechas para colocar la
bola en el Tee. Golpea
la pelota lanzndola
con el dedo.

Defineunanuevavariableglobalparatenerunseguimientodelnmerodehoyo:

AadelossiguientesbloquesalmtodoSetupNewHole

Programa el botn New Game (juego nuevo), el cual es muy simple. Cuando se pulsa el
botn tenemos que resetear un montn de variables y por ltimo llamaremos a
SetupNewHole(paraquegenereunnivelaleatorio).

Parte 4: Introduce un obstculo

Lamayorademinigolfstienenobstculosyademshaceneljuegomsdivertido.Vamosa
aadirunobstculorectangularsimplequesecolocaraleatoriamenteenalgnlugarentreel
Teeyelhoyo.Cadapartidaelobstculosemover(aligualquelohaceelhoyo).
Aade el siguiente componente en el Designer:
Component

Palette

Type

Group

ImageSprite

Animation

Nombre

Objetivo

Properties

ObstacleSprite1

Esta imagen estar en cualquier

Sube el obstculo

lugar entre la pelota de golf y el

(rectngulo)

hoyo. Su objetivo sera hacer ms

(ctrl+click)

difcil que lleguen al hoyo.

Programaelcomportamientodelobstculoenelblockseditor.Primero,creaelprocedimiento
por el cual cuando la pelota golpee al obstculo. Para ello modificaremos la direccin de la
pelotadelainiciala0lainicialparaquesiemprerebotedeunaformanatural.


Cadavezquesereseteeeljuegoelobstculosecolocaraleatoriamente.Aadeestebloqueal
procedure(mtodo)SetupNewHole:

Y ya est ;). Comparte la apk con tus amigos y prueba el juego para ver que todo funciona
comotienequefuncionar.Enestejuegoseutilizamuchsimolaaleatoriedad,esalgonormal
para que que el juego siempre sea diferente y los jugadores no se aburran as que intenta
introducirlaentusjuegos.

Parte 5: retos
Aquhay3retosquepuedenhacertujuegomejor.
Reto1:programalacolisinentrelabolayelhoyoparaquelabolasoloentresillevapoca
velocidad(comoenlavidareal).
Reto2:Hayunpequeobug(error)cuandolapelotagolpealosladosverticalesdel
obstculo.Piensaencmosolucionaresteproblemaparaquelapelotareboteenladireccin
esperada.
Reto3:Limitaelnmerodehoyosporjuego.Mantnlacuentadelnmerodehoyosyacaba
eljuegodespusdeunnmero.(Unminigolftpicotiene18hoyos).

Resumen:
Elproyectoalfinalquedatalqueas:
Aladerechapodemosverelpanelde
Componentes

AbajopodemosverelBlocksEditorresultante