[Dúvida] Colisão com a Raquete Adversaria dando Bug (Bolinha tremendo no meio da Tela) | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Insira aqui a descrição dessa imagem para ajudar na acessibilidade O codigo a seguir :


function verificaColisaoRaquete(x, y){
  if (xBolinha - raio < x + compRaquete &&
     yBolinha - raio < y + alturaRaquete &&
     yBolinha + raio > y) {
    velocidadeXBolinha *= -1;
  }

}

Obs não usei a biblioteca externa pelo motivo do arquivo não abrir no meu p5!

então usei a função do primeiro exemplo. 

O codigo Completo: 

//variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 25;
let raio = diametro/2;

//velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

//variaveis raquete
let xRaquete = 5;
let yRaquete = 150;
let compRaquete = 5;
let alturaRaquete = 70;

//variaveis raquete oponente
let xRaqueteOponente = 590;
let yRaqueteOponente = 150;
let velocidadeYOponente;


let colidiu = false;

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

function draw() {
  background(0);
  mostraBolinha();
  moveBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  moveRaquete();
  moveRaqueteOponente();
  verificaColisaoRaquete(xRaquete, yRaquete);
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  //colisaoMinhaRaqueteBiblioteca();

}

function mostraBolinha(){
  circle(xBolinha, yBolinha, diametro)
}

function moveBolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

function verificaColisaoBorda(){
  if (xBolinha + raio > width || xBolinha - raio < 0) {
    velocidadeXBolinha *= -1;
  }

  if (yBolinha + raio > height || yBolinha - raio < 0) {
    velocidadeYBolinha *= -1; 
  }  
}

function mostraRaquete(x, y){
  rect(x, y, compRaquete, alturaRaquete);
}

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

function moveRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - 
    compRaquete /2 - 30; 
  yRaqueteOponente += velocidadeYOponente;
}

function verificaColisaoRaquete(x, y){
  if (xBolinha - raio < x + compRaquete &&
     yBolinha - raio < y + alturaRaquete &&
     yBolinha + raio > y) {
    velocidadeXBolinha *= -1;
  }

}

function colisaoMinhaRaqueteBiblioteca(){
 colidiu = collideRectCircle(xRaquete, yRaquete, compRaquete, alturaRaquete, xBolinha, yBolinha, raio);
  if (colidiu){
    velocidadeXBolinha *= -1;
  }
}

Oi, Alexandre, tudo bem?

Analisei o seu código e consegui ver que a bolinha acompanha o movimento da raquete do oponente e fica no centro da tela tremendo. Para resolver esse problema basta você remover ou comentar a função verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente); na função draw.

function draw() {
 //...restante do código
  //verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
}

Ao fazer isso a bolinha se moverá aleatoriamente pela tela, mas não irá colidir com a raquete do oponente, apenas com a raquete do jogador 1. Dessa forma podemos usar a biblioteca do p5.js para realizar a colisão com a raquete do oponente. Para utilizar essa ferramenta do p5 é necessário realizar alguns passos.

No canto superior esquerdo da tela clique no menu Help e em seguida no submenu Reference.

Recorte de captura de tela. No menu help, a opção reference está destacada em rosa

Em seguida clique em Libraries.

Recorte de captura de tela da aba reference do p5js. Ao lado esquerdo, dentre várias opções, a opção Libraries está destacada em vermelho.

Você encontrará várias bibliotecas. Estas são um conjunto de códigos desenvolvidos por outras pessoas que podem ajudar a solucionar problemas, sem a biblioteca, teríamos que criar todas as funcionalidades do zero.

Procure a biblioteca p5.collide2D. e clique, você será redirecionada para a página do GitHub em que o código está hospedado. Clique em code e em download zip.

Recorte da captura de tela de um repositório do GitHub. O botão code foi selecionado. No submeno a opção download zip está destacada em vermelho. Ao fundo há uma lista de arquivos.

Lembre-se de descompactar os arquivos!

Em seguida, no p5, clique na setinha ao lado de sketch files e selecione a opção upload file.

Recorte da captura de tela do p5.js. Ao lado da opção "sketch file", há uma seta destacada em azul, indicando que foi clicada. A terceira opção, "upload file", está destacada em rosa.

Selecione o arquivo que acabamos de baixar, o p5.collide2D.js e clique em Open. Ele ficará do lado esquerdo do editor de texto, no mesmo lugar em que criamos novos arquivos e carregamos as imagens.
Para que o código da biblioteca possa ser compreendido dentro do projeto, vá até o arquivo index.html e crie a seguinte linha de código, dentro da tag body.

<script src="p5.collide2d.js"></script>

Depois o código já estará disponível para ser utilizado, e o próximo passo é criarmos uma função que detecta a colisão. No arquivo sketch.js, crie a variável colisao = false e a função colisaoBiblioteca(x,y).
Agora você deve criar a função colisãoBiblioteca(xRaqueteOponente, yRaqueteOponente) dentro do arquivo sketch.js .

function colisaoBiblioteca(xRaqueteOponente, yRaqueteOponente){
  colidiu = collideRectCircle(xRaqueteOponente, yRaqueteOponente, compRaquete, alturaRaquete, xBolinha, yBolinha, raio);
  if(colidiu){
    velocidadeXBolinha *= -1;
  }
}

Lembre-se de chamar a funçãocolisaoBiblioteca(xRaqueteOponente, yraqueteOponente) dentro da função draw(), no arquivo Sketch.js.

Perceba que estamos utilizando a função collideRectCircle(), que está na biblioteca que acabamos de trazer para nosso projeto. Caso você não tenha feito o upload do arquivo no p5 e nem tenha adicionado a linha de código no index.html mesmo ao chamar a função colisaoBiblioteca(xRaqueteOponente, yraqueteOponente) na função draw, não será possível realizar a colisão já que o erro ReferenceError: collideRectCircle is not defined nos comunica que o collideRectCircle não está definido em nenhum lugar do seu arquivo.

Espero que dê tudo certo. Caso tenha outras dúvidas, estarei a disposição para te ajudar.

Grande abraço e bons estudos!

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