A bolinha não atinge a borda superior e inferior

Olá, José! Espero que você esteja bem!

Olhei o seu código e vi apenas um erro muito pequeno mas que comprometeu a movimentação da sua bolinha.

Dentro da função draw() há a movimentação do xbolinha e do ybolinha. Na linha de código referente ao ybolinha, o seu código está assim:

ybolinha += velocidadexbolinha

Mas o que isso quer dizer?

Aqui você disse que ybolinha = ybolinha + velocidadexbolinha e isso ocasionou o conflito na movimentação, porque devemos somar a posição Y da bolinha (yBolinha) com a velocidade da bolinha no eixo Y (velocidadeYBolinha).

Vou enviar o código com a modificação e você testa para ver se funciona, tudo bem?

//variaveis da bolinha

let xbolinha = 300; 
let ybolinha = 200; 
let diametro = 19 ; 
let raio = diametro / 2;

//velocidades da bolinha

let velocidadexbolinha = 6; 
let velocidadeybolinha = 3;

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

function draw() { 
  background(0); 
  circle (xbolinha, ybolinha, diametro); 
  xbolinha += velocidadexbolinha; 
  ybolinha += velocidadeybolinha; // foi bem aqui que modifiquei :)


if (xbolinha + raio > width || xbolinha - raio < 0) 
{
    velocidadexbolinha *= -1;
}

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

}

Espero que tenha ajudado!

Um abraço e bons estudos!

Muitíssimo obrigado, passou despercebido.

Olá, José!

Fico muito feliz que tenha resolvido! Situações assim são extremamente comuns e às vezes só quando outra pessoa olha o código é que consegue perceber.

Se estiver tudo certinho, eu gostaria de pedir gentilmente que você marcasse a resposta como solução, tudo bem? :)

Continue firme nos estudos e não hesite em perguntar caso apareça alguma dúvida!

Um abraço!