leitura apurada do teclado
A função desenharPersonagem é a mesma criada anteriormente:
ss ró t s r
t srPrs
ttrt st st
ttts
A classe Teclado
Esta classe recebe um elemento qualquer da página no construtor e atribui a ele os eventos que vão registrar o estado das teclas em um array. O método pressionada devolve o valor true caso a tecla conste como pressionada
no momento:
rq ts
ós ts q ã ts s q r ssárs
r
r
t t
tst t
rr ts rsss
tsrsss
str st s ts rr
r t ts
ttstr tt
trssst tr
ttstr tt
trssst s
rtt
rss tt
rtr tsrssst
57
3.3. Efetuando disparos detectando somente o primeiro keydown
Casa do Código
Abra a página e veja que o personagem move-se com muito mais suavi-
dade e fluência!
3.3
Efetuando disparos detectando somente
o primeiro keydown
Vamos dar um superpoder ao herói: atirar. Neste ponto, para facilitar a nossa vida, vamos usar a classe Animacao e o conceito de sprites aprendidos anteriormente.
Que tal poder mandar o herói atirar da forma mostrada a seguir? Se a
classe Teclado sabe se uma tecla está pressionada, ela também pode saber
disparar uma ação única no momento do pressionamento!
tór
tsrP t
rtrr
Figura 3.5: Herói atirando
Vamos criar uma nova página. Os scripts bola.js e animacao.js
são os mesmos já criados. Certifique-se de ter uma cópia deles na pasta deste teste (ou linká-los corretamente em seu computador).
58
Casa do Código
Capítulo 3. A interação com o jogador leitura apurada do teclado
rq tsttt
P t
t
tt ró q trtt
srt srtssrt
srt srrssrt
srt srssrt
srt srssrt
s st t t
s
srt
st çr rr
srt
t
Veja como o script do teste é simples e conciso. Nesta altura, eu espero
sinceramente que você esteja entendendo o porquê de estarmos fazendo dessa forma. Criar uma nova ação, um novo personagem, um novo inimigo deverá
ser cada vez mais simples a partir de agora:
r s tttst
r tt sttt
r t t
r tt
srt r t r sr
s rtr
r r rtt t
r
r
rtr
59
3.3. Efetuando disparos detectando somente o primeiro keydown
Casa do Código
tsrP t
rtrr
r
Precisamos criar o método disparou na classe Teclado. Para que
ele funcione corretamente, é preciso registrar que determinada tecla foi disparada (para que os eventos keydown subsequentes não provoquem o disparo
novamente). Criamos mais dois arrays, um para registrar os disparos e outro para guardar as funções a serem executadas:
ós ts q ã ts s q r ssárs
r
r
r P
t t
tst t
rr ts rsss
tsrsss
rr ts srs
tssrs
çõs sr
tsssr
t
No evento keydown, verificamos se a tecla pressionada possui uma
função de disparo associada e se seu disparo já foi processado. A instrução this.funcoesDisparo[tecla] () ; executa a função guardada no array devido aos parênteses no final:
r t ts
60
Casa do Código
Capítulo 3. A interação com o jogador leitura apurada do teclado
ttstr tt
r t t r s í
trssst tr
srr st s r rr t
tssrt
tsrst
tsrst tr
tssrt
No evento keyup setamos o estado disparada para false, de modo a
tornar possíveis novos disparos:
ttstr tt
trssst s
tsrst s
Enfim, o método disparou necessita apenas guardar uma função de
disparo para uma tecla. O evento keydown está cuidando de tudo!
sr tt
tsssrt
Em caso de dúvidas, veja o novo código completo da classe Teclado:
rq ts rsã
ós ts q ã ts s q r ssárs
r
r
r P
t t
tst t
rr ts rsss
61
3.3. Efetuando disparos detectando somente o primeiro keydown
Casa do Código
tsrsss
rr ts srs
tssrs
çõs sr
tsssr
r t ts
ttstr tt
r t t r s í
trssst tr
srr st s r rr t
tssrt
tsrst
tsrst tr
tssrt
ttstr tt
trssst s
tsrst s
rtt
rss tt
rtr tsrssst
sr tt
tsssrt
É bastante abstrato, mas se conseguirmos programar de maneira mais
geral agora, teremos um game engine bastante robusto e prático para criar 62
Casa do Código
Capítulo 3. A interação com o jogador leitura apurada do teclado
novos jogos de maneira extremamente veloz!
Crie a classe Heroi como um sprite
Para nosso código funcionar, temos que criar o sprite do herói. Como
o sprite é responsável pelo seu próprio comportamento, ele deve receber o objeto que controla o teclado para poder decidir o que vai fazer em cada ciclo da animação.
O herói também deve ter o método atirar, chamado no teste.
rq rs
t rtt t
tstt tt
tst t
ts
ts
rrtt
tr t
sr t
trr t
No método atualizar, lemos o estado do teclado e movemos o person-
agem de acordo. Também não custa nada impedir que ultrapasse as bordas
da tela:
tr t
tstrss ts
ts
s tstrss
ts tsttst
ts
63
3.3. Efetuando disparos detectando somente o primeiro keydown
Casa do Código
No método desenhar... bem, eu vou continuar mantendo as coisas simples
e fazer um simples retângulo. No capítulo sobre spritesheets (4) a coisa vai ficar mais interessante, prometo!
sr t
tstttts ts
Agora, a parte mais interessante: fazê-lo atirar. Neste ponto, devemos ler novamente o estado do teclado para saber para que lado o tiro vai. Vamos
aproveitar a classe Bola que já temos:
trr t
r tr tstt
tr ts
tr ts
trr
trr r
tstrss
tr