Esmague

a toupeira
Este tutorial ir ajud-lo a construir um jogo onde voc tem que bater na toupeira quando ela
salta para fora do buraco. Toda vez que voc acertar na toupeira sua pontuao ser
aumentada em 1 O tutorial vai incluir a criao de uma lista, usando o timer para controlar o
jogo e usar Sprite z- camadas para garantir que um Sprite possa aparecer na frente dos outros.

Abra o App Inventor digitando no browser http://localhost:8888 e clique em My Projects e

New

1
 Esta janela ir aparecer. De o
nome do projeto de
EsmagueToupera e clique em OK

2 Passo: Criando a interface do EsmagueToupera

A interface do usurio ter os seguintes elementos:

Um cavas
6 image sprites
o 5 buracos fixos
o 1 toupeira que ira se mover sobre os buracos
Um HorizontalArrangement
o 2 Labels
Um elemento Clock
Um elemento Sound

Mude a propriedade Title do Screen1 para Esmague Toupeira

Na aba Basic clique no elemento canvas e o arraste para o Screen1.

2
Configure a propriedade width do canvas com o valor 320 pixel e height com 320 pixel e
BackgroundColor com green

Queremos adicionar as imagens para os buracos e a toupeira na a tela. Para fazer isso v
ao painel components e abaixo de Media clique em upload new.

3
Selecione a imagem da toupeira e clique em OK

Repita esta operao para adicionar a imagem para o buraco. Agora voc deve ver as 2
imagens disponveis em Media no painel de components.

4
Agora selecione Animation no painel Palette e arraste 5 componentes ImageSprite para o
Canvas1 do projeto. Esses 5 ImageSprites sero utilizados para os buracos.

5
Renomeie os componentes para buraco1, buraco2, buraco3, buraco4 e buraco5.

Selecione cada uma das cinco ImageSprites e no painel properties em Picture selecione o
arquivo buraco.png.

Depois insira as coordenadas X e Y para cada buraco de acordo com a tabela abaixo:

Buraco Posio X Posio Y

Buraco1 20 60
Buraco2 130 60
Buraco3 240 60
Buraco4 75 140
Buraco5 185 140

6
Coloque outro ImageSprite e o renomeie como toupeira e na propriedade Picture selecione
a figura toupeira.png

Depois modifique a propriedade Z da toupeira para 2. Isto ir permitir que a toupeira aparea
em frente do buraco

Agora v ate o painel Palette clique em ScreenArrangement e arraste um componente

HorizontalArrangement e coloque abaixo do componente Canvas1. Na propriedade width
selecione o valor Fill parent.

7
No painel Palette selecione a opo basic e coloque 2 labels dentro do componente
HorizontalArrangement1

Agora renomeie o Label1 para lblPlacar e coloque Placar na propriedade text. J o Label2 ser
renomeado como lblPontos e propriedade Text ser mudada para 0.

8
9
No painel Palette selecione a opo basic e coloque um componente clock que ser exibido
abaixo da tela de layout como componente no visvel.

No painel Palette selecione a opo Media e coloque um componente Sound. Novamente, isto
ir aparecer abaixo da tela, em Componentes no-visveis.

10
Passo 3: Adicionando funcionalidades para a interface
Uma vez que a interface est pronta podemos definir as funcionalidades dos componentes. O
que ns queremos que acontea pode ser descrito nos seguintes passos:

1. A toupeira ira aparecer aleatoriamente nos buracos;

2. O usurio ter que clicar na toupeira e quando isso ocorrer sua pontuao ser
acrescida em 1 ponto.

A funcionalidade do programa adicionada usando o Blocks Editor. No painel superior do

App Inventor ir observar um boto com o texto Open the Blocks Editor. Clique neste
boto

Na aba Built-In clique no boto Definition e arraste o bloco def variable as para a rea de
programao e o renomeie como buraco

11
Ainda na aba Built-In clique no boto Lists e arraste o bloco call make a list item conecte
este bloco em def buraco as

Arraste outro bloco def variable as para a rea de programao e o renomeie como
BuracoAtual,. Esta varivel ira indicar o buraco atual da toupeira.

Na aba Built-In clique em Math e arraste um bloco number para a rea de programao e
conecte no bloco def BuracoAtual as e mude o valor deste bloco para 0.

12
Agora na aba Built-In clique em Definition e arraste um bloco to procedure arg do.
Renomeie este bloco como MoveToupeira.

Na aba My Blocks clique em Screen1 e arraste um bloco when Screen1.Initialize do para a

rea de programao.

13
Na aba Built-In clique em list e arraste o bloco call add items to list para a rea de
programao e conecte-o na parte interna do bloco when Screen1.Initialize do

Queremos adicionar itens lista. Para fazer isso vamos aba My Blocks clique me My
Definitions e arraste o bloco global buraco e encaixe na parte list do bloco call add items to
list

14
Ainda em My Blocks clique em buraco1 e arraste o bloco component buraco1 para a rea de
programao e o conecte na parte item do bloco call add items to list

Repita os passos anteriores para o buraco 2, 3, 4 e 5.

