[Projeto] Fim do Projeto | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Olá, Gabriel, tudo bem?

Que bom que você buscou melhorar o seu código, parabéns, isso que vai te fazer crescer como programador!

Notei dois principais bugs que acontecem bastante, não só no seu código:

1 - A bola “cola” na raquete na hora de rebater;

2 - A bola “buga” atrás da raquete e marca muitos pontos;

O legal de desenvolvimentos de jogos é que sempre vão haver mais de uma possibilidade para resolver um mesmo problema, então vou te sugerir algumas abordagens, e você faz como achar melhor, pode ser?

1. A bola “cola” na raquete na hora de rebater!

Percebemos aqui que o problema é na colisão.

Então temos que olhar tanto para a verificaColisao como para verificaColisaoOponente. Podemos perceber que o código original do curso trata colisão como o momento onde o x da bolinha “ultrapassa” a “borda” da raquete.

Você já percebeu que isso só acontece quando a bolinha bate exatamente na quina da raquete? Isso acontece, pois no mundo ideal o nosso if das verificações só acontece uma vez por raquetada. Mas entrando bem na quina a bola consegue ficar em um espaço bem pequeno onde ela ativa esse if várias vezes, daí fazendo aquele zig-zag e aquele barulho chato.

Para resolver podemos fazer um empurrão quase imperceptível na bola sempre que ocorrer a raquetada.

Segue o código abaixo:

function VerificarColisao(){
  if (xBolinha - radius < xRaquete + widRaquete && 
      (yBolinha - radius < yRaquete + heiRaquete) &&
      yBolinha + radius > yRaquete){
    velocidadeXBolinha *= -1;
    xBolinha += (radius + 1);
    raquetada.play();
  }
}

function VerificarColisaoOponente(){
  if (xBolinha + radius > xRaqueteOponente - widRaquete && 
      yBolinha - radius < yRaqueteOponente + heiRaquete &&
      yBolinha + radius > yRaqueteOponente){
    velocidadeXBolinha *= -1;
    xBolinha -= (radius + 1);
    raquetada.play();
  }
}

Quando a gente adiciona (ou subtrai) o radius+1 logo depois de mudar a direção da bolinha, ela vai dar um pequeno salto (praticamente imperceptível para o olho humano) mas o suficiente para garantir que a bolinha não vai cair naquele “limbo” onde ela ativa o if várias vezes.

2. A bola “buga” atrás da raquete e marca muitos pontos!

Uma forma de resolver isso, é quando você computar um gol, a bola volta ao centro. É até uma forma mais justa do jogo se dar, e resolve o problema de marcar muitos pontos.

Para fazer basta que você coloque uma linha que desloca o x da bola para o meio do campo sempre que for gol, tipo assim:

function MarcaPonto(){
  // Foi ponto!
  if (xBolinha > 590){
    meuspontos += 1;
    ponto.play();
    xBolinha = 600/2;
  }

  // Foi ponto!
  if (xBolinha < 13){
    pontosDoOponente += 1;
    ponto.play();
    xBolinha = 600/2;
  }
}

Não esqueça que no JavaScript é uma boa prática começar o as funções com letra minúscula, e daí seguir com o camelCase.

Espero ter te ajudado.

Reforço que estou à disposição para tirar dúvidas.

Abraços.

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