do computador. Por exemplo, um inimigo ou item que saiu da tela pode ser
destruído e recriado caso o herói retorne àquele ponto. Em JavaScript, não fazemos destruição de objetos (em outras linguagens isso é possível), apenas anulamos as variáveis que se referem a ele e o deixamos livres para o garbage collector apagá-lo da memória automaticamente.
Chega de conceitos! É hora de pôr a mão na massa.
37
2.2. Teste para a classe Animacao
Casa do Código
2.2
Teste para a classe Animacao
Figura 2.2: Animação controlada por classe JavaScript
Como prometemos, faremos um pequeno aplicativo de teste no qual defin-
imos como queremos mandar nas classes que criaremos. Como estamos
desenvolvendo para a web, nosso aplicativo será uma pequena página HTML
com alguns códigos JavaScript.
A página referencia dois arquivos JavaScript: animacao.js, que conterá
a classe que controlará o loop de animação, e bola.js, onde definiremos um sprite (uma bola que quica na tela).
rq tstt
P t
t
ttPrr st çã rtstt
srt srssrt
srt srssrt
38
Casa do Código
Capítulo 2. O loop de animação
s s t t
s
srt
q çã t
srt
t
Após o Canvas, a página executará um script de inicialização, cujo código vem a seguir. Como aprendemos no capítulo anterior, tópico 1.1, primeiro
temos de recuperar o Canvas e seu contexto 2d. Depois, criamos os primeiros sprites b1 e b2 para as bolas, indicando suas coordenadas na tela, e outras características como velocidade, cor e raio.
rês r s
r s ttts
r tt sttt
r s srts
r tt
r r
r
r tt
r
r
39
2.2. Teste para a classe Animacao
Casa do Código
Em seguida, vamos criar a nossa animação hipotética, incluir nela os
sprites e ligá-la, fazendo com que se inicie imediatamente:
r çã
r
rt
rt
r çã
r
Claro que, ao tentar abrir esta página no navegador, ela ainda não fun-
ciona. Tecle Ctrl+Shift+J no Google Chrome, ou Ctrl+Shift+K no
Firefox, e delicie-se com estas mensagens:
Figura 2.3: Erros no Console do Google Chrome na fase de escrita do teste A razão é que não temos ainda os arquivos animacao.js e bola.js.
Nós apenas definimos como queremos interagir com as classes que ainda não saíram do ovo.
E como queremos mandar nessas classes? Quanto à Bola, quero poder
criar quantas desejar, configurar posição, velocidades horizontal e vertical, raio e cor. Quanto à Animacao, no código estou dizendo que quero poder
incluir sprites à vontade e mandar iniciá-la no momento que eu achar opor-tuno.
40
Casa do Código
Capítulo 2. O loop de animação
2.3
Desenvolva a classe Animacao
O grosso do trabalho começa aqui. Já temos bem definido o que queremos
da classe neste ponto, mas agora falta explicitar como. Por mais desafiador que pareça, vamos por etapas bem pequenas ("baby steps), e logo teremos um resultado concreto.
Primeiro, faremos o esqueleto da classe, com sua função construtora e os
métodos que imaginamos
no teste:
rq s
t
rtt
rt tsrt
r t
Para incluir um sprite na animação, podemos iniciar um array vazio no
construtor e incluir nele os sprites:
t
tssrts
rtt
rt tsrt
tssrtsssrt
r t
Agora vamos criar o atributo ligado, que definirá se a animação pode
ou não correr.
Aproveitando o ensejo, já criaremos também o método
desligar:
41
2.3. Desenvolva a classe Animacao
Casa do Código
t
tssrts
ts s
rtt
rt tsrt
tssrtsssrt
r t
ts tr
tsrr
ã sqr st ír sr q
r rr ét
sr t
ts s
Em
ligar, chamo um novo método,
proximoFrame, que será o
coração da classe Animacao. Este método verifica se pode continuar e, se
puder, realiza um ciclo da animação e chama a si mesmo novamente (usando
o requestAnimationFrame do HTML5).
rr t
Pss tr
ts rtr
s t ss
tsr
ts st s srts
r r tssrts
tssrtstr
ss s srts
42
Casa do Código
Capítulo 2. O loop de animação
r r tssrts
tssrtssr
s ró
r ts
rqsttrt
rr
Aqui temos muitas coisas acontecendo. A cada ciclo de animação, deve-
mos:
limpar a tela: se não fizermos isso, a bola deixará um rastro (figura 2.4).
É preciso apagar os desenhos do ciclo anterior para desenhar a bola em
seu novo estado, na nova posição que vai atualizar e desenhar logo em
seguida. O método limparTela será implementado em breve;
atualizar o estado dos sprites: cada sprite será responsável por se posicionar e realizar seus próprios comportamentos. Deixamos a cargo da
Bola a função de calcular sua trajetória;
desenhar os sprites: somente depois que todos estiverem atualizados;
chamar o próximo ciclo da animação.
43
2.3. Desenvolva a classe Animacao
Casa do Código
Figura 2.4: Rastro deixado pela bola se não limparmos a tela a cada ciclo da animação
Temos uma implicação importante: todo objeto que quiser partici-
par do loop de animação (ou seja, que quiser ser um sprite), terá que
implementar os métodos atualizar e desenhar. Este é o conceito
de interface da Orientação a objetos: um conjunto de métodos que uma
classe deve implementar para poder interagir com outra.
Para chamar o próximo ciclo, não podemos simplesmente fazer:
rqsttrtsrr