Orientação a objetos - Parte 1: Classes

O desenvolvimento de jogos se dá muito bem com a orientação a objetos. Nesse post vamos discutir objetos com Javascript e considerar os pontos fortes dessa abordagem de programação.

Conceito de objeto

Na programação, um objeto é uma variável que possui características e pode executar ações. Em muitas literaturas sobre a programação orientada a objetos (POO daqui pra frente) o exemplo mais comum é o de um carro, que possui cor, número de vagas e velocidade máxima (características), e pode acelerar, frear, acender os faróis e buzinar (ações).
Chamamos de atributos ou propriedades as características do objeto. Já as ações são conhecidas por métodos. Antes de existir um objeto existe uma classe, que é como  uma estrutura geral, um esqueleto. Então, em javascript, podemos criar a classe carro da seguinte maneira:

/* Classe carro */
/* Construtor da classe recebe a cor, vagas e velocidade máxima */
var Carro = function(cor, vagas, velocidade) {
  /* Atribui os valores passados */
  this.cor = cor;
  this.vagas = vagas;
  this.velocidadeMaxima = velocidade;

  /* Define o estado atual do farol e da velocidade */
  this.farois = false;
  this.velocidadeAtual = 0;
}

Carro.prototype = {
  /* Aumenta a velocidade em 1Km/h */
  acelerar: function() {
    this.velocidadeAtual++;
    return this.velocidadeAtual;
  },

  /* Reduz a velocidade em 1Km/h */
  frear: function() {
    this.velocidadeAtual--;
    return this.velocidadeAtual;
  },

/* Acende os faróis */
  acenderFarois: function() {
    this.farois = true;
    return this.farois;
  },

/* Apaga os faróis */
  apagarFarois: function() {
    this.farois = false;
    return this.farois;
  }
}

Uma classe é como um dicionário, que possui várias palavras. Sabemos que um texto é formado por palavras, mas um dicionário, apesar de ter praticamente todas as palavras conhecidas, não é um texto, pois as palavras não estão combinadas de modo que passem uma informação.

Já o objeto, que deriva da classe, é como um livro e, aí sim, representa alguma coisa. Dada a classe Carro (perceba a letra maiúscula. Serve para distinguir a classe de uma variável qualquer), podemos instanciar vários objetos, ou, vários carros, como no exemplo a seguir:

var meuCarro = new Carro('red', 4, 120);

var seuCarro = new Carro('azul', 4, 140);

Usamos a palavra new para instanciar (criar na memória) o objeto baseado na classe Carro.

Vamos testar esse código usando o console do navegador (vou usar o Google Chrome aqui). Digite esse código entre as tags <script></script> do nosso código-base e abra no navegador. A tela estará em branco mesmo. Tecle F12 ou CTRL+ SHIFT + I para abrir as ferramentas do desenvolvedor. Na tela que abrir, caso não esteja sendo exibido o console, pressione ESC.

Volte ao arquivo e, depois de instanciar os dois carros, digite o código:

console.log(meuCarro, seuCarro);

Salve e volte ao navegador. Esse comando envia a saída do código para o console do navegador e é muito usado para debug (depuração, ou identificar as ações do código, reproduzir os erros, etc).

Podemos agora enviar comandos ao navegador e manipular nossos objetos. Perceba que, no Console, existe um prompt (o sinal >). Digite ali meuCarro e pressione ENTER.

Vamos acelerar nosso carro usando meuCarro.acelerar().

E de novo...

E de novo...

O velocímetro está subindo. Digite agora seuCarro e confira a saída. E agora digite meuCarro e também confira. O carro vermelho está em movimento, o azul não. Os carros são instâncias da mesma classe (Carro), mas suas propriedades não se confundem. Cada carro tem seu próprio espaço na memória.

Em um jogo, podemos dizer que ao apertar a tecla ESPAÇO, o carro acelera e, ao soltar a tecla, ele freia. Iremos implementar isso num outro momento.