[Bug] Não aparece a raquete do oponente | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Olá.. não sei o que aconteceu no meu jogo, pois ele nao aparece a raquete do oponente. Quando dou play no jogo a raquete não aparece, entretanto tudo leva a crer que "ela está lá", pois é possivel escutar o som das raquetadas e além disso não contabiliza pontos para mim.

Abaixo tem alguns trechos do código que fala a respeito da raquete do oponente.

Posição da raquete:

// variaves do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

Função Draw:

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentoMinhaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoRaquete(xRaquete,yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);

Função mostraRaquete:

function mostraRaquete(x,y){
  rect(x,y, raqueteComprimento,raqueteAltura);
}

O código completo pode ser acessado por aqui: https://editor.p5js.org/francisco.pinheiro.vieira/sketches/T0Z8yXmwX

Se alguem consegue me ajudar, fico agradecido

Oi, Francisco! Tudo certo?

Na linha 107 do seu código, há um sinal de soma extra após a finalização da operação. Ao removê-lo, chegamos neste resultado:

yRaqueteOponente += velocidadeYOponente + chanceDeErrar

Com essa mudança, a função movimentaRaqueteOponente() ficará assim:

function movimentaRaqueteOponente() {
  velocidadeYOponente = yBolinha -yRaqueteOponente - raqueteComprimento / 2 - 30;
  yRaqueteOponente += velocidadeYOponente + chanceDeErrar
  calculaChanceDeErrar();
}

A fim de deixar o seu Pong ainda mais divertido, deixo abaixo algumas sugestões. Caso as ache interessante, sinta-se confortável para adicioná-las em seu jogo, está bem?

Diminuir a velocidade da bolinha: para deixar o jogo intermediário, podemos alterar o valor das variáveis velocidadeXBolinha e velocidadeYBolinha para um número mais baixo, como 6:

let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

Impedir que a bolinha fique presa: para evitar problemas na colisão da bolinha com as laterais da tela ou com as raquetes, podemos realizar duas condicionais na função bolinhaNaoFicaPresa() , da seguinte maneira:

function bolinhaNaoFicaPresa(){
    if (xBolinha - raio < 0){
    xBolinha = 23
    } else if (xBolinha + raio > width) {
      xBolinha = width - 23
    }
}

Caso a posição x da bolinha menos o valor do raio seja inferior a 0, o número de xBolinha passa a ser 23, como já tínhamos anteriormente.

A nova parte verifica se a posição x da bolinha mais o valor do raio é superior ao width, isto é, ao comprimento da nossa tela. Se isso for verdade, a nova posição horizontal da bolinha será o tamanho da tela menos 23.

Legal, não é mesmo? Assim evitamos que a bolinha fique presa em ambos os lados, direito e esquerdo!

Caso surjam dúvidas após minha explicação ou ao decorrer dos seus estudos, lembre-se que você pode contar com o fórum. Fico à disposição para te ajudar!

Grande abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.