Post on 22-Apr-2015
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