[Dúvida] Função para verificar bordas

Porque quando passamos números, textos ou valores booleanos (false, true) para uma função, estes valores são copiados e recriados dentro da função. No seu caso, por exemplo, a função verificaBordas tem três variáveis internas dela: posicao, borda, velocidade. E acessa uma variável externa raio.

Portanto, quando ela altera o valor da variável velocidade este valor só é alterado dentro da função e as variáveis externas velocidadeXbolinha e velocidadeYbolinha permanecem com o mesmo valor. Por isso não funciona.

Para resolver este problema você precisa alterar diretamente os valores das variáveis velocidadeXbolinha e velocidadeYbolinha. Abaixo eu trouxe duas formas que funcionariam:

1. Retornando a nova velocidade para atualizar as variáveis

function atualizarVelocidade(posicao, borda, velocidade) {
  const bolinhaNaBorda = posicao + raio > borda || posicao - raio < 0;
  return bolinhaNaBorda ? -velocidade : velocidade; // operador ternário
}

// na função draw
velocidadeXbolinha = atualizarVelocidade(xBolinha, width, velocidadeXbolinha);
velocidadeYbolinha = atualizarVelocidade(yBolinha, height, velocidadeYbolinha);

1. Atualizando as velocidades dentro da função

function verificaBordas(posicao, borda, eixo) {
  const bolinhaNaBorda = posicao + raio > borda || posicao - raio < 0;
  if (bolinhaNaBorda) {
    if (eixo == "x") velocidadeXbolinha *= -1;
    if (eixo == "y") velocidadeYbolinha *= -1;
  }
}

// na função draw
velocidadeXbolinha = atualizarVelocidade(xBolinha, width, "x");
velocidadeYbolinha = atualizarVelocidade(yBolinha, height,  "y");

Olá, Laís, tudo bem?

Achei interessante o seu ímpeto de deixar o código do jogo mais limpo, você utilizou uma boa prática de codificação chamada “don't repeat yourself”, em português não se repita, cujo objetivo é evitar ambiguidades no código.

Note que na função original verificaColisãoBorda, não está sendo utilizado nenhum argumento, apenas está sendo chamada na função draw. Nas condições dessa função nós estamos alterando diretamente o valor das variáveis velocidadeXBolinha e velocidadeYBolinha.

Acontece que na função que você tentou criar, ao passar o valor no argumento, você está passando a referência desse valor, uma cópia, ou seja, as velocidades não estão sendo alteradas. As alterações estão sendo feitas apenas nessa “cópia”.

Isso acontece porque no JavasScript todos os argumentos de uma função são sempre passados por valor. Isso significa que o JavaScript copia os valores das variáveis passadas em argumentos dentro da função. As alterações feitas nesses argumentos não irão refletir no código fora da função.

Uma solução seria adaptar sua função para ao invés de receber como parâmetro a cópia da variável, receber um parâmetro booleano alterarLargura e dependendo se você passar true(caso seja largura) ou false(caso seja altura) alterará a velocidadeXBolinha ou velocidadeYBolinha. A função ficará assim:

function verificaBordas(posicao, borda, alterarLargura) {
  if (posicao + raio > borda || posicao - raio < 0){
    if (alterarLargura){
      velocidadeXBolinha *= -1;
    }else{
      velocidadeYBolinha *= -1;
    }
  }
}

E na função draw você chamará essa função com os devidos argumentos:

verificaBordas(xBolinha, width, true);
  verificaBordas(yBolinha, height, false);

Espero ter ajudado. Caso surja dúvidas, estou à disposição.

Muito obrigada Vinícius e Monalisa! Agora entendi porque não funcionou e já consegui usar a mesma ideia em outro código.