A função de animação é chamada pelo JavaScript como uma função co-
mum, não como um método de objeto não podemos usar o this den-
tro dela, e fizemos isso várias vezes! Juro, quando fui fazer isto, quebrei a cabeça para descobrir por que não funcionava. A solução é referenciar o objeto em uma variável e chamar uma função anônima, que por sua vez chama
proximoFrame como um verdadeiro método do objeto:
44
Casa do Código
Capítulo 2. O loop de animação
r ts
rqsttrt
rr
Temos agora que implementar o método limparTela:
r t
r t tstt ó r tr srt
trt tst tst
Este método requer um objeto context do HTML5 Canvas, portanto
vamos recebê-lo no construtor:
t tt
tstt tt
tssrts
ts s
Temos então que passá-lo no código do aplicativo:
r çã
r tt
Procure fazer com que uma classe receba de fora e guarde em atribu-
tos tudo que ela precisa para executar seu trabalho, de forma que ela fique completamente desacoplada do meio externo. Depender diretamente da
variável context do aplicativo é mau negócio! Este princípio chama-se
injeção de dependências.
2.4
Implemente a classe Bola
Esta classe implementará a interface de sprites, portanto deverá ter os métodos atualizar e desenhar:
45
2.4. Implemente a classe Bola
Casa do Código
rq s
t tt
tstt tt
ts
ts
ts
ts
trts s rã
tsr
tsr
rtt
tr t
sr t
Em atualizar, colocamos o algoritmo que quica a bola nas bordas do
Canvas. Repare que sempre temos que descontar o raio da bola, pois as co-
ordenadas x e y se referirão ao seu centro (figura 2.5). Se o centro estiver fora do limite estabelecido, invertemos o sinal da velocidade (multiplicamos por
-1) para que a bola passe a ir em sentido contrário, tanto na vertical quanto na horizontal:
tr t
r t tstt
ts tsr ts
tst tsr
ts
ts tsr ts
tst tsr
ts
46
Casa do Código
Capítulo 2. O loop de animação
ts ts
ts ts
Figura 2.5: A posição da bola é calculada pelo seu centro, portanto os limites para quicá-la têm que descontar o raio.
Em desenhar, usamos o método arc do context. Também usamos
os métodos save e restore para poder configurá-lo com a cor da bola
e depois retorná-lo ao estado original. Caso não se lembre destes métodos, reveja a seção 1.2.
sr t
r t tstt
rr rçõs ts tt
ts
rr tt r
tt tsr
sr
tPt
trts ts tsr tP s
t
tr às rçõs trrs
trstr
47
2.4. Implemente a classe Bola
Casa do Código
O aplicativo está pronto! Abra-o no navegador. Se estiver usando o
Chrome, pressione Ctrl+Shift+J e digite no Console (para fazer isso no
Firefox, você deve instalar um plugin como o Firebug):
sr
A animação para! Agora faça:
r
Não é fantástico? Como exercício, crie mais objetos Bola com tamanhos,
cores e velocidades diferentes, e acrescente-os à animação. Você pode fazer isso no arquivo HTML ou diretamente no Console!
Aqui nós criamos uma primeira base para nosso jogo, que é o loop de
animação. No próximo capítulo, vamos aprender como é possível criar a in-
teração do usuário com o jogo.
48
Capítulo 3
A interação com o jogador
leitura apurada do teclado
Neste tópico, vamos tratar da interação do usuário com o jogo. Tratar eventos de teclado em JavaScript não é uma tarefa difícil, no entanto, há aspectos que precisam ser considerados, em se tratando de jogos.
Faremos uma revisão sobre os eventos de teclado e, em seguida, tratare-
mos dois tipos especiais de interações:
o jogador mantém uma tecla pressionada: muito comum com as setas
de movimentação, mas não se limita a estas. O jogo deve responder de
determinada maneira (por exemplo, movimentando o herói) enquanto
a tecla está pressionada e parar quando o jogador solta a tecla;
o jogador pressiona e solta rapidamente a tecla: são as teclas de disparo,
3.1. EventListeners e os eventos keydown e keyup
Casa do Código
com as quais a ação deve ocorrer uma única vez, no momento exato do
pressionamento. Se a tecla continuar pressionada, o jogo deve ignorar
seu estado.
Isto
tudo parece muito óbvio mas, como veremos, o modelo de eventos
do teclado em JavaScript é voltado para a digitação de caracteres (lembre-se, a linguagem foi criada para páginas da web) e não nos permite tratar interações comuns em jogos com apenas um comando. Porém, a coisa também não é tão
complicada, requerendo apenas alguma codificação manual.
3.1
EventListeners e os eventos keydown e
keyup
Qualquer elemento em uma página da web pode ter ouvintes (listeners) de eventos. No caso dos eventos do teclado, o elemento deve ter o foco:
Figura 3.1: Cursor do teclado piscando no campo de busca. O foco do teclado pertence a ele neste momento.
50
Casa do Código
Capítulo 3. A interação com o jogador leitura apurada do teclado
Figura 3.2: Após alguns toques na tecla Tab, o foco vai para o botão Pesquisa Google e este fica destacado. O browser aguarda o usuário teclar Enter ou espaço para acionar o botão.
Um listener é uma função JavaScript que executa uma ação em resposta a
um evento. Essa função pode receber um parâmetro que é preenchido auto-
maticamente com dados sobre o evento ocorrido.