A bolinha passa pela borda de vez em quando quando ela está indo para baixo na diagonal do lado esquerdo, e está acima da raquete, ou para cima na diagonal do lado esquerdo e está abaixo da raquete, e quando a raquete "erra" a bolinha e fica abaixo ou acima dela, respectivamente, e quando a bolinha está prestes a bater na borda, ela ignora a borda e vai pra fora da tela, não entendi o porquê, mas logo depois ela volta (cerca de um segundo) indo para a direção contrária a de quando ela sumiu.
//Variáveis da bolinha
let xBo = 300;
let yBo = 200;
let diam = 15;
let raio = diam / 2;
//Velocidade da bolinha
let velXBo = 5;
let velYBo = -5;
//Variáveis das Raquetes
let xRaqE = 7;
let xRaqD = 583;
let yRaq = 170;
let TxRaqs = 10;
let TyRaqs = 60;
function setup() {
createCanvas(600, 400);
}
function draw() {
background(0);
//Bolinha
ShowBo();
MoveBo();
VerifycolisionBo();
//Raquetes
ShowRa();
MoveRa();
VerifycolisionRaq();
}
function ShowBo(){
circle(xBo, yBo, diam);
}
function MoveBo(){
xBo += velXBo;
yBo += velYBo;
}
function VerifycolisionBo(){
if (xBo + raio > width || xBo - raio < 0)
{
velXBo *= -1;
}
if (yBo + raio > height || yBo -raio < 0)
{
velYBo *= -1;
}
}
function ShowRa(){
rect(xRaqE, yRaq, TxRaqs, TyRaqs)
}
function MoveRa(){
if (keyIsDown(87))
{
yRaq -= 8
}
if (keyIsDown(83))
{
yRaq += 8
}
}
function VerifycolisionRaq(){
//Variáveis da bolinha para a colisão
let esqBo = xBo - raio;
let topoBo = yBo - raio;
let baseBo = yBo + raio;
//Variáveis da raquete para a colisão
let dirRaqE = xRaqE + TxRaqs;
let topoRaqs = yRaq;
let baseRaqs = yRaq + TyRaqs;
if ( esqBo < dirRaqE && topoBo < baseRaqs && baseBo > topoRaqs)
{
velXBo *= -1;
}
}