117
6.2. Controle da nave na horizontal e na vertical
Casa do Código
Já estamos viajando pelo espaço sideral!
Figura 6.9: Imagens de fundo rolando em parallax
6.2
Controle da nave na horizontal e na verti-
cal
Vamos criar uma nave controlável, inicialmente em um novo teste em branco, e depois juntando com o fundo em parallax. No pacote de download do livro, existe o arquivo nave.png (figura 6.10), com dimensões de 36 por 48 pixels.
Você pode procurar ou criar outra imagem, mas certifique-se de que tenha
fundo transparente.
118
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
Figura 6.10: Nave espacial controlável
Crie uma nova página para testarmos o controle da nave. Esta página
usará as classes Animacao, Teclado e Nave (a ser criada):
rq tstt
P t
t
tt s trátt
srt srssrt
srt srtssrt
srt srssrt
s s t ts
srt
rá r t t
srt
t
No JavaScript, temos o que já fizemos muitas vezes:
referenciar o canvas e o context;
instanciar as classes do game engine;
instanciar o sprite (no caso, a nave) e sua imagem;
aguardar a imagem carregar;
119
6.2. Controle da nave na horizontal e na vertical
Casa do Código
iniciar a animação com a nave como sprite.
s tt
r s ttts
r tt sttt
çã
r t t
r tt
rt s
r
sr
r tt t
rt
rrr r çã
t
r
A classe Nave receberá no construtor o context, o controlador do teclado
e a imagem para desenho:
rq s
t tt t
tstt tt
tst t
ts
rtt
tr t
sr t
No método atualizar, lemos o estado de cada seta do teclado e move-
120
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
mos a nave de acordo. Para as setas à direita e abaixo, tivemos que considerar o tamanho do canvas e descontar o tamanho da nave, para que não ultrapas-sasse a borda:
tr t
tstrss ts
ts ts
tstrss
ts tsttst tst
ts ts
tstrss ts
ts ts
tstrss
ts tsttst tst
ts ts
Observação
Aqui usamos quatro if, sem o uso do else, para permitir que mais
de uma seta possam estar pressionadas ao mesmo tempo. Isto nos per-
mitirá mover a nave na diagonal!
A nossa necessidade criou três atributos: x, y e velocidade. Vamos
iniciá-los no construtor:
t tt t
tstt tt
tst t
ts
ts
ts
ts
121
6.2. Controle da nave na horizontal e na vertical
Casa do Código
E setar valores adequados no código de teste, no evento onload da im-
agem, pois calcularemos a posição a partir das medidas da imagem e, por-
tanto, ela deve estar carregada:
rrr r çã
t
tr rt
rt
st t
st t
r
No método
desenhar,
copiaremos a imagem da nave sem
redimensioná-la:
sr t
tsttrts ts ts
tst tst
Por último, certifique-se de que, no arquivo teclado.js, temos os códi-
gos de todas as teclas de que precisamos:
ós ts q ã ts s q r ssárs
r
r
r
r
r P
Voilà! Nossa nave move-se em todas as direções, sem ultrapassar os lim-
ites do Canvas!
122
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
Figura 6.11: Controlando a nave pelas setas do teclado
6.3
Efetuando disparos
Agora a coisa vai começar a ficar divertida: nossa nave já se mexe, é hora de fazê-la disparar tiros!
123
6.3. Efetuando disparos
Casa do Código
Figura 6.12: Fazendo a nave atirar
Faça uma cópia do arquivo do teste anterior ( teste-nave.html) e
renomeie-a para teste-tiros.html. Logo antes do evento onload
da imagem, coloque o código que manda a nave atirar ao disparar a tecla
Espaço:
tã á r trr
tsrP t
trr
rrr r çã
t
Agora vamos criar o método atirar na classe Nave. Criar um tiro é
fácil, o problema é incluí-lo na animação de sprites. Não temos nenhuma
referência ao objeto animacao!
124
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
ã sqç ír út ét q rr tr
trr t
r t rtstt
r tr çã
Se você fez a lição de casa direitinho, poderia pensar: recebo pelo construtor! Sim, é uma grande ideia, e eu apoio. Receber as coisas pelo construtor é bem melhor do que fazer referência à variável animacao do aplicativo diretamente. E se eu tento reaproveitar esta classe onde não tenho esta variável?
Receber pelo construtor forçaria o aplicativo a fornecer uma
animação para a nave.
No entanto, pensando um pouco mais além, pode ser que eu tenha
dezenas (ou centenas) de variedades de sprites que precisam criar outros na animação. Por que não damos a todos eles uma referência à animacao? Basta abrir a classe Animacao e modificar seu método novoSprite:
rt tsrt
tssrtsssrt
srt ts
Agora qualquer sprite incluído tem uma referência ao objeto que controla
a animação! Não é legal?
Podemos voltar ao método atirar da Nave e usar o objeto que ele
recebeu:
trr t
r t rtstt
tsrtt
Enfim, vamos criar o esqueleto da classe Tiro:
rq trs
t rtt
125
6.3. Efetuando disparos
Casa do Código
tstt tt
rrtt
tr t
sr t
Onde o tiro vai aparecer? Na ponta da nave, você vai pensar. Dessa forma, é interessante recebermos a nave pelo construtor:
t rtt
tstt tt
ts
No método atirar, a nave passa a si mesma para o tiro se posicionar:
trr t
r t rtstt ts
tsrtt
Tendo uma referência à nave, podemos posicionar o tiro. Faremos isso