1

Esmagueatoupeira

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 pontuação será

aumentada em 1 O tutorial vai incluir a criação 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

2

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 usuário 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.

3

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.

4

Selecione a imagem da toupeira e clique em OK

Repita esta operação para adicionar a imagem para o buraco. Agora você deve ver as 2

imagens disponíveis em Media no painel de components.

5

Agora selecione Animation no painel Palette e arraste 5 componentes ImageSprite para o

Canvas1 do projeto. Esses 5 ImageSprites serão utilizados para os buracos.

6

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 Posição X Posição Y

Buraco1 20 60

Buraco2 130 60

Buraco3 240 60

Buraco4 75 140

Buraco5 185 140

7

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 apareça

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.

8

No painel Palette selecione a opção 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.

9

10

No painel Palette selecione a opção basic e coloque um componente clock que será exibido

abaixo da tela de layout como componente não visível.

No painel Palette selecione a opção Media e coloque um componente Sound. Novamente, isto

irá aparecer abaixo da tela, em Componentes não-visíveis.

11

Passo 3: Adicionando funcionalidades para a interface Uma vez que a interface está pronta podemos definir as funcionalidades dos componentes. O

que nós queremos que aconteça pode ser descrito nos seguintes passos:

1. A toupeira ira aparecer aleatoriamente nos buracos;

2. O usuário terá que clicar na toupeira e quando isso ocorrer sua pontuação será

acrescida em 1 ponto.

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

App Inventor irá observar um botão com o texto Open the Blocks Editor. Clique neste

botão

Na aba Built-In clique no botão Definition e arraste o bloco def variable as para a área de

programação e o renomeie como buraco

12

Ainda na aba Built-In clique no botão 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 programação e o renomeie como

BuracoAtual,. Esta variável ira indicar o buraco atual da toupeira.

Na aba Built-In clique em Math e arraste um bloco number para a área de programação e

conecte no bloco def BuracoAtual as e mude o valor deste bloco para 0.

13

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 programação.

14

Na aba Built-In clique em list e arraste o bloco call add items to list para a área de

programação 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

15

Ainda em My Blocks clique em buraco1 e arraste o bloco component buraco1 para a área de

programação 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.

16

Agora queremos especificar qual o valor que a variável 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 programação

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

17

Agora na aba Advanced clique em Any ImageSprite arraste o bloco ImageSprite.Picture

para a área de programação 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

18

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

19

A procedure MoveToupeira agora precisa ser concluída. A toupeira irá se mover quando o

usuário clica-la ou quando o tempo acabar. Quando isso acontece, um buraco aleatório

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 programação 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 programação conecte este bloco na parte to do bloco set global BuracoAtual to

20

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 programação e encaixe o mesmo no bloco to

MoveToupeira arg

21

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.

22

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 programação o bloco when Clock1.Timer.

Selecione a aba My Blocks, clique em My Definitions e arraste sobre a área de programação

o bloco call MoveToupeira

23

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 programação o bloco when

toupeira.Touched. Os componentes X e Y serão completados automaticamente.

24

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 programação 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

25

Selecione a aba Built-In clique em Math selecione o bloco number 123 arraste-o para a área

de programação 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

programação 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 programação e insira este bloco logo

abaixo do bloco set lblPontos.Text

26

Selecione a aba Built-In clique em Math e arraste o bloco number 123 para a área de

programação 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 programação

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

27

O programa completo é mostrado abaixo.

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

28

Passo 4: Experimente - Conecte o dispositivo e teste o programa

Para testar o aplicativo, você tem duas opções:

1 Teste o aplicativo no emulador virtual, mas lembre-se, a função de vibração não vai

funcionar no emulador.

2 Teste o aplicativo em um dispositivo do mundo real