Criei linhas nas bordas inferiores e superiores das raquetes e acrescentei a função para colidir circulo com linha para as bordas, mas o bug se mantem. Teste com x = 0 e y =0 do primeiro ponto da linha da borda superior da minha raquete para mostrar que bate nas bordas. Dependendo do angulo dá.
//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 10;
let raio = diametro / 2;
//velocidade da bolinha
let velocidadeXBolinha = 3;
let velocidadeYBolinha = 3;
//variaveis da raquete
let xRaquete = 2;
let yRaquete = 150;
//variaveis da raquete do oponente
let xRaqueteOponente = 587;
let yRaqueteOponente = 150;
let velocidadeYRaqueteOponente = 6;
let raqueteComprimento = 10;
let raqueteAltura = 90;
let colidiu = false;
let chanceErrar =0;
//placar do jogo
let meusPontos = 0;
let pontosOponente = 0;
//sons do jogo
let raquetada;
let ponto;
let trilha;
function preload(){
trilha = loadSound("trilha.mp3");
ponto = loadSound("Pontuacao.mp3");
raquetada = loadSound("BatidaRaquete.mp3");
}
function setup() {
createCanvas(600, 400);
trilha.loop();
}
function draw() {
background(GRAY);
verificaColisaoBordaSuperiorMinhaRaquete();
verificaColisaoBordaInferiorMinhaRaquete();
verificaColisaoBordaSuperiorRaqueteOponente();
verificaColisaoBordaInferiorRaqueteOponente();
mostraBolinha ();
movimentaBolinha ();
verificaColisãoBorda ();
mostraRaquete (xRaquete, yRaquete);
mostraRaquete (xRaqueteOponente, yRaqueteOponente);
movimentaMinhaRaquete ();
movimentaRaqueteOponente ();
verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
verificaColisaoRaquete(xRaquete, yRaquete);
incluiPlacar ();
marcaPonto ();
mostraBordaRaquete (0, yRaquete, xRaquete+raqueteComprimento, yRaquete);
mostraBordaRaquete (0, yRaquete+raqueteAltura,xRaquete+raqueteComprimento, yRaquete+raqueteAltura);
mostraBordaRaquete (600, yRaqueteOponente, xRaqueteOponente, yRaqueteOponente);
mostraBordaRaquete (600, yRaqueteOponente+raqueteAltura,xRaqueteOponente+raqueteComprimento, yRaqueteOponente+raqueteAltura);
}
function mostraBolinha(){
circle(xBolinha, yBolinha, diametro);
}
function movimentaBolinha(){
xBolinha += velocidadeXBolinha;
yBolinha += velocidadeYBolinha;
}
function verificaColisãoBorda () {
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, raqueteComprimento, raqueteAltura);
}
function mostraBordaRaquete (a,b,c,d){
line (a,b,c,d);
stroke(200);
}
function movimentaMinhaRaquete (){
if (keyIsDown(UP_ARROW) && yRaquete > 0){
yRaquete -= 7;
}
if (keyIsDown(DOWN_ARROW) && yRaquete + raqueteAltura < 400){
yRaquete += 7;
}
}
function verificaColisaoRaquete(x,y){
colidiu = collideRectCircle(x,y,raqueteComprimento,raqueteAltura,xBolinha,yBolinha,raio)
if (colidiu){
velocidadeXBolinha *= -1;
raquetada.play();
}
}
function verificaColisaoBordaSuperiorMinhaRaquete(a,b,c,d){
colidiu =
collideLineCircle(0,yRaquete,xRaquete+raqueteComprimento, yRaquete,xBolinha,yBolinha,diametro)
if (colidiu){
velocidadeXBolinha *= -1;
raquetada.play();
}
}
function verificaColisaoBordaInferiorMinhaRaquete(a,b,c,d){
colidiu =
collideLineCircle(0, yRaquete+raqueteAltura,xRaquete+raqueteComprimento, yRaquete+raqueteAltura)
if (colidiu){
velocidadeXBolinha *= -1;
raquetada.play();
}
}
function verificaColisaoBordaSuperiorRaqueteOponente(a,b,c,d){
colidiu =
collideLineCircle(600, yRaqueteOponente, xRaqueteOponente, yRaqueteOponente)
if (colidiu){
velocidadeXBolinha *= -1;
raquetada.play();
}
}
function verificaColisaoBordaInferiorRaqueteOponente(a,b,c,d){
colidiu =
collideLineCircle(600, yRaqueteOponente+raqueteAltura,xRaqueteOponente+raqueteComprimento, yRaqueteOponente+raqueteAltura)
if (colidiu){
velocidadeXBolinha *= -1;
raquetada.play();
}
}
function movimentaRaqueteOponente (){
if (keyIsDown(87) && yRaqueteOponente > 0){
yRaqueteOponente -= 7;
}
if (keyIsDown(83) && yRaqueteOponente + raqueteAltura < 400){
yRaqueteOponente += 7;
}
}
function incluiPlacar (){
stroke(255);
textSize(30);
textAlign(CENTER);
fill('rgb(255,140,0)');
rect(132, 2, 35, 28);
fill(255);
text(meusPontos, 150, 26);
fill('rgb(255,140,0)');
rect(432, 2, 35, 28);
fill(255);
text(pontosOponente, 450, 26);
}
function marcaPonto (){
if (xBolinha > 595){
meusPontos += 1;
ponto.play();
}
if (xBolinha < 5){
pontosOponente += 1;
ponto.play();
}
}