Sumário

Pegue o ouro (Get the Gold) ........................................................................................................ 1

O que você está construindo ............................................................................................ 1
Começando ............................................................................................................................ 1
Introdução .............................................................................................................................. 2
Preparando............................................................................................................................. 2
Configurar os Componentes ............................................................................................. 2
Movendo o Pirata ................................................................................................................. 4
Movendo as Moedas ............................................................................................................ 4
Detectando colisões ............................................................................................................ 5
Botão de reset ....................................................................................................................... 6
Programa Completo............................................................................................................. 7
Variações ................................................................................................................................ 7

Pegue o ouro (Get the Gold)

O que você está construindo

Ao criar o Aplicativo Get The Gold, você

terá prática com a configuração de
visibilidade, usando componentes do
Relógio e Temporizadores e detectando
colisões no App Inventor. Você vai
programar um aplicativo que tem um navio
pirata cujo objetivo é coletar todo o ouro na
tela.

Começando

Conecte-se ao site do App Inventor e inicie

um novo projeto. Nomeie-o GetTheGold, e
também defina o título da tela para
"GetTheGold". Mude para a visualização
Blocos e conecte-se a um dispositivo ou
emulador.
Introdução

Este tutorial introduz as seguintes habilidades, úteis para o desenvolvimento

futuro do jogo:

• Usando o componente Relógio

• Usando Clock.Timer para mover sprites
• Usando Sprite.Flang para mover um sprite
• Usando a detecção de colisão

Preparando

Para este jogo, você terá dois tipos de imagens: pirata e moeda de ouro.

Configurar os Componentes

Use o designer de componentes para criar a interface para GetTheGold.

Quando você terminar, ele deve se parecer com o instantâneo abaixo
(instruções mais detalhadas abaixo do instantâneo).

Para criar esta interface, coloque os seguintes componentes no Designer

arrastando-os da Paleta de Componentes para o Visualizador.
Tipo de Grupo O que você Propósito do Componente
componente paleta vai nomeá-lo
Canvas Desenho e Canvas1 O fundo em que vamos colocar nossos
Animação imagesprites em
ImageSprite Desenho e Piratasprite O navio pirata em nosso jogo
Animação
ImageSprite Desenho e ImageSprite2 Uma das moedas de ouro do jogo
Animação
ImageSprite Desenho e ImageSprite3 Uma das moedas de ouro do jogo
Animação
ImageSprite Desenho e ImageSprite4 Uma das moedas de ouro do jogo
Animação
ImageSprite Desenho e ImageSprite5 Uma das moedas de ouro do jogo
Animação
ImageSprite Desenho e ImageSprite6 Uma das moedas de ouro do jogo
Animação
Clock Interface Clock1 Usamos o relógio para o seu método
do usuário temporizador para mover as moedas
Botão Interface ResetButton Para redefinir o jogo para que o jogador
do usuário possa jogar novamente

Defina as propriedades dos componentes conforme descrito abaixo:

Componente Ação
ResetButton Alterar a propriedade text para
"Redefinir".
Piratasprite Mude a Carregue a imagem do pirateship
propriedade speed para 6. e defina a
propriedade Picture para o
pirateship.
ImageSprite Carregue a imagem goldcoin e
(2,3,4,5,6) coloque a
propriedade Picture em
goldcoin.
Clock Mude a
propriedade timerInterval para
2000.
Movendo o Pirata

Para mover o PirateSprite, queremos que o usuário seja capaz de "arremessar"

o sprite na direção que escolher. Para fazer isso, usaremos o manipulador de
eventos PirateSprite.'

Você pode notar que PirateSprite.'a. Tem 6 atributos: x, y, xvel, yvel, speed e
heading. Queremos reatribuir a corrente do PirateSprite para o título dado a
nós do PirateSprite.' Isso significa que o usuário agora pode controlar a direção
do navio pirata com os dedos arremessando na tela.

