r r
tt
stt trr t tr s rsr trrt
r trr r t ts
rr rç
r rr r trr
st
r s r s
rr
Vamos colocar isto em prática. Primeiro, guarde o momento inicial antes
de chamar a função de animação pela primeira vez:
t
r trr tt
r çã
rqsttrr
çã çã
t r
No início da função, obtenha o instante atual e calcule o tempo decorrido entre eles:
t r
t t
r r tt
rç
r rr r trr
Ao final da função, antes de chamar o próximo ciclo, guarde o momento
do ciclo anterior:
25
1.4. Orientação a objetos com JavaScript
Casa do Código
t r
rs stt r ró
trr r
rqsttrr
Agora podemos calcular o desclocamento da bola! Apague a linha que
aumenta x em 20 pixels:
st
sr s r rt
No lugar, calcule o deslocamento a partir da velocidade de 20 pixels por
segundo (ou outra que preferir):
sr s r s
r
rr
A bola agora move-se mais lentamente, pois agora estamos trabalhando
com pixels por segundo (antes eram 20 pixels por ciclo, e tínhamos inúmeros ciclos em um segundo). Para fazê-la mover-se mais rápido, basta aumentar o valor.
1.4
Orientação a objetos com JavaScript
Conceitos básicos
Não é intenção deste livro ensinar a teoria da orientação a objetos (O.O.), mas vou dar-lhe uma base para podermos usá-la com JavaScript. Esta não
é uma linguagem puramente O.O., no entanto, o jogo que criaremos, está
projetado dessa forma. Diferenciamos aqui projeto orientado a objetos (aplicado em nosso jogo) de linguagem orientada a objetos, que dá suporte total ao paradigma (não é o caso do JavaScript).
26
Casa do Código
Capítulo 1. Fundamentos
Imagine um jogo de carros de corrida. Todos os carros são padronizados
nas suas características, embora elas possam variar (dentro desse padrão).
Por exemplo, todos os carros possuem cor, velocidade máxima e velocidade
atual. Contudo, em um dado momento, cada carro possui valores diferentes
para estas características. O carro do jogador é vermelho, está a 150km/h e pode alcançar até 200km/h. Seu rival é azul, está a 170km/h e pode alcançar até 220km/h. As características que definem um carro no jogo são as mesmas, mas cada uma está preenchida com valores diferentes para cada carro.
Esse conjunto de características comuns a todo carro é o que chamamos
de classe. Quando falamos carro, referindo-nos a carros em geral, estamos falando de uma classe. A classe é o molde para a criação de objetos.
Cada carro é uma instância da classe. A instância é o objeto em si, um
objeto que pertence a uma classe. Quando falo do meu carro, estou falando de uma instância específica da classe carro. O carro do vizinho é outra instância.
Cor, velocidade atual e velocidade máxima são os atributos da classe, ou
seja, todas as instâncias os têm, mas cada uma possui valores próprios para esses atributos.
Cada carro executa as tarefas de acelerar, frear e virar. Estas tarefas são os métodos. Em programas orientados a objeto, é nos métodos que escrevemos
os códigos que realizam as tarefas fundamentais do programa. Eles trabalham com os dados nos atributos e podem alterar o estado do objeto.
Resumo de conceitos básicos de O.O.
Classe: um tipo de objetos determinado, composto por atributos
e métodos definidos;
Instância: cada objeto pertencente a uma determinada classe;
Atributo: cada propriedade dos objetos listada em uma classe;
Método: cada tarefa que um objeto de uma classe pode executar.
27
1.4. Orientação a
objetos com JavaScript
Casa do Código
Funções construtoras
Em linguagens O.O., como Java e C#, definimos classes explicitamente
(usando a palavra-chave class). Em JavaScript não há classes, mas pode-
mos usar funções construtoras para criar os objetos seguindo as classes que projetamos.
Uma função construtora é uma função normal do JavaScript, porém us-
ada com o propósito de criar objetos. No exemplo a seguir, a palavra-chave this recebe os atributos de um carro. A palavra cor, sozinha, se refere ao parâmetro recebido pela função, mas a construção this.cor cria um atributo cor no objeto:
rq rttst
srt
t rrr
tsr r
ts
tst
t
srt
Nós não podemos criar um carro simplesmente chamando:
tór
ã ç st
rrr
Quando chamamos uma função sem qualificar um objeto, o JavaScript
entende que estamos usando o objeto window. Assim, a palavra this no
corpo da função criará ou modificará os atributos neste objeto.
Para criar novos objetos temos de usar a palavra-chave new. Após a
função construtora, crie as variáveis meuCarro e oponente para referen-
ciar os novos objetos:
28
Casa do Código
Capítulo 1. Fundamentos
st ts ss rr
r rr rrr
r t rr
A expressão new Carro('vermelho', 250) cria um novo objeto e
executa nele a função construtora. Agora a palavra this se referirá a esse objeto!
Já os métodos, em JavaScript, são apenas atributos que referenciam
funções. Podemos, por exemplo, criar um método acelerar que aumenta
em 10 unidades a velocidade do carro:
t rrr
r s trts
tsr r
ts
tst
r ét
tsrr t
tst
Chamando o método acelerar através da variável meuCarro criada
anteriormente, esse método vai alterar o atributo velocAtual dessa instância, e não da instância oponente: