stringUnica, que gerará uma string para o sprite a partir dos dados de seus retângulos de colisão:
str tsrt
r str
r rts srtrtss
100
Casa do Código
Capítulo 5. Detecção de colisões
r r rts
str rts
rts
rtsrr
rtstr
rtr str
Acompanhe a nova implementação do método processar, acrescen-
tando os novos testes. Iniciamos com um objeto vazio e, a cada verificação, geramos uma string para cada sprite, verificamos se seus arrays já existem e se já foi testada essa colisão. Caso não, nós a testamos e a registramos:
rssr t
t
r sts t
r r tssrts
r r tssrts
ã r srt s
t
rr strs ús r s ts
r tsstrtssrts
r tsstrtssrts
rr s rrs s ã str
sts sts
sts sts
st rtçã
sts
sts
strr sã
tststrstssrts
tssrts
101
5.5. Melhorando o código
Casa do Código
str tst
stss
stss
Se você rodar o programa agora, verá que reduzimos para dois PÁ! por
colisão, pois são duas bolinhas respondendo.
Um tratador geral de colisões
Por que somente as bolinhas (sprites) podem responder à colisão? Há
casos, por exemplo, em que eu quero uma resposta única e não é necessário que os dois objetos respondam. Que tal poder fazer:
tór
srr tsrt srt
sst ú
O atributo aoColidir seria uma função de callback executada em toda
e qualquer colisão. Esta função receberia como parâmetros os sprites que
colidiram.
No construtor da classe Colisor, inicie o atributo aoColidir com
null, somente para documentá-lo:
t sr
tssrts
tsr
No método testarColisao, no ponto em que as mensagens são envi-
adas, acrescente a chamada a esse callback. Usamos um if para verificar se foi atribuída uma função:
102
Casa do Código
Capítulo 5. Detecção de colisões
tsrtsrts rts
s s tás
srtsrt
srtsrt
rtr r
tsr tsrsrt srt
ã rs trr r ts s rtâs
r ss
No aplicativo de teste, logo após a criação do colisor, podemos atribuir a seguinte função:
r sr sr
srrt
srrt
srr ts s
rtP
E o método colidiuCom da Bola ficará com o corpo vazio (por en-
quanto):
tsrt
Neste ponto, temos apenas um PÁ! para cada deslocamento. Lembre-se
de que as bolinhas continuam sua trajetória em linha reta e provocam novas colisões enquanto passam uma pela outra.
Fazendo os sprites quicarem
Se fizermos as bolinhas quicarem uma na outra, resolvemos completa-
mente o problema do excesso de colisões. O segredo, aqui, é verificar qual 103
5.5. Melhorando o código
Casa do Código
bolinha está em que lado, e fazer com que passe a ir nesse sentido (não importa em que sentido esteja indo). A figura 5.8 representa isso na horizontal: Figura 5.8: O sprite que está à esquerda vai para a esquerda, e o que está à direita vai para a direita
O mesmo vale para a vertical:
Figura 5.9: O sprite que está acima vai para cima, e o que está abaixo vai para baixo
104
Casa do Código
Capítulo 5. Detecção de colisões
Faremos isto no método colidiuCom da classe Bola. Para forçar a
bola a ir para um determinado lado, obtemos
os módulos das velocidades
com Math.abs e colocamos um sinal negativo nos casos em que a velocidade
passa a ser negativa (para esquerda e para cima):
tsrt
ts srt st sqr
ts tsts
s
ts tsts
ts srt st
ts tsts
s
ts tsts
Temos agora uma única mensagem PÁ! por colisão. Se você quiser ver
apenas as bolinhas quicarem, basta comentar o alert ou simplesmente re-
mover o tratador geral:
st ó t r çã
srr ts s
rtP
Aqui, as possibilidades são infinitas. No decorrer do desenvolvimento de
nosso jogo, faremos os objetos atingidos por tiros sumirem, criaremos novos sprites (explosões), aumentamos indicadores na tela (coleta de item) etc.
No próximo capítulo, faremos as primeiras experiências para o jogo de
nave ilustrado no primeiro capítulo.
105
Capítulo 6
Iniciando o desenvolvimento do
jogo
A partir deste ponto daremos início ao desenvolvimento de nosso jogo de
nave. O game engine ainda terá muitos acréscimos e melhorias, conforme
formos precisando de novos recursos. Em algum momento, ele ficará maduro
e pronto para uso, mas minha ideia é mostrar como ele pode sempre continuar evoluindo conforme vamos desenvolvendo jogos com ele.
6.1
Animação de fundo com efeito parallax
A primeira coisa que faremos é o fundo. Se você ainda não fez o download
dos arquivos deste livro, faça em http://github.com/EdyKnopfler/games-js/
archive/master.zip, pois usaremos as imagens contidas ali.
6.1. Animação de fundo com efeito parallax
Casa do Código
O cenário do jogo terá o seguinte aspecto, em resolução de 500 por 500
pixels:
Figura 6.1: Cenário do jogo de nave
O fundo, no entanto, será composto por 3 imagens separadas: uma para
o gradiente, outra para as estrelas e outra para as nuvens. Estas duas últimas terão fundo transparente, para podermos encaixar umas sobre as outras, como camadas:
Figura 6.2: Combinando os elementos do fundo
108
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
Cada imagem possui 500 pixels de largura por 1000 pixels de altura (por-
tanto, o dobro da área do jogo). Elas rolarão pelo cenário a velocidades diferentes, criando um efeito denominado parallax (paralaxe):