15
Agora queremos especificar qual o valor que a varivel buraco vai assumir com os valores da
lista. Para fazer isso selecione a aba Built-In clique em control e arraste um bloco foreach
para rea de programao

Modifique em name var para buraco como visto na figura abaixo

Selecione a aba My Blocks clique em My Definitions selecione o bloco global buraco e o

encaixe em in list do bloco foreach

16
Agora na aba Advanced clique em Any ImageSprite arraste o bloco ImageSprite.Picture
para a rea de programao e o conecte na parte do em foreach

Para completar este bloco selecione a aba My Blocks clique em My Definitions e arraste um
bloco value buraco e encaixe em component do bloco ImageSprite.Picture

17
Agora selecione a aba Built-In clique em Text e arraste um bloco text text e o encaixe na parte
to do bloco ImageSprite.Picture e o renomeie como buraco.png

Finalmente selecione a aba My Blocks clique em My Definitions e arraste um bloco call

MoveToupeira e o conecte no bloco Screen1.Initialize sob o bloco foreach

18
A procedure MoveToupeira agora precisa ser concluda. A toupeira ir se mover quando o
usurio clica-la ou quando o tempo acabar. Quando isso acontece, um buraco aleatrio
ser escolhido e a toupeira ser exibida em cima do buraco.

Selecione a aba My Blocks clique em My Definitions e arraste o bloco set global

BuracoAtual to para a rea de programao e o conecte na parte interior do bloco
MoveToupeira que colocamos anteriormente na rea.

Agora selecione a aba Built-In clique em Lists e arraste um bloco call pick random item para a
rea de programao conecte este bloco na parte to do bloco set global BuracoAtual to

19
Selecione a aba My Blocks clique em My Definitions e arraste um bloco global buraco e o
encaixe no bloco pick call random item.

Agora precisamos dizer ao programa para mover a toupeira para as coordenadas X e Y do

buraco escolhido.

Para fazer isso selecione a aba My Blocks clique em Toupeira e arraste um bloco call
toupeira.MoveTo X Y para a rea de programao e encaixe o mesmo no bloco to
MoveToupeira arg

20
Agora selecione a aba Advanced clique em Any Image Sprite e arraste um bloco
ImageSprite.X component e o conecte na parte X do bloco call toupeira.MoveTo X Y.
Arraste um bloco ImageSprite.Y component e o conecte na parte Y do bloco call
toupeira.MoveTo X Y.

21
Agora selecione a aba My Blocks clique em My Definitions e arraste 2 blocos global
BuracoAtual e os encaixe nos blocos ImageSprite.Y component e ImageSprite.Xcomponent.

Agora precisamos dizer ao programa que a procedure MoveToupeira ser chamada quando
encerrar o tempo do componente Clock1. Para fazer isso selecione a aba My Blocks clique em
Clock1 e arraste para rea de programao o bloco when Clock1.Timer.

Selecione a aba My Blocks, clique em My Definitions e arraste sobre a rea de programao

o bloco call MoveToupeira

22
Finalmente precisamos especificar o que acontece quando a toupeira tocada. O placar ser
incrementado, o telefone ir vibrar e a toupeira ir se mover. Para fazer isso selecione a aba
My Blocks, clique em toupeira e arraste para a rea de programao o bloco when
toupeira.Touched. Os componentes X e Y sero completados automaticamente.

23
Quando a toupeira tocada o placar ser incrementado em 1. Para fazer isso selecione a aba
My Blocks clique em lblPontos e arraste para rea de programao o bloco set
lblPontos.Text to e o encaixe na parte do no bloco when toupeira.Touched

Agora selecione a aba Built-In clique em Math selecione o bloco + e conecte-o na parte to
do bloco set lblPontos.Text

24
Selecione a aba Built-In clique em Math selecione o bloco number 123 arraste-o para a rea
de programao mude seu valor para 1 e o encaixe a esquerda do bloco +

Selecione a aba My Blocks clique em lblPontos, arraste o bloco lblPontos.Text para rea de
programao e o encaixe no lado direito do bloco +

Agora temos que fazer o telefone vibrar. Para fazer isso selecione My Blocks clique em Sound1
e arraste o bloco call Sound1.Vibrate para a rea de programao e insira este bloco logo
abaixo do bloco set lblPontos.Text

25
Selecione a aba Built-In clique em Math e arraste o bloco number 123 para a rea de
programao mude valor para 100 e o conecte na parte millisecs do bloco Sound1.Vibrate

Selecione a aba My Blocks clique em My Definitions e arraste para rea de programao

um bloco call MoveToupera e o encaixe embaixo do bloco call Sound1.Vibrate

26
O programa completo mostrado abaixo.

Voc acabou de criar uma funcional App do jogo Esmague a Toupeira, bem feito.

27
Passo 4: Experimente - Conecte o dispositivo e teste o programa
Para testar o aplicativo, voc tem duas opes:
1 Teste o aplicativo no emulador virtual, mas lembre-se, a funo de vibrao no vai
funcionar no emulador.
2 Teste o aplicativo em um dispositivo do mundo real

28