Função que movimenta a raquete oponente | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

No vídeo que explica a criação da raquete do oponente (primeiro vídeo da Aula 04), o professor coloca uma função sem explicar o porquê dos elementos dela. Eu estava evoluindo bem nas lições, mas quando cheguei nessa explicação acabei empacando e estou há horas tentando entender ela sem conseguir. É posto que:


function movimentaRaqueteOponente() {
    velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento / 2 - 30;
    yRaqueteOponente += velocidadeYOponente
}

Não consigo entender porque subtrair isso tudo aí do y da Bolinha. Não entendo também porque foi usado Comprimento e não Altura. Fiquei muito muito confuso. Na minha cabeça, se fôssemos replicar o que foi feito no Scratch, teríamos algo simples como:

function movimentaRaqueteOponente() {
    yRaqueteOponente = yBolinha - raqueteAltura / 2 + 30;
}

Se alguém puder me explicar, fico muito grato. Estou há muito tempo nisso, sem conseguir prosseguir o curso pois quero muito entender. Outra coisa que fiquei pensando é que a velocidade em si da raquete não muda. A posição muda, mas a velocidade não. Assim como a velocidade da bolinha está sempre em 6, a raquete fica constante. Então por que chamaram de velocidadeYOponente, se a velocidade no eixo vertical é constante?

Oi, Eduardo! Tudo bom contigo?

Desde já, agradeço a paciência em aguardar uma resposta!

Quando estamos estudando, é comum que nos deparemos com assuntos que exigem um pouco mais da gente. Com os primeiros passos no universo da programação, isso não poderia ser diferente; aos poucos, conforme vamos nos aprofundando, passamos a compreender melhor a lógica por trás das coisas.

A movimentação da raquete do oponente pode ser, em partes, complexa. Então, vamos juntos nessa para entender como isso ocorre?

O p5.js possui um sistema de coordenadas um pouco diferente da Matemática. Compreender como os pontos estão dispostos na tela irá auxiliar no entendimento da movimentação da raquete do oponente. Então, trago aqui um artigo bem bacana da Alura que comenta sobre essa questão, para acessá-lo, basta clicar no link abaixo:

P5 JS: Plano cartesiano

Mas afinal, como `movimentaRaqueteOponente()` funciona?

Para que a bolinha não “escape” do oponente, ele, por sua vez, precisa alcançá-la. Por conta disso, o objetivo da função movimentaRaqueteOponente() é criar uma movimentação para a raquete do oponente que tenha como principal característica acompanhar o movimento da bolinha, ou seja, se a bolinha faz uma movimentação com direção para cima, a raquete se moverá para cima, se a bolinha faz uma movimentação com direção para baixo, a raquete se movimenta para baixo.

Para um melhor entendimento do que está ocorrendo, podemos substituir a variável velocidadeYOponente por deslocamentoYRaqueteOponente, pois o que de fato altera-se no jogo é a posição vertical da raquete.

Sabendo as motivações por trás da função, precisamos, agora, compreender as variáveis utilizadas e seus significados:

yBolinha : é a posição vertical do ponto central da bolinha;
yRaqueteOponente : coordenada correspondente à parte superior da raquete do oponente. No p5.js, para a formação de um desenho, como um retângulo, precisamos passar os pontos iniciais. Neste caso, yRaqueteOponente é este ponto inicial;
raqueteComprimento : variável que armazena o tamanho da raquete.

Sabendo isso, podemos pensar sobre o deslocamento da raquete, conforme a movimentação da bolinha. Se o objetivo é acompanhá-la, poderíamos fazer com que a variável deslocamentoYRaqueteOponente receba o valor atual de yBolinha. Com isso, teríamos algo assim:

function movimentaRaqueteOponente(){
  deslocamentoYRaqueteOponente = yBolinha 
  yRaqueteOponente += velocidadeYOponente; 
}

No entanto, ao testarmos o código acima, percebemos que ele, na realidade, ele não funciona. Os valores de yRaqueteOponente passam a ser tão altos que ultrapassam os valores limites da tela do p5.js, portanto, nem conseguimos visualizar a raquete. Logo, precisamos normalizar esse valor para algo dentro das dimensões da tela e que condiga com a posição da bolinha. O primeiro ponto para a normalização é subtrair o valor de yBolinha por yRaqueteOponente. Com essa operação, velocidadeYOponente passa a ter um valor reduzido (que não ultrapassa os limites da tela). Veja como fica com tal modificação:

  deslocamentoYRaqueteOponente = yBolinha - yRaqueteOponente;

Ao testarmos o código, percebemos que, quando a bolinha sobe, a raquete sobe, quando a bolinha desce, a raquete desce.

Contudo, ainda não chegamos ao resultado esperado; a bolinha, ao invés de bater no centro da raquete, realiza a colisão somente na parcela superior. Para configurar isso, podemos adicionar mais um trecho na operação:

deslocamentoYRaqueteOponente = yBolinha - yRaqueteOponente - raqueteComprimento / 2 - 30;

O trecho adicionado, embora diferente da lógica do Scratch, foi utilizado somente porque se encaixou ao que se estava desejando. Após alguns testes realizados pelo instrutor, foi possível perceber que - raqueteComprimento / 2 - 30 faria com que a bolinha colidisse com a parte central da raquete.

Pode parecer um pouco frustrante, mas, ao lidar com criação de jogos e outros projetos de programação, às vezes precisamos fazer uso da “tentativa e erro”. Neste caso, para a elaboração do código da movimentação da raquete, houve algo semelhante a isso.

Uma outra maneira de executar o mesmo princípio seria alterando - raqueteComprimento / 2 - 30 por - raqueteAltura/2. No desenvolvimento de um programa, existem múltiplas possibilidades que podemos seguir. Pensar em diferentes alternativas nos ajuda a compreender melhor como a lógica de programação funciona.

Espero que tenha compreendido como funciona a movimentação da raquete. Estou aqui caso ainda tenha algum questionamento!

Até mais, Eduardo!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.

Mas afinal, como movimentaRaqueteOponente() funciona?

Mas afinal, como `movimentaRaqueteOponente()` funciona?