App Inventor

Timer, Animações e
Detecção de colisões
Prof: Wilton Moreira Ferraz Junior
Interface do jogo

Evento: CollidedWith
Comportamento: torna a bala invisivel e
acrescenta a label pontos

Evento: Dragged
Comportamento: Atualiza a posição da
nave no eixo X conforme a posição do dedo
Evento: Touched
Comportamento: Reposiciona o objeto ball
que representa o tiro e o torna visivel.
 Criando a interface

Inicie o App Inventor e crie um novo projeto. Nomeie

como SpaceInvaders,
 Criando a interface
Defina o Title da Screen1 como "SpaceInvaders".
 Criando a interface
A paleta Drawing and Animation oferece os objetos ball, Canvas e
ImageSprite. O objeto Canvas é um painel retangular bidimensional
sensível ao toque no qual o desenho pode ser feito e os sprites podem
ser movidos.
 Criando a interface
Este jogo terá dois tipos de sprites: uma
ImageSprite que será a nave espacial que
pode efetuar tiros que são representado
pelo componente ball e uma ImageSprite
discos voadores que devem ser abatido.
Para usar as imagens é necessario inserir-
las no projeto
Criando a interface
Criando a interface
Criando a interface
Criando a interface
Criando a interface
Criando a interface
Criando a interface
Criando a interface
Criando a interface
Criando a interface
 Movendo a nave

Neste jogo o jogador poderá movimentar a nave no

sentido horizontal, isso significa que a nave será
movimentada no eixo X somente.
Para efetuar esta programação acessaremos a área
blocks selecionaremos o objeto NaveS p r it e e
utilizaremos o evento When NaveSprite.Dragged.
Quando o jogador segurar a nave clicada e arrartar
atualizaremos sua posição em X seguindo o
movimento do seu dedo.
Movendo a nave
Movendo a nave
Movendo a nave
 Comportamento do Míssil

Existem vários comportamentos que desejamos atribuir ao míssil:

 Disparar a partir da nave;
 Detectar a colisão com o inimigo;
 Tornar o míssil invisível após a colisão
 Tornar o míssil invisível quando alcança a borda superior do jogo
 Comportamento do Míssil
Vamos começar usando o bloco a Screen1.initialize.
 Comportamento do Míssil
Quando a tela é inicializada, definimos propriedade de visibilidade
dele para False.
 Comportamento do Míssil
Quando a tela é inicializada, definimos propriedade de visibilidade
dele para False.
 Comportamento do Míssil

Quando tocamos a nave, queremos que o míssil seja lançado da

nave em direção ao inimigo. Para isso utilizaremos o evento
NaveSprite.Touched Quando a nave é tocada, torna-se o míssil
visível e define-se sua velocidade e direção.
A propriedade heading é um valor de 0 a 360 que indica a direção
que o sprite se move, sendo que:
 360 é para a esquerda;
 90 é para cima;
 180 é para direita;
 270 é para baixo.
A propriedade Speed é a velocidade medida em pixels/seg.
Comportamento do Míssil
Comportamento do Míssil
Comportamento do Míssil
Comportamento do Míssil
 Comportamento do Míssil

A última coisa que precisamos é programar o que acontece

quando o míssil atinge o inimigo.
Usaremos o evento Missil.CollidedWith. este evento é chamado
sempre que o missil colide com outro sprite. Já que o nosso
sprite nave esta fixo em Y na parte inferior da tela, o míssil
nunca colidirá com ele, mas apenas com o inimigo.
Na colisão faremos duas coisas:
 Acrescentar 1 ponto a pontuação;
 Tornar o míssil invisivel.
Comportamento do Míssil
Comportamento do Míssil
 Comportamento do Míssil
Se começou a testar o jogo, notou que uma vez que atirar o
míssil fica preso na parte superior da tela, assim não sendo
possível atirar novamente. Precisamos programa-lo para voltar
para a frente da nave a cada vez que atiramos.
Comportamento do Míssil
 Comportamento do Míssil

Você deve ter notado que, se não atingir o inimigo, o míssil

se move para a parte superior da tela e fica preso lá até que
você tente atirar novamente.
Para fazer com que o míssil desapareça quando atinge a
borda superior da nossa tela, é preciso usar o evento
Missil.EdgeReached que pode ter traduzido como borda
alcançada
Comportamento do Míssil
Comportamento do Míssil
 Programação do botão de reset
Às vezes, os usuários podem querer reiniciar o jogo e repor a sua
pontuação. Quando isso acontece, é preciso definir o marcador
como 0.
 Aumentando a dificuldade
Alterar a posição do inimigo
Vamos fazer o jogo um pouco mais difícil! Agora, quando o míssil
colide com o inimigo, vamos mudar a sua posição. O inimigo vai
manter o mesmo valor de Y e mudar somente o X. Podemos fazer
isso usando o bloco random localizado no grupo Math.
 Aumentando a dificuldade
Alterar a posição do inimigo
Para torná-lo ainda mais difícil, vamos também mudar a posição
do inimigo a cada ciclo do componente Clock1.