tem de incrementar a posição y:
tr t
ts ts
Já o método desenhar apenas desenha a imagem que foi recebida no
construtor:
sr t
r t tstt
r ts
tr ts ts t t
Já temos uma nave que atira (programada no capítulo anterior) e OVNIs
descendo no mesmo aplicativo (figura 7.2)!
7.3
Adicionando fundo em parallax
No capítulo anterior, criamos um fundo consistindo de várias imagens
em movimento, cada uma em velocidade diferente, criando um efeito que
135
7.3. Adicionando fundo em parallax
Casa do Código
chamamos parallax. Chegou a hora de integrar esse fundo ao nosso game.
Primeiro, faça uma cópia do arquivo teste-inimigos.html, dando-
lhe o nome teste-inimigos-e-fundo.html. Iremos fazer algumas al-
terações em determinados pontos.
No início do código, onde carregamos as imagens, adicione o carrega-
mento das três imagens de fundo:
s
r s
ssr s
s rr
r strs
strssr strs
strs rr
r s
ssr s
s rr
s s s
Agora temos cinco imagens no total, portanto temos que alterar a função
carregando para contar até 5. Uma variável total nos permitirá alterar
este parâmetro mais facilmente:
rrt çã
r rrs
r tt
t rr
rrs
rrs tt r
Precisamos adicionar os fundos à animação antes dos outros sprites, de
forma que eles sejam desenhados primeiro. Na seção onde inicializamos os
objetos do game engine e os sprites, antes da criação da nave, adicione o código:
136
Casa do Código
Capítulo 7. Criando inimigos
Prr s ts
r s
r tt
r t
r
s s s
r tt s
rt
r tt strs
rt
r tt s
rt
s trs srts
r
137
7.3. Adicionando fundo em parallax
Casa do Código
Figura 7.3: Cena com OVNIs, nave do herói e fundo rolando em parallax
Neste ponto, o fundo já se movimenta juntamente com a nave e os inimi-
gos (figura 7.3). A partir de agora, como trabalharemos sempre com um fundo rolando, não é preciso mais realizar a limpeza de tela a cada ciclo da animação, bastando apenas desenhar o fundo para cobrir a tela. Isso não trará
efeitos práticos mas economizará algum processamento. Por isso, vamos comentar
a linha que limpa a tela no método proximoFrame da classe Animacao.
rr t
Pss tr
ts rtr
t q t
tsr
Obs.: recomendo que você faça uma cópia do arquivo animacao.js
138
Casa do Código
Capítulo 7. Criando inimigos
especialmente para este tópico. Do contrário, testes anteriores serão afetados (figura 7.4). Para os próximos capítulos, você poderá usar a nova versão desse arquivo.
Figura 7.4: Mantenha a limpeza de tela para os testes anteriores, caso contrário serão prejudicados.
Experimente rodar o aplicativo. Já temos um protótipo de jogo quase
pronto!
7.4
Adicionando colisão
A parte que falta para termos um protótipo funcional é detectar a colisão entre os sprites mais exatamente, entre o inimigo e a nave (causando a morte do herói) e entre os inimigos e o tiro (causando a destruição do inimigo).
Precisamos, em algum ponto de nosso programa, chamar o método
processar do Colisor. Que tal se a Animacao chamar o colisor em
cada ciclo? Assim, teremos um controle mais geral, que ocorre em conjunto com o processamento dos ciclos de animação.
139
7.4. Adicionando colisão
Casa do Código
Indo mais além, a Animacao poderia manter uma lista de processamen-
tos a executar, dos quais um é o Colisor. Mais adiante, podemos adicionar Gravidade, TelaMovel e por aí vai. Façamos isto!
No construtor da classe Animacao, adicione o comando que inicia um
array vazio processamentos:
tsrssts
Crie o método novoProcessamento, para inserir novos processamen-
tos no array:
Prsst trsst
tsrsstssrsst
rsst ts
No método proximoFrame, vamos executar estes processamentos:
rr t
Pss tr
ts rtr
ts st s srts
r r tssrts
tssrtstr
ss s srts
r r tssrts
tssrtssr
Prssts rs
r r tsrssts
tsrsstsrssr
s ró
r ts
rqsttrt
rr
140
Casa do Código
Capítulo 7. Criando inimigos
Iniciando o teste
Já
temos
o
arquivo
teste-inimigos-e-fundo.html,
com
tudo o que foi feito até aqui.
Faça uma cópia e dê o nome
teste-colisao-inimigos.html.
Localize o ponto onde o colisor
é criado e acrescente-o como um processamento da animação:
r sr sr
srrt
Prsstsr
Os inimigos já estão sendo adicionados no colisor, porém faltam os tiros.
Eles são criados no método atirar da Nave. Modifique-o para que o tiro
criado seja incluído no colisor:
trr t
r t rtstt ts
tsrtt
tssrrtt
Mas... a nave tem referência ao colisor? Seria bom que cada sprite adi-
cionado no colisor tivesse uma referência a este (assim como a Animacao já faz). Modifique o método novoSprite do Colisor para fazer isso:
rt tsrt
tssrtsssrt
srtsr ts
141
7.4. Adicionando colisão
Casa do Código
Referências cruzadas
Vamos adotar a prática de, em qualquer objeto que agregue e processe
vários outros objetos ( Animacao, Colisor etc.), colocar neles uma
referência ao objeto agregador. Por exemplo:
srt sr
srrtrr
sr s s s srt
rt tsrt
tssrtsssrt
srtsr ts
Adaptando os sprites à interface do colisor
Neste ponto, se tentarmos rodar o aplicativo, a animação irá parar abrup-
tamente e teremos a seguinte mensagem no console ( Ctrl+Shift+J no