ét st t
rrrr
Por último, mande exibir as velocidades dos dois carros criados.
O
primeiro acelerou, e o outro não!
r s s
trtrrr rrt
trtr
trttr tt
29
1.4. Orientação a objetos com JavaScript
Casa do Código
A saída desse código é:
r
Sintaxe de ponto e de colchetes
Para referenciarmos atributos de um objeto em JavaScript, o mais
usual é usarmos a sintaxe de ponto, ou seja, usar um ponto entre o nome
do objeto e do atributo:
ttrt
Também é possível usar a sintaxe de colchetes, na qual podemos usar
strings para representar os atributos. O objeto torna-se uma espécie de
array associativo, sendo que cada elemento (atributo) é associado a uma
string específica, e não a um índice de posição:
ttrt
Objetos sem função construtora
O JavaScript oferece a sintaxe de chaves ( { e }) para criar objetos:
r t
trt r
trt r
t t
t t
Por exemplo, poderíamos criar um carro da seguinte forma:
30
Casa do Código
Capítulo 1. Fundamentos
r rr
r
rr t
ts
Nós usaremos essa forma algumas vezes no desenvolvimento do jogo.
Como, porém, seu projeto é orientado a objetos, pensando em classes, com
atributos e métodos definidos, daremos maior preferência às funções con-
strutoras.
O prototype (protótipo)
Declarar
métodos como funções anônimas dentro das construtoras tem
um preço: maior consumo de memória. Cada vez que executamos o constru-
tor, uma cópia da função anônima é criada na memória e cada instância terá sua cópia não somente do atributo, mas também da função:
t rrr
r ét çã ô
tsrr t
tst
Pensando nisso, o JavaScript traz o recurso do prototype (protótipo), que é um objeto associado a uma função construtora. Colocando os métodos neste
objeto, todas as instâncias usarão as mesmas cópias de cada método.
Vamos nos habituar a colocar a função construtora e o prototype de
uma classe em um arquivo separado, com extensão .js. A palavra-chave
prototype funciona como se fosse um atributo da função construtora:
rq rrs
31
1.4. Orientação a objetos com JavaScript
Casa do Código
çã strtr
t rrr
tsr r
ts
tst
Prtt s éts
rrrtt
rr t
tst
Escrevemos um pouco mais de código, porém até ganhamos um pouco
mais de legibilidade e organização: conseguimos enxugar a função construtora, e podemos ter o funcionamento completo de um carro em seu arquivo
específico para isto servem as classes! Para utilizar essa classe em uma página HTML, basta usar a tag <script> com o atributo src, referen-ciando o arquivo carro.js:
rq rttt
P t
t
tt rtttt
srt srrrssrt
srt
r rr rrr
rrrr
trtrrr rrt
srt
t
32
Casa do Código
Capítulo 1. Fundamentos
É isso! Com estes conceitos básicos bem fixados, vamos começar a apren-
der conceitos específicos de jogos. No próximo capítulo, vamos aprender uma das bases de um jogo, que consiste no loop de animação e nos sprites.
33
Capítulo 2
O loop de animação
2.1
Introdução e sprites
Chegou a hora de avançarmos um passo além de apenas desenhar no Canvas
e movimentar alguns objetos. Vamos desenvolver pequenos aplicativos e criar pequenas peças que, em algum momento, irão se juntar e tomar a forma de
um jogo!
Nossa abordagem será a seguinte:
Primeiro, sempre codificamos o aplicativo principal, que realiza um
teste nas classes a serem criadas.
Isso é importante para chegarmos a códigos claros e bem estruturados.
Ao desenvolver, sempre procuramos focar em um aspecto por momento e
abstrair (deixar para lá) os outros. O aplicativo de teste determina o que esperamos de nossas classes.
2.1. Introdução e sprites
Casa do Código
Em seguida, codificamos as classes e tentamos fazê-las responder como
queremos.
Nessa etapa, sempre surgirão modificações na forma como planejamos
inicialmente, o que vemos como algo natural. Refatorações (mudanças na estrutura do código sem alterar seu comportamento) serão rotina para nós.
Mais do que ensinar como se faz, pretendo apresentá-lo a uma forma
de trabalhar que deixará o resultado muito mais claro e organizado no
final. Você me agradecerá, garanto-lhe.
Temos de começar por algum lugar, então escolhi o que é mais comum a
todo jogo: o loop de animação. Criaremos uma classe responsável por con-
trolar esse loop.
Antes de começar, vamos ter em mente que problemas ela resolverá. Mas
fazer um loop de animação não é só chamar o método repetidamente?, você
dirá. Depende do que você quer fazer. Em um jogo:
a animação tem que ser parada e reiniciada em diversos momentos;
vários objetos serão animados em cada ciclo;
objetos podem ser incluídos e excluídos da animação.
Conceito de sprites
Aos objetos trabalhados dentro de um loop de animação, damos o nome
de sprites. Pense em um sprite como sendo uma imagem com fundo
transparente, que pode ser animada. Dessa forma, eles podem ser inseridos sobre o fundo principal do cenário.
36
Casa do Código
Capítulo 2. O loop de animação
Figura 2.1: Sprites
Sprites são criados e destruídos a todo momento. Por destruídos, en-
tenda não apenas morto, aniquilado, atingido, mas destruídos na memória