Continuemos explorando o que podemos fazer com objetos.
Voltamos para o programa que usamos no tutorial de funções.
Este programa tem esta função drawWinston que sabe desenhar Winston em certo X e Y.
E, aqui, chamamos drawWinston
4 vezes, cada uma com um conjunto
diferente de coordenadas X e Y.
Bem, você me conhece, quando vejo
estas quatro chamadas para drawWinton que se parecem tanto,
tudo que penso é: como seria melhor se pudéssemos
usar um loop e chamá-la apenas uma vez dentro do loop,
mudando X e Y em cada interação do loop.
Para isso, precisamos guardar esses X e Y em um vetor para poder iterá-lo.
Bem, temos dois conjuntos de valores.
Então, poderíamos ter 2 vetores. Um para a posição X e outro para a posição Y.
Nas posições X podemos ter 99, 294, 101 e 294,
e nas posições Y teremos 117, 117, 316, 316.
Ok, e agora podemos iterá-los com nosso loop for var i = 0; i < xPositions.length; i++
Para cada elemento de xPositions, dizemos
drawWinston ( xPositions[ i ], yPositions [ i ] );
Ok, vejamos se funciona... deletando...
Certo, funcionou!
Agora podemos apenas chamar essa única linha de código que
executa drawWinston, mas o faz para cada posição do vetor xPositions.
Podemos vir aqui e adicionar mais a isso ... dizendo...
tipo 10, então adicionamos 1, e então 1, e então 1, e então 100, e 1.
Agora... agora está ficando um pouco confuso e não estou gostando,
porque está bem difícil ver que X se relaciona com qual Y.
Eu quero poder apenas bater o olho e saber quais são os pares X e Y,
ao invés de ter que garantir que os estou alinhando corretamente, um sobre o outro
Preciso encontrar uma forma diferente de armazenar essas posições.
Uma ideia é que poderíamos armazená-las como objetos.
Pense nisso, cada posição é na verdade duas informações: o X e o Y.
Então, poderíamos ter um objeto com as propriedades X e Y,
e poderíamos ter um vetor -de objetos com todas essas posições X-Y.
Vamos fazer!
Vamos dizer var positions igual a um vetor.
Mas, cada elemento, ao invés de ser um número, será um objeto.
Aqui abrimos chave e vamos apenas dizer X:99, Y:117.
Ok, temos agora nossas posições aqui, e vamos adicionar outra aqui.
Certo, X deve ser 294, 117, e o terceiro será 101, 316, e o último é 294 e 316.
Ok! Agora, temos um vetor de objetos onde cada objeto tem propriedades X e Y.
Aqui em baixo, no loop for, mudamos apenas isso aqui para iterar por positions.length
Então passamos o objeto.
Agora estamos passando o objeto inteiro, mas queremos passar o X e o Y,
então precisamos de positions [ i ].X e positions [ i ].Y
Ta-da!
Agora podemos nos livrar destes vetores antigos confusos.
Ótimo, parece-me bem melhor e torna o código mais legível
e sempre que pudermos ter código mais legível, melhor.
E também está mais fácil adicionar.
Se quisermos adicionar um, só precisamos adicionar o par junto,
e aí podemos dizer X é 200, Y 200, nos dá um pequeno Winston aqui no meio.
Beleza.
Agora quero mostrar algo ainda mais sofisticado.
Percebe que nossa função aceita dois números e depois os usa.
Bem, poderíamos mudar nossa função para que espere um objeto
e depois pegue o X e Y do objeto,
o que significa que aqui embaixo só teríamos que passar o objeto.
Vamos tentar!
Passamos o objeto, agora não funciona.
Isso porque nossa função ainda espera dois objetos e está recebendo apenas um,
então vamos mudá-la
para dizer que recebe facePosition,
e agora deu erro porque faceX não está definido,
por que antes estávamos passando faceX como argumento, mas agora ele não existe,
temos apenas um objeto.
O que podemos fazer, é salvar a posição X de um objeto dentro da variável faceX.
Estamos dizendo que temos este objeto, sabemos que ele tem uma propriedade X,
então vamos apenas guardá-la na variável faceX.
Podemos fazer o mesmo com Y, então faceY = facePosition.y;
Ta-da!
E então, o resto da função usa faceX e faceY.
Agora, temos que ter certeza que soletramos corretamente,
se escrevermos xx, não vai funcionar, porque não é o que está aqui embaixo
no nosso vetor de objetos. Precisa bater.
Isso é bem legal, porque agora você pode ter um vetor de objetos,
pode ter funções que recebem objetos
e você vai ver que seus programas ficarão poderosos com essa estrutura de dados.
Especialmente porque é tão comum querer junto um par X e Y.
Será especialmente útil nos seus programas de desenho e animação aqui.
Então, vá fundo e se divirta!
[Legendado por: Fred Guth] [Revisado por: Alef Almeida]