Vous êtes sur la page 1sur 28

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

garantir que um Sprite possa aparecer na frente dos outros. Abra o App Inventor digitando no

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

na frente dos outros. Abra o App Inventor digitando no browser http://localhost:8888 e clique em My
Esta janela irá aparecer. De o nome do projeto de EsmagueToupera e clique em OK

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

Mude a propriedade Title do Screen1 para Esmague Toupeira Na aba Basic clique no elemento canvas

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

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

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

BackgroundColor com green

pixel e height com 320 pixel e BackgroundColor com green Queremos adicionar as imagens para os

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.

Selecione a imagem da toupeira e clique em OK Repita esta operação para adicionar a

Selecione a imagem da toupeira e clique em OK

Selecione a imagem da toupeira e clique em OK Repita esta operação para adicionar a imagem

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.

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

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.

e arraste 5 componentes ImageSprite para o Canvas1 do projeto. Esses 5 ImageSprites serão utilizados para

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

para buraco1, buraco2, buraco3, buraco4 e buraco5. Selecione cada uma das cinco ImageSprites e no painel

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

painel properties em Picture selecione o arquivo buraco.png. Depois insira as coordenadas X e Y para

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

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

e na propriedade Picture selecione a figura toupeira.png Depois modifique a propriedade Z da toupeira para

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

irá permitir que a toupeira apareça em frente do buraco Agora vá ate o painel Palette

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.

No painel Palette selecione a opção basic e coloque 2 labels dentro do componente HorizontalArrangement1

No painel Palette selecione a opção basic e coloque 2 labels dentro do componente

HorizontalArrangement1

coloque 2 labels dentro do componente HorizontalArrangement1 Agora renomeie o Label1 para lblPlacar e coloque Placar

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

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.

abaixo da tela de layout como componente não visível. No painel Palette selecione a opção Media

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.

Media e coloque um componente Sound. Novamente, isto irá aparecer abaixo da tela, em Componentes não-visíveis.

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

com o texto Open the Blocks Editor. Clique neste botão Na aba Built-In clique no 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

clique no botão Definition e arraste o bloco def variable as para a área de programação

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

call make a list item conecte este bloco em def buraco as A r r a

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.

Esta variável ira indicar o buraco atual da toupeira. Na aba Built-In clique em Math e

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.

Agora na aba Built-In clique em Definition e arraste um bloco to procedure arg do

Agora na aba Built-In clique em Definition e arraste um bloco to procedure arg do.

Renomeie este bloco como MoveToupeira.

to procedure arg do . Renomeie este bloco como MoveToupeira. Na aba My Blocks clique em

Na aba My Blocks clique em Screen1 e arraste um bloco when Screen1.Initialize do para a área de programação.

Na aba Built-In clique em list e arraste o bloco c all add items to

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

na parte interna do bloco when Screen1.Initialize do Queremos adicionar itens à lista. Para fazer isso

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

Ainda em My Blocks clique em buraco1 e arraste o bloco c o m p

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

e o conecte na parte item do bloco call add items to list Repita os passos

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

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

e arraste um bloco foreach para área de programação Modifique em name var para buraco como

Modifique em name var para buraco como visto na figura abaixo

em name var para buraco como visto na figura abaixo S e l e c i

Selecione a aba My Blocks clique em My Definitions selecione o bloco global buraco e o encaixe em in list do bloco foreach

Agora na aba Advanced clique em Any ImageSprite arraste o bloco ImageSprite.Picture para a área

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

área de programação e o conecte na parte do em foreach P a r a c

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

Agora selecione a aba Built-In clique em Text e arraste um bloco text text e

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

do bloco ImageSprite.Picture e o renomeie como buraco.png Finalmente selecione a aba My Blocks clique em

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

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

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.

do bloco MoveToupeira que colocamos anteriormente na área. Agora selecione a aba Built-In clique em Lists

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

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

global buraco e o encaixe no bloco pick call random item. Agora precisamos dizer ao programa

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

Agora selecione a aba Advanced clique em Any Image Sprite e arraste um bloco ImageSprite.X

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.

X Y. Arraste um bloco ImageSprite.Y component e o conecte na parte Y do bloco call

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.

blocos ImageSprite.Y component e ImageSprite.Xcomponent. Agora precisamos dizer ao programa que a procedure

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.

para área de programação o bloco when Clock1.Timer. Selecione a aba My Blocks, clique em My

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

Finalmente precisamos especificar o que acontece quando a toupeira é tocada. O placar será incrementado,

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.

área de programação o bloco w h e n toupeira.Touched. Os componentes X e Y serão

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

e o encaixe na parte do no bloco when toupeira.Touched Agora selecione a aba Built-In clique

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

selecione a aba Built-In clique em Math selecione o bloco + e conecte-o na parte to

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 +

mude seu valor para 1 e o encaixe a esquerda do bloco + Selecione a aba

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 +

de programação e o encaixe no lado direito do bloco + Agora temos que fazer o

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

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

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

e o conecte na parte millisecs do bloco Sound1.Vibrate Selecione a aba My Blocks clique em

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

O programa completo é mostrado abaixo. Você acabou de criar uma funcional App do jogo

O programa completo é mostrado abaixo.

O programa completo é mostrado abaixo. Você acabou de criar uma funcional App do jogo Esmague

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

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