Restart da bolinha ao centro em cada ponto?

Eaí Vinícius! Pensei a mesma coisa, e acrescentei esse esquema no meu.

Primeira coisa que fiz foi criar uma array (lista), com esse dois valores (você vai entender daqui a pouco):

const velocidadeAleatoria = [3,-3];

Depois, criei uma função chamada reiniciar:

function reiniciar() {
  if (xBolinha - raio <= 2 ||
    xBolinha + raio >= 598) {
    xBolinha = 300;
    yBolinha = 200;
    velocidadeXBolinha = velocidadeAleatoria[Math.floor(Math.random() * velocidadeAleatoria.length)];
    velocidadeYBolinha = velocidadeAleatoria[Math.floor(Math.random() * velocidadeAleatoria.length)];
    }
}     

Essa função obedece a seguinte lógica: Se o eixo x da bolinha for menor ou igual 2, ou maior ou igual a 598, ela volta para o centro. Após isso o eixo x e y da velocidade da bolinha (direção), é escolhida aleatoriamente por um daqueles dois valores que eu criei na array acima. Dessa forma quando a bolinha voltar ao centro, ela pode tanto ir para direita ou para esquerda (-3, 3), pra cima ou pra baixo (-3, 3). Isso evita com que a bolinha vá sempre para mesma direção quando reiniciada.

BÔNUS: Se achar que dessa forma fica muito rápido, você pode incluir um setTime, que faz com que o código espere um determinado tempo pra ser realizado. Assim, quando um dos dois fizer ponto, a bolinha volta ao centro, espera um tempo, e é disparada.

function reiniciar() {
  if (xBolinha - raio <= 2 ||
    xBolinha + raio >= 598) {
    xBolinha = 300;
    yBolinha = 200;
    velocidadeXBolinha = 0;
    velocidadeYBolinha = 0;
    setTimeout(function() {
      velocidadeXBolinha = velocidadeAleatoria[Math.floor(Math.random() * velocidadeAleatoria.length)];
      velocidadeYBolinha = velocidadeAleatoria[Math.floor(Math.random() * velocidadeAleatoria.length)];
    }, 2000);
    }
}     

Meu jogo: https://editor.p5js.org/kayquedias/sketches/vjtmbyEHd

Olá Vinicius e Kayque, tudo bem?

Parabéns por ambos customizarem o jogo, deixando de uma forma mais usual e realista.

Kayque, gostei muito que conseguiu implementar uma aleatoriedade na direção da bolinha. Que bom que você está conseguindo deixar o jogo mais dinâmico e assim aprendendo mais a programar.

Acredito que a forma mais simples de implementar essa funcionalidade seja colocando a bola para o meio do Canva quando acontecer o ponto.

function marcaPontos(){
  if (xBola > 590){   
    foiPonto();
    meusPontos += 1;

  }
  if (xBola < 10){
    foiPonto();
    pontosOpo += 1;
  }
}

function foiPonto(){
  ponto.play();

  // Ao marcar um ponto, lança a bola para o cento do campo
  xBola = 300;
  yBola = 200;
}

Criei uma função só para não ficar repetindo código.

Nessa forma mais simples, a bola só será movida pro centro, sem mudar a trajetoria que já estava fazendo. Se você quiser adicionar essa opção, basta usar um Math.Random() e em algumas situações multiplicar a velocidade (tanto x quanto y) por -1, ou não.

function foiPonto(){
  ponto.play();

  // Ao marcar um ponto, lança a bola para o centro do campo
  xBola = 300;
  yBola = 200;

  let direcaoAleatoria = Math.random();


  if (direcaoAleatoria < (1/4)){
    // Inverter só X
    velocidadeX *= -1;
  }else if (direcaoAleatoria < (2/4)){
    // Inverter só o Y
    velocidadeY *= -1;
  }else if (direcaoAleatoria < (3/4)){
    // Inverter ambos
    velocidadeX *= -1;
    velocidadeY *= -1;
  }else{
    // Não inveter nenhum (continuar a trajetória)
    velocidadeX *= 1;
    velocidadeY *= 1;
  }
}

Nesse caso, ela iniciará em uma direção aleatória!

Espero ter conseguido ajudá-los.

Abraços,