Tutorial Appinventor Minigolf

8/12/2019 Tutorial Appinventor Minigolf

1/13


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


3/13


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.


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.


6/13


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/13


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:


10/13


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.


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


13/13

Resumen:Elproyectoalfinalquedatalqueas:

Aladerechapodemosverelpanelde

Componentes

AbajopodemosverelBlocksEditorresultante

Documents

Tutorial Appinventor Minigolf