Para evitar que o pirata saia da tela, também usaremos o PirateSprite.Bounce

quando uma borda for alcançada.

Movendo as Moedas

Queremos que as moedas se movam para posições aleatórias na tela.

Usaremos clock1.timer e o método MoveTo do ImageSprite para fazer isso.

Quando o Clock1.Timer explodir, queremos que todas as nossas moedas de

ouro ImageSprites se movam para um novo local aleatório na Tela. Faremos
isso usando o bloco Sprite.MoveTo. MoveTo tem dois argumentos: as
coordenadas x e y na tela da nova posição para a que queremos que o sprite
se mova. Queremos que o Sprite se mude para um novo local aleatório, então
usaremos o bloco random integer encontrado na caixa de matemática. Como
queremos que cada Gold ImageSprite se mude para um novo local, repetimos
esse processo para a função MoveTo de cada sprite.

Para ImageSprite2, queremos que x seja um inteiro aleatório de 0

a Canvas1.Largura-ImageSprite2.Largura e y para ser um inteiro aleatório de 0
a Canvas1.Height-ImageSprite2.Height. Isso deve ser repetido para todos os
Sprites de Imagem de Ouro.
Lembre-se que os sprites são medidos no canto superior esquerdo como (0,0)
por isso, se não queremos que eles saiam da tela, precisamos levar em conta a
altura/largura do sprite ao definir o intervalo para nossos números aleatórios.

Faremos isso montando nossos blocos como na imagem abaixo:

Detectando colisões

O App Inventor detecta colisões verificando se há uma intersecção entre os

retângulos delimitantes de cada ImageSprite. Chamamos isso de detecção de
colisão baseada em retângulos. Como você pode ver na imagem abaixo,
sprites com forma circular ou polígono aparecerão para colidir por causa dos
limites retangulares ao seu redor quando eles podem realmente não estar
colidindo.

Podemos usar o PirateSprite.CollidedCom manipulador de eventos para

detectar sempre que o navio pirata colidir com outra moeda de ouro ou sprite.
Você pode notar que PirateSprite.CollidedWith leva em uma discussão. Este
argumento é o objeto com o que o PirateSprite acabou de colidir. Vamos testar
dentro do manipulador para qual objeto para que o nome deste argumento não
seja significativo. Você pode nomeá-lo outro.

Sempre que o pirata colide com uma moeda de ouro, queremos que a moeda
desapareça. Podemos fazer isso definindo a visibilidade da moeda como falsa.
Para descobrir com qual moeda o pirata colidiu, usaremos
o PirateSprite.CollidingWith.

Podemos usar o PirateSprite.CollidingWith para pegar um componente (cada

uma das moedas de ouro sprites) para detectar qual sprite foi atingido. Este é
um bloco de componentes e NÃO um bloco de texto com as palavras
ImageSprite dentro. O bloco de componentes pode ser encontrado na gaveta
para cada componente. Se um sprite foi atingido, vamos definir sua visibilidade
como falsa.

Botão de reset
Depois que o usuário acertar todos os sprites de ouro com o navio pirata,
nenhum deles será visível. O botão de reset deve definir a visibilidade de todos
os sprites de ouro para verdade.

Programa Completo

Aqui está o programa getthegold completo.

Embale a versão final do aplicativo escolhendo o Pacote para | Código de

barras do menu Component Designer. Quando o código de barras aparecer,
use o scanner de código de barras no seu telefone para baixar e instalar o
aplicativo.

Variações
Uma vez que você começa este programa em execução, você pode querer
fazer os seguintes recursos adicionais para estendê-lo. Por exemplo

• Crie uma etiqueta para exibir o tempo que você levou para obter todo o
ouro
• Mude a velocidade do navio ou moedas de ouro
• Adicione um sprite inimigo que quando colidido com, faz com que seu
pirata perca velocidade
• Use um dos sensores do telefone para controlar o movimento do navio
pirata

Fonte:

Pegue o Ouro (mit.edu)