Bola ultrapassando canvas quando adiciono a função verificaColisaoRaquete | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Após adicionar a função verificaColisaoRaquete na função draw, exatamente igual como o professor escreveu, a bola verifica a colisão apenas na borda direita.

Segue meu código:

//variáveis da bola
let xBola = 300;
let yBola = 200;
let diametro = 25;
let raio = diametro / 2 ;

//velocidade da bola
let velocidadeXBola = 6;
let velocidadeYBola = 6;

//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0); //Desenha o fundo
  mostraBola(); //Desenha a bola
  movimentaBola(); //Movimenta a bola
  verificaColisaoBorda(); //Verifica a colisão da bola
  mostraRaquete();
  movimentaRaqueteJogador1();
  verificaColisaoRaquete();
  }

function mostraBola(){
  circle(xBola, yBola, diametro);
}

function movimentaBola (){
  xBola += velocidadeXBola;
  yBola += velocidadeYBola;
}

function verificaColisaoBorda(){
  if (xBola + raio > width ||
     xBola - raio < 0){
  velocidadeXBola *= -1;  
  }
  if (yBola + raio > height ||
     yBola - raio < 0){
    velocidadeYBola *= -1
  }
}

function mostraRaquete(){
  rect(xRaquete, yRaquete, raqueteComprimento, 
       raqueteAltura);
}

function movimentaRaqueteJogador1(){
  if (keyIsDown(UP_ARROW)){
    yRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yRaquete += 10;
  }

  }

function verificaColisaoRaquete(){
  if (xBola < xRaquete + raqueteComprimento){
    velocidadeXBola *= -1;
  }
}

Oi, Gabriel! Tudo bom contigo?

Ao testar o funcionamento da função verificaColisaoRaquete com a adição de - raio, percebemos que a estrutura condicional presente nunca retorna true. Nesse sentido, a bolinha troca de sentido não porque colidiu com a raquete, mas sim porque colidiu com a borda (o que significa dizer que os comandos da função verificaColisaoRaquete não ocorreram de fato).

A função verificaColisaoRaquete tem como objetivo analisar se a bolinha colidiu com a raquete. Para isso, precisamos verificar se a posição horizontal da bola coincide com a localização da borda da raquete.

Para que a bolinha troque de sentido ao colidir com a raquete, precisamos adicionar à condição + raio. Com a alteração proposta, chegamos no resultado abaixo:

function verificaColisaoRaquete(){
  if (xBola < xRaquete + raqueteComprimento + raio){
    velocidadeXBola *= -1;
  }
}

Mas afinal, por que foi necessário adicionar + raio à condicional?

Antes da adição deste trecho, a bolinha, ao ultrapassar a raquete, sumia completamente da nossa visão.

Os valores de xRaquete e raqueteComprimeto são, respectivamente, 5 e 10. Ao somá-los, temos como resultado o número 15. Além disso, há também o tamanho do raio da bola, que vale 12.5.

Conforme a bolinha se deslocava para a esquerda, os valores correspondentes a xBola iam diminuindo progressivamente. Ao ultrapassar a posição horizontal 15 da tela (soma entre xRaquete e raqueteComprimeto), velocidadeXBola passava a ser negativo.

Teoricamente, o sentido do movimento da bolinha deveria ser alterado, fazendo com ela se deslocasse para a direita. Contudo, uma vez que a função verificaColisaoRaquete() continua em execução, a verificação permanecerá retornando true, já que a bolinha ainda se situa em uma posição inferior a xRaquete + raqueteComprimento.

Por esse motivo adicionar + raio é necessário! xBola faz referência ao centro da bola. Então, a partir do momento que realizamos o cálculo contabilizando o valor do raio, permitimos que a validação ocorra somente antes da bola ultrapassar a margem.

Por fim, gostaria de dizer que alterei o seu tópico com objetivo de formatar o código que você compartilhou com a gente!

Quando precisar compartilhar códigos aqui no fórum, você pode seguir os passos que compartilho a seguir. Sem a formatação correta o código acaba ficando escondido no post final.

No seu terminal, selecione e copie a seção com o código;
Aqui no fórum, procure o ícone </>. É a sétima opção na aba superior do nosso editor de texto;
Cole o código copiado entre as duas linhas que surgirem.

Para confirmar se está tudo certo, você pode pré-visualizar seu post clicando no último ícone da esquerda para a direita, ou também usando o atalho F9.

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

Até mais, Gabriel!

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