Para associar um listener a um elemento da página, usamos o método
addEventListener:
tór
r ttt
tstrt
trtrt
çõs rsst t ã q
Em JavaScript, são três os eventos associados ao teclado:
keydown: ocorre quando uma tecla é pressionada (abaixada). Se o
usuário a mantiver segurando, o evento é disparado repetidamente.
keypress: ocorre logo após keydown, no caso de a tecla ser de caractere. Se a tecla continuar pressionada, o browser dispara os eventos
alternadamente: keydown-keypress-keydown-keypress-etc.
keyup: ocorre uma única vez, quando uma tecla é solta.
51
3.1. EventListeners e os eventos keydown e keyup
Casa do Código
Figura 3.3: Tecla mantida pressionada. O computador produz um caractere,
faz uma pausa, e dispara outros em sequência.
Para o desenvolvimento de jogos, somente os eventos keydown e
keyup serão necessários. Tudo o que nós precisaremos saber serão os
momentos quando uma tecla é pressionada e quando é solta, para poder
disparar ações ao pressionar ou detectar se uma tecla está ou não pres-
sionada. O evento keypress é específico para tratar digitação de carac-
teres.
Seria tudo muito maravilhoso se pudéssemos codificar nossas ações dire-
tamente no evento keydown! No entanto, o resultado ficaria horrível. O modelo de eventos para a digitação de caracteres (figura 3.3) não serve para movimentar personagens. Já vi alguns joguinhos de tutoriais na internet serem feitos dessa maneira. Faça um teste e comprove por si mesmo:
rq ttstt
P t
t
ttt rs tt
s st t t
s
srt
trçã t q
srt
52
Casa do Código
Capítulo 3. A interação com o jogador leitura apurada do teclado
t
Agora iremos criar um listener para o evento keydown, que desloca um
personagem para a direita ou para a esquerda. As teclas de seta são reconhecidas através da propriedade keyCode do objeto evento, recebido como
parâmetro.
Na tag <script>, que vem logo após o Canvas, digite:
rês s
r s tttst
r tt sttt
Psçã rs
r s
srPrs
ttstr tt
t t r sqr
s
srPrs
s t t r rt
s
srPrs
rs ã t sát s
t srPrs
ttrt st st
ttts
Abra a página no browser e mova o retângulo com as setas direita e es-
querda. Perceba que, ao iniciar o movimento para algum lado, ocorre uma
pausa após o primeiro deslocamento, para depois ele ocorrer normalmente.
53
3.1. EventListeners e os eventos keydown e keyup
Casa do Código
Figura 3.4: Nosso herói parece que está manco...
Não ficou bom, não é verdade? Mas podemos aprender muitas coisas
debruçando-se sobre este trecho:
ttstr tt
t t r sqr
s
srPrs
s t t r rt
s
srPrs
Primeiro, quero ouvir eventos do teclado ocorridos em todo o docu-
mento. Portanto, adiciono o listener ao elemento document.
A function recebeu um parâmetro de nome evento (posso dar
qualquer nome para ele). Esse parâmetro recebeu do JavaScript auto-
maticamente um objeto com propriedades relacionadas ao evento.
A propriedade keyCode desse objeto contém um valor único para
cada tecla. Não é difícil descobrir os códigos fazendo uma rápida
pesquisa na internet, ou criando um pequeno programa para esse fim.
54
Casa do Código
Capítulo 3. A interação com o jogador leitura apurada do teclado
3.2
Detectando se uma tecla está ou não pres-
sionada
Como aprendemos (e comprovamos, caso você tenha digitado o código an-
terior), o modelo de eventos de teclado do JavaScript é eficaz para tratar digitação, mas completamente bizarro para jogos. Como não há nenhum co-
mando para eu perguntar: a tecla tal está pressionada?, tenho que manter um registro de teclas pressionadas manualmente. Para facilitar, seguiremos o modelo de criar uma classe para tratar deste problema.
Teste da classe Teclado
Criemos uma página semelhante à anterior, mas onde nosso corajoso
herói será controlado de maneira mais eficiente. Imagine podermos fazer:
tór
r t t
trss
s
Bem, então... façamos! Repare na simplicidade com que queremos con-
trolar o teclado. Delegamos à classe Teclado a responsabilidade de saber se determinada tecla está ou não pressionada.
rq tsttt
P t
t
ttt rs ss rttt
srt srtssrt
s st t t
s
srt
55
3.2. Detectando se uma tecla está ou não pressionada
Casa do Código
q rá tr t s r
srt
t
O JavaScript conterá partes bem parecidas com o do exemplo anterior,
mas introduzimos aqui um loop de animação. É ele que vai avaliar constan-
temente o estado de determinadas teclas.
Primeiro referenciamos o Canvas normalmente:
r s tttst
r tt sttt
Em seguida, definimos a posição inicial do personagem e mandamos de-
senhar:
r s
srPrs
Agora vamos criar o controlador do teclado. Quero passar para ele o ele-
mento da página onde os eventos serão ouvidos (no caso, document):
r t t
O loop de animação será bem básico, por enquanto através de uma sim-
ples função. Nesta função, primeiro lemos o estado das teclas que queremos e mudamos a posição do personagem de acordo. Em seguida, nós o desenhamos e chamamos o próximo ciclo:
rqsttrr
t r
trss
s
s trss
s
srPrs
rqsttrr
56
Casa do Código
Capítulo 3. A interação com o jogador