PROGRAMAÇÃO ORIENTADA A
OBJETOS COM JAVASCRIPT (E P5)

DESENHANDO DOIS CARROS DE CORRIDA

Definimos aqui a posição inicial no eixo X para cada um dos dois carros

Aqui desenhamos o primeiro carro

Aqui desenhamos o segundo carro

Aqui movimentamos os dois carros

TRANSFORMANDO OS CARROS EM OBJETOS

Nesta versão, os carros passam a ser objetos (carroA e carroB), e suas propriedades de posição inicial no eixo X, velocidade, e nome, passam a fazer parte do próprio objeto

Aos desenhar os carros, passamos a usar a variável de posição que está guardada dentro de cada objeto

O nome do carro também está guardado dentro do próprio objeto

Cada carro guarda suas próprias propriedades e dados

O movimento é acrescido pela velocidade definida em cada objeto

OS RESULTADOS FORAM IGUAIS

DEFININDO DOIS OBJETOS AUTÔNOMOS

Incluímos uma função aos carros, que ficará responsável por resolver a sua movimentação, para que cada carro resolva suas próprias questões

Usamos this.propriedade para informar que se trata da variável do próprio objeto, e não de uma variável global, ou a propriedade de um outro objeto

O segundo carro também recebe a mesma função

O movimento passa a ser acionado pela função anda() de cada objeto

OS RESULTADOS FORAM NOVAMENTE IGUAIS

INCLUÍNDO AINDA MAIS AUTONOMIA

Incluímos agora uma função desenha() que será responsável por desenhar o próprio carro na tela

A função desenha() utilizará os dados do próprio objeto para desenhá-lo

A função desenha() passa a ser acionada em cada objeto para fazê-los aparecerem na tela, assim como a função anda() processa seus movimentos

Repare como o código de draw() ficou muito mais simples e legível quando todas as ações e dados passaram para os próprios objetos

OS RESULTADOS PERMANECEM IGUAIS

TRAZENDO FLEXIBILIDADE

Para dar mais flexibilidade e permitir a mudança da posição vertical, tiramos esse dado hard coded na função rect(), e incluímos uma nova propriedade y

A posição vertical de cada carro agora fica definida aqui, em uma variável

Modificamos a posição vertical e a posição inicial dos carros, sem nenhum esforço

O nome do carro ficará a 20 pixels acima do próprio carro, usando também y

A cor também ficará em uma variável cor, e não mais hard coded na função desenha()

A variável cor é aplicada aqui para desenhar o carro com a cor especificada

Essas mudanças permitiram que a função desenha() nos dois carros fossem absolutamente idênticas

Criamos uma variável para controlar se o carro deve andar, ou deve ficar parado

Esta variável estabelece a condição para que o processamento do movimento seja realizado, ou não

O segundo carro também possui todas as mesmas propriedades e funções

Criamos uma rotina aleatória que pode fazer o segundo carro desligar

OS RESULTADOS SÃO FÁCIES DE SEREM ALTERADOS

TRAZENDO ALEATORIEDADE

Criamos valores aleatórios para a velocidade do carro, a posição inicial em X, e a posição vertical

A velocidade é no mínimo 2, mas pode chegar a 7, a posição inicial em X varia entre 0 e 100, e a posição vertical varia entre 30 e 400

Também criamos valores aleatórios para os três canais de cor RGB, que variam entre 0 e 255 cada, produzindo cores aleatórias para os carros

As cores em canais separados são aplicadas assim pelo P5

O segundo carro recebe exatamente as mesmas características

Apenas os nomes continuam hard coded

A INICIALIZAÇÃO DO OBJETO FICOU AUTOMÁTICA

AUTOMATIZANDO A INICIALIZAÇÃO DOS OBJETOS

Primeiro criamos uma Array que guardará vários objetos de forma indexada

Depois definimos a quantidade de carros a serem gerados automaticamente

(isso será interessante no futuro)

Aqui começamos um loop para criar cada objeto carro dentro da Array

No lugar de carroA ou carroB, usaremos uma Array, e eles chamarão varioscarros[0] e varioscarros[1]

O nome do carro também será automatizado, incluíndo a própria variável do loop

Vamos automatizar o acionamento das funções desenha() e anda() em todos os carros, também através de um loop

Acionamos as funções nos referenciando aos carros através da Array varioscarros[]

Não podemos esquecer de mudar a referência para acionar uma eventual parada aqui também

Mas é aqui que está a grande vantagem em se fazer todo este esforço com programação orientada a objetos

Aumentamos o número de carros alterando apenas um valor

Como eles se comportam de forma autônoma, e são acionados por loops, todos irão ser criados e desenhados normalmente

AGORA ISSO PARECE MUITO ÚTIL

SIMPLIFICANDO O PROCESSO

Podemos criar um objeto modelo, e tirar cópias independentes deste modelo original

Para isso, primeiro criamos o modelo como um objeto normal

Repare que por ser um modelo, não há como parametrizar o nome do objeto diretamente, como fizemos antes

Ele receberá um nome genérico inicialmente

Aqui temos uma mudança importante:

Como todos os carros serão uma cópia deste modelo, e o código dos carros, como era antes, gerava um valor aleatório para estes dados, ao tirarmos as cópias, todos virão com os mesmos valores gerados no modelo

É necessário uma função para substituir esses valores com novos dados aleatórios

Utilizamos um operador ... conhecido como Spread, para copiar todas as propriedades de carro como um novo objeto dentro de varioscarros[]

Aqui randomizamos todas as propriedades de cada carro com a função inicializa()

E aqui definimos qual é o nome de cada carro

APERFEIÇOANDO OBJETOS

Criamos uma variável global para registrar quem será o carro que vencerá a corrida

Ao andar, se um carro ultrapassar os 600 pixels em X primeiro (não havendo nenhum outro registro em ganhador) ele registrará sua vitória

Repare que os próprios carros monitoram essa condição, e não há um código central que fica verificando quem é o ganhador

Como isso agora é parte do modelo (classe), todas as cópias (instâncias) receberão o aprimoramento

Se o carro for o ganhador, ele mesmo fará um registro na tela com seu nome

Quando passarem de 800 pixels em X, os carros desligam seus motores e param

REAPROVEITAMENTO

ELA É ÚTIL QUANDO TIVERMOS ELEMENTOS QUE SE MULTIPLICAM, MAS QUE POSSUEM AUTONOMIA E CARACTERÍSTICAS OU COMPORTAMENTOS INDIVIDUAIS

PROGRAMAÇÃO ORIENTADA A OBJETO É UM PARADIGMA DIFERENTE DE PROGRAMAÇÃO

QUANDO BEM USADA, ELA DEIXA SEU CÓDIGO MAIS LEGÍVEL E MAIS COMPREENSÍVEL

ELA PODE SIMPLIFICAR A CONSTRUÇÃO DE ALGUMAS COISAS, MAS PODE SER MUITO COMPLICADA PARA FAZER ALGO SIMPLES... VOCÊ PRECISA CONSIDERAR SE DEVE USÁ-LA

SERÁ COMUM ELA SER ARTICULADA ATRAVÉS DE ARRAYS COM MUITOS OBJETOS COPIADOS DO MODELO

COPYRIGHT © 2023
GUILHERME RANOYA