A bolinha não retorna quando bate nas paredes do eixo y

Olá, Erasmo! Tudo bem com você?

Observei seu código e consegui verificar apenas alguns equívocos em relação a parte da lógica.

Na condição do IF você inseriu um sinal de multiplicação e outro de somatória ( * +) no lugar do operador de atribuição de multiplicação( * =) . Outro ponto é que você alterou a velocidadexBolinha e não o de y, e foi por isso que o conflito ocorreu.

• Como resolver?

Basta modificarmos o operador e também a variável xBolinha para yBolinha (e assim alterar o valor de y). Vou inserir o código com as alterações para visualizarmos melhor.

let xBolinha = 300; 
let yBolinha = 200; 
let diametro = 15; 
let raio = diametro / 2;

let velocidadexBolinha = 6; 
let velocidadeyBolinha = 6;

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

function draw() { 
  background(0); 
  circle(xBolinha, yBolinha, diametro); 
  xBolinha += velocidadexBolinha;
  yBolinha += velocidadeyBolinha;

  if (xBolinha + raio > width || xBolinha - raio < 0)
   { 
    velocidadexBolinha *= -1; 
    } 
  if (yBolinha + raio > height || yBolinha - raio < 0)
   { 
    velocidadeyBolinha *= -1; // Aqui a alteração
    }

}

Achei muito interessante a forma que você escolheu para construir seu código. Embora o código tenha ficado pequeno e legível, inserir toda a lógica na função draw() pode acabar dificultando um pouco no momento de desenvolver passos futuros ou aumentar a complexidade do projeto. Devido a isso, o instrutor constrói a lógica com funções e depois só as chama dentro da draw().

Vou deixar aqui o exemplo do instrutor;

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2 ;

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

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
}

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

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

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

No código do instrutor, cada função possui uma responsabilidade específica, isso permite a realização de modificações e também correção de possíveis bugs no projeto.

Espero que tenha ajudado, e se houver mais dúvidas, só avisar que estamos por aqui!

Continue compartilhando seu progresso conosco!

Um abraço e bons estudos!

obrigado