[Dúvida] Jogo Pong muito difícil em Java script | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Oi, tudo bem?

Inicialmente, uma maneira de tornar o nosso jogo mais dinâmico, fazendo com que a raquete do oponente acerte ou erre sem um padrão existente, é por meio da alteração da lógica que envolve a função movimentaRaqueteOponente().

Para isso, separei o processo em duas etapas, vamos vê-las mais de perto?

Alterações fora da função movimentaRaqueteOponente()

O primeiro passo a ser feito é criar a variável direcaoRaqueteOponente. Ela determinará se a raquete do oponente será movimentada para baixo ou para cima.

Abaixo há o trecho de código que cria a variável:

let direcaoRaqueteOponente = 1;

Dentro de movimentaRaqueteOponente()

Para o desenvolvimento dos trechos de código associados à função, precisamos, a principio, desconsiderar os comandos pré-existentes. Você pode comentá-los ou excluí-los!

Depois disso, partiremos para o código que resultará no movimento da bolinha. Você pode vê-lo logo abaixo:

function movimentaRaqueteOponente(){
  const mediaYB = yb + raio;
  const mediaYRO = yro + (alturaRaquete/2);

  if (mediaYB > mediaYRO) {
    direcaoRaqueteOponente = 1;
  } else {
    direcaoRaqueteOponente = -1;
  }
  yro += 5 * random(0.55, 0.95) * direcaoRaqueteOponente;
}

Mas afinal, o que cada parte significa?

A variável mediaYB armazenará a localização média da bolinha na tela, por meio soma entre yb e raio.
A variável mediaYRO armazenará a localização média da raquete do oponente na tela, através da soma entre yro e a metade de alturaRaquete;
Caso mediaYB seja superior a mediaYRO, significa dizer que a bolinha está abaixo da raquete do oponente verticalmente. Por esse motivo, direcaoRaqueteOponente continua sendo positiva, a fim de aumentar o valor de yro (fazer a raquete descer). Caso isso não seja verdade, direcaoRaqueteOponente será igual a -1, fazendo com que a raquete adversária vá para cima;
Por fim, realizou-se uma atribuição com soma:
- O valor 5 foi apenas um número que trouxe um bom resultado à operação;
- random(0.55, 0.95) gerará um valor aleatório entre o intervalo de 0.55 e 0.95 (através dele, deixaremos o movimento da raquete do oponente mais dinâmico);
- direcaoRaqueteOponente determinará se a raquete irá para cima ou para baixo, como vimos anteriormente.

Com isso, finalizamos o desenvolvimento da função movimentaRaqueteOponente().

Depois essa etapa, vamos ver uma maneira de evitar que a bolinha fique presa atrás das raquetes? Olha só o código abaixo:

function bolinhaNaoBuga(){
    if (xb - raio <= 0){
      xb = 20;
    } else if (xb>= 588){
      xb = width - 20;
    }
}

Tendo como base a função bolinhaNaoBuga(), que já estava em seu código, adicionei mais algumas coisas:

Na primeira condicional, alterei o operador relacional “menor que” para “menor ou igual a”. Assim, caso a subtração entre xBolinha e o raio seja igual a zero, imediatamente a bolinha terá a sua localização alterada para a posição 20;
Além disso, foi inserida uma outra condicional logo abaixo. Caso a primeira verificação retorne false, então realizamos uma outra: se xBolinha for maior ou igual a 588, significa dizer que ela está muito próxima da lateral direita. Desse modo, a posição dela passa a ser o comprimento da tela subtraído de 20.

Ademais, vale salientar que, além das mudanças acima, será necessário alterar o diâmetro da bolinha para 20:

let diametro = 20;

Espero que tenha compreendido! Caso surjam dúvidas após minha explicação ou ao decorrer dos seus estudos, sinta-se confortável para enviá-las no fórum. Fico à disposição para te auxiliar!

Grande abraço e bons estudos!

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