Com a construção do Space Invaders App você vai começar a prática com o uso de componentes de relógios e temporizadores, usando componentes de animação, como Sprites imagem e o Canvas, definindo a visibilidade, e detectar colisões em App Inventor. Você vai programar um aplicativo que possui um atirador cujo objetivo é atirar no disco voador na tela.

O que você está construindo

Conecte-se ao site da App Inventor e iniciar um novo projeto. Nomeie- SpaceInvaders , e também defina da tela título a "SpaceInvaders". Conecte-se a um dispositivo ou emulador.

Primeiros passos

Usando o componente do Relógio Usando Clock.Timer mover sprites Usando Sprite.Flung para mover um sprite Usando a detecção de colisão Definir a visibilidade de sprites

Habilidades úteis para o desenvolvimento de jogos futuro:

Para este jogo, você terá dois tipos de sprites: uma ImageSprite representado por um navio de atirador e discos voadores representados por um sprite bola. Baixe os arquivos de imagem para o seu foguete navio Sprite e Sprite disco voador.

Preparando-se

Use o designer de componente para criar a interface para SpaceInvaders . Quando terminar, ele deve ficar parecido com a próxima foto.

Configure os Componentes

Para criar essa interface, coloque os seguintes componentes para o Designer, arrastando-os a partir da paleta de componentes para o Viewer e definir as propriedades dos componentes, conforme descrito:

Tipo de componente Paleta de Grupo

O que você vai

nomeá-lo

Propósito do

Componente Ação

Tela Desenho e Animação Canvas1

O fundo que estaremos

colocando nossos

sprites em

Mude Largura propried

ade para "Encha pai"

e Altura propriedade a

300. Defina

o BackgroundColor pro

priedade to Black.

ImageSprite Desenho e Animação RocketSprite

O foguete no nosso

jogo

Carregar a imagem

foguete e definir

a Imagem propriedade

para

"rocket.png". Defina

o Y propriedade a 230.

Isto irá colocar o

foguete na parte

inferior da tela.

ImageSprite Desenho e Animação SaucerSprite

O disco voador no

nosso jogo

Carregar a imagem

pires e definir

a Imagem propriedade

para "saucer.png".

BallSprite Desenho e Animação Bala A bala do foguete.

Mude PaintColor a

Green e defina

o Radius propriedade a

8.

Relógio

Interface com o

Usuário Clock1

Usamos o relógio para

o seu método Timer

para mover o pires

Mude IntervaloDoCron

ômetro propriedade

para 3000.

Arranjo Horizontal Traçado HorizontalArrangement1

Para conter Label1 e

ScoreLabel

Etiqueta Interface com o Usuário Label1

Para conter a palavra

"Score"

Alterar Texto propriedade

para "Score".

Etiqueta Interface com o Usuário ScoreLabel

Para conter a pontuação

numérica atual

Alterar Texto propriedade

para "0".

Botão Interface com o Usuário ResetButton

Para reiniciar o jogo para

que o jogador pode jogar

de novo

Alterar Texto propriedade

para "Reset".

Agora que você tem todas as propriedades essenciais configuradas, sinta-se livre para

alterar as cores de todos os componentes que você deseja.

Neste jogo, o utilizador move o foguete de lado a lado. Isso significa que só vai mudar a direção X do sprite do foguete. Para fazer isso, vamos utilizar o RocketSprite.Dragged manipulador de eventos. Quando o foguete é arrastado, vamos ajustar sua propriedade X a ser o Atual X que arrastou o sprite.

Movendo o foguete

 Queremos que ela saia do foguete, colida com o disco voador, e seja invisível após a colisão e antes de sair do foguete.

Vamos começar usando o Screen1.initialize. Quando a tela é inicializado, vamos programar a bala para ser invisível. Fazemos isso definindo a propriedade visibilidade da bala para False.

Programação Comportamento da bala

Em seguida, queremos ter certeza de que a bala aparece novamente quando disparar a partir do foguete. Quando tocamos o foguete, queremos que a bala comece caminhando para o disco. Nós vamos fazer isso usando o RocketSprite.Touched manipulador de eventos. Quando o foguete é tocado, não só pretende definir o foguete a ser visível, mas também queremos definir a velocidade e a direção do foguete. A posição é um valor de 0 a 360 que indica que direção o sprite deve estar se movendo nesta direção: 0/360 é para a esquerda, 90 é para cima e 270 é para baixo. A velocidade é medida em pixels / seg.

A última coisa de que precisamos para o programa é o que acontece quando a bala atinge o Disco. Nós usaremos o Bullet.CollidedWith manipulador de eventos. Este evento é chamado sempre que a bala colide com outro objeto. O nosso sprite de foguete é preso a um Y na parte inferior da tela, a bala nunca irá colidir com o foguete e apenas com o disco. Na colisão queremos duas coisas aconteçam. 1º A pontuação deve aumentar em 1. 2º A bala deve tornar-se invisível.

Você deve ter notado que quando você atirar a bala, ela não aparece novamente. Precisamos programar a bala para voltar ao lugar na frente do foguete quando atirar. Podemos fazer isso usando o Bullet.MoveTo bloco.

Para fazer com que a bala desapareça quando atinge a borda superior da nossa tela, é preciso usar o Bullet.EdgeReached manipulador.

Às vezes, os usuários podem querer reiniciar o jogo e redefinir a sua pontuação. Quando isso acontece, precisamos definir o placar para 0.

Programação do botão Reset

Vamos fazer o jogo um pouco mais difícil! Agora, quando a bala colide com o disco, vamos mudar a localização do disco. O disco irá manter o mesmo valor de Y de modo que só vai ter que mudar o X. Podemos fazer isso usando os seguintes blocos:

Aumentando a dificuldade - Mudando a posição do disco

Para tornar ainda mais difícil, vamos também mudar a posição do disco quando o temporizador se apaga.

Programa Completo