[Dúvida] Parar uma função para que outra seja executada. (PONG)

Olá, Edrei! Tudo bem?

Muito interessante sua ideia, você poderia compartilhar o link do seu projeto para que eu possa visualizar o resultado na prática?

No seu código você vai precisar realizar algumas melhorias para que funcione. Uma delas pode ser um número aleatório que execute a movimentação automática da raquete.

Fico à disposição;

Bons estudos e feliz Natal!

Aqui está o código completo.

//Dimesões da bola
let xBola = 300;
let yBola = 200;
let dIametro = 20;
let raio = dIametro / 2;
//Velocidade da bola
let xMovimento = 5;
let yMovimento = 5;
//Parâmetros da raquete do jogador
let xRaquete = 10;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;
let movRaquete = 10;
//Parâmetros da raquete do oponente
let xRaqueteOp = 580;
let yRaqueteOp = 150;
let movYRaqueteOp;
//placar
let pontos = 0;
let pontosOp = 0;

let somTrilha;
let somPonto;
let somRaquetada;

let chanceDeErrar = 0;

let colisao = false;

function preload(){
  somTrilha = loadSound("trilha.mp3");
  somPonto = loadSound("ponto.mp3");
  somRaquetada = loadSound("raquetada.mp3");
}

function setup() {
  createCanvas(600, 400);
  somTrilha.loop();
}

function draw() {

  background(0);
  desenhaBola();
  movimentoBola();
  colisaoBola();
  desenhaRaquete(xRaquete, yRaquete);
  desenhaRaquete(xRaqueteOp, yRaqueteOp);
  movimentoRaquete();
  colisaoRaqBola(xRaquete, yRaquete);
  colisaoRaqBola(xRaqueteOp, yRaqueteOp);
  movimentoRaqueteOp();
  mostraPlacar(200,28);
  marcarPontos();
}

function desenhaBola(){fill(color(255,215,0)); 
                       circle (xBola, yBola, dIametro);}

function movimentoBola(){
  xBola += xMovimento;
  yBola += yMovimento;}

function colisaoBola(){ 
  if (xBola + raio > width || xBola - raio < 0) 
  {xMovimento *= -1}; 
  if (yBola + raio > height || yBola - raio < 0) 
  {yMovimento *= -1};
}

function desenhaRaquete(x,y){fill(255);
  rect(x, y, raqueteComprimento, raqueteAltura);
}

function movimentoRaquete(){
  if (keyIsDown(87)){yRaquete -= movRaquete;}
  if (keyIsDown(83)){yRaquete += movRaquete;}
}

function colisaoRaqBola(x,y) {
  colisao = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBola, yBola, raio);
  if (colisao){xMovimento *= -1; somRaquetada.play();}}

function movimentoRaqueteOp(){

  if(keyIsDown(UP_ARROW)||keyIsDown(DOWN_ARROW)){movimentoRaqueteOpHumano()}

  else{movimentoRaqueteOpAuto()}
 }

function movimentoRaqueteOpAuto(){movYRaqueteOp = yBola - yRaqueteOp -raqueteComprimento/2-30;
 yRaqueteOp += movYRaqueteOp + chanceDeErrar
 calculaChanceDeErrar()}

function movimentoRaqueteOpHumano(){
  if (keyIsDown(UP_ARROW)){yRaqueteOp -= movRaquete;}
  if (keyIsDown(DOWN_ARROW)){yRaqueteOp += movRaquete;}
}

function mostraPlacar(x,y){
  stroke(255);
  textAlign(CENTER);
  textSize(20);
  fill(color(255,69,0));
  rect(180, 10, 40, 20);
  fill(255);
  text(pontos,x,y);
  fill(color(255,69,0));
  rect(360, 10, 40, 20);
  fill(255);
  text(pontosOp,x+180,y);}

function marcarPontos(){
  if (xBola > 590){pontos += 1; somPonto.play();};
  if (xBola < 10){pontosOp += 1; somPonto.play();};
}

function calculaChanceDeErrar() {
  if (pontosOp >= pontos) {
    chanceDeErrar += 1
    if (chanceDeErrar >= 39){
    chanceDeErrar = 40
    }
  } else {
    chanceDeErrar -= 1
    if (chanceDeErrar <= 35){
    chanceDeErrar = 35
    }
  }
}

Sobre: "um número aleatório que execute a movimentação automática da raquete." como seria isso?

Olha, eu consegui fazer alguma coisa no seu código, criei uma variável chamada automatico que recebe true. Sua função movimento RaqueteOpAuto recebe uma condição, ela só pode ser executada se a variável automatico for true, caso ela seja false, nada é executado e o modo automático é desligado, ao pressionar a tecla para cima ou para baixo você desliga o modo automático. Até aqui deu tudo certo, o meu problema foi em religar o sistema, eu coloquei para reativar o modo automático caso a tecla espaço seja pressionada, mas nada aconteceu, não sei se eu fiz algo errado. Se alguém puder ajudar nesse detalhe eu agradeço ^^'

No meu projeto eu consegui fazer funcionar perfeitamente, confere lá: https://editor.p5js.org/Okutiko/sketches/jcKSPggPE

O código está aqui:

//Dimesões da bola
let xBola = 300;
let yBola = 200;
let dIametro = 20;
let raio = dIametro / 2;
//Velocidade da bola
let xMovimento = 5;
let yMovimento = 5;
//Parâmetros da raquete do jogador
let xRaquete = 10;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;
let movRaquete = 10;
//Parâmetros da raquete do oponente
let xRaqueteOp = 580;
let yRaqueteOp = 150;
let movYRaqueteOp;
let automatico = true;
//placar
let pontos = 0;
let pontosOp = 0;

let somTrilha;
let somPonto;
let somRaquetada;

let chanceDeErrar = 0;

let colisao = false;

function preload(){
  somTrilha = loadSound("trilha.mp3");
  somPonto = loadSound("ponto.mp3");
  somRaquetada = loadSound("raquetada.mp3");
}

function setup() {
  createCanvas(600, 400);
  somTrilha.loop();
}

function draw() {

  background(0);
  desenhaBola();
  movimentoBola();
  colisaoBola();
  desenhaRaquete(xRaquete, yRaquete);
  desenhaRaquete(xRaqueteOp, yRaqueteOp);
  movimentoRaquete();
  colisaoRaqBola(xRaquete, yRaquete);
  colisaoRaqBola(xRaqueteOp, yRaqueteOp);
  movimentoRaqueteOp();
  mostraPlacar(200,28);
  marcarPontos();
}

function desenhaBola(){fill(color(255,215,0)); 
                       circle (xBola, yBola, dIametro);}

function movimentoBola(){
  xBola += xMovimento;
  yBola += yMovimento;}

function colisaoBola(){ 
  if (xBola + raio > width || xBola - raio < 0) 
  {xMovimento *= -1}; 
  if (yBola + raio > height || yBola - raio < 0) 
  {yMovimento *= -1};
}

function desenhaRaquete(x,y){fill(255);
  rect(x, y, raqueteComprimento, raqueteAltura);
}

function movimentoRaquete(){
  if (keyIsDown(87)){yRaquete -= movRaquete;}
  if (keyIsDown(83)){yRaquete += movRaquete;}
}

function colisaoRaqBola(x,y) {
  colisao = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBola, yBola, raio);
  if (colisao){xMovimento *= -1; somRaquetada.play();}}

function movimentoRaqueteOp(){

  if(keyIsDown(UP_ARROW)||keyIsDown(DOWN_ARROW)){movimentoRaqueteOpHumano()}

  else{movimentoRaqueteOpAuto()}
 }

function movimentoRaqueteOpAuto(){
  if (automatico) {
    movYRaqueteOp = yBola - yRaqueteOp -raqueteComprimento/2-30;
 yRaqueteOp += movYRaqueteOp + chanceDeErrar
 calculaChanceDeErrar()  
  }
}

function movimentoRaqueteOpHumano(){
  if (keyIsDown(UP_ARROW)){yRaqueteOp -= movRaquete; automatico = false} 
  if (keyIsDown(DOWN_ARROW)){yRaqueteOp += movRaquete; automatico = false}
  if (keyIsDown(32)){automatico=true;}
}

function mostraPlacar(x,y){
  stroke(255);
  textAlign(CENTER);
  textSize(20);
  fill(color(255,69,0));
  rect(180, 10, 40, 20);
  fill(255);
  text(pontos,x,y);
  fill(color(255,69,0));
  rect(360, 10, 40, 20);
  fill(255);
  text(pontosOp,x+180,y);}

function marcarPontos(){
  if (xBola > 590){pontos += 1; somPonto.play();};
  if (xBola < 10){pontosOp += 1; somPonto.play();};
}

function calculaChanceDeErrar() {
  if (pontosOp >= pontos) {
    chanceDeErrar += 1
    if (chanceDeErrar >= 39){
    chanceDeErrar = 40
    }
  } else {
    chanceDeErrar -= 1
    if (chanceDeErrar <= 35){
    chanceDeErrar = 35
    }
  }
}

Muito bacana sua implementação. É possível utilizar o setTimeout para permitir que a função automática funcione após um tempo específico, como no exemplo a seguir:

function movimentoRaqueteOp(){

   if(keyIsDown(UP_ARROW)||keyIsDown(DOWN_ARROW)){
     movimentoRaqueteOpHumano()
  }
  else{
    setTimeout(movimentoRaqueteOpAuto,2000)
   }
 }

No entanto o ideal é refazer a lógica, pois assim o jogo não fica muito fluido.