O que você está construindo 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.

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

Habilidades úteis para o desenvolvimento de jogos futuro: 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

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

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

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 proprieda de para "Encha pai" e Altura propriedade a 300. Defina o BackgroundColor prop riedade to Black. ImageSprite 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. SaucerSprite O disco voador no nosso jogo Carregar a imagem pires e definir a Imagem propriedade para "saucer.png". BallSprite 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ôm etro propriedade para 3000. Arranjo Horizontal Traçado HorizontalArrangement1 Para conter Label1 e ScoreLabel Etiqueta Label1 Para conter a palavra "Score" Alterar Texto propriedade para "Score". ScoreLabel Para conter a pontuação numérica atual Alterar Texto propriedade para "0". Botão 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.

Movendo o foguete 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.

Programação Comportamento da bala  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.

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.

Programação do botão Reset À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.

Aumentando a dificuldade - Mudando a posição do disco 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:

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

Programa Completo