Olá, estou compartilhando minha solução. Toda vez que o oponente rebate ou faz ponto e lançado um número aleatório que pode somar ou subtrair sua posição. Assim que ele leva ponto o número aleatório zera e ele volta a acertar. Para que não haja um salto da barra em cima da bolinha também adicionei um tempo de 0,8s de resposta para atualizar a posição da barra do oponente toda vez que ele for errar.
Segue o código:
//dimensões da tela
let larguraTela = 800;
let alturaTela = 600;
//variáveis da bolinha
let xBolinha = larguraTela / 2;
let yBolinha = alturaTela / 2;
let diametro = 20;
let raio = diametro / 2;
//velocidade da bolinha
let velxBolinha = 6;
let velyBolinha = 6;
//variáveis da raquete
let larguraRaquete = 15;
let alturaRaquete = 80;
let yRaquete = alturaTela / 2 - (alturaRaquete / 2);
let colisao = false;
//variáveis minha raquete
let xMinhaRaquete = 5;
let yMinhaRaquete = yRaquete;
//raquete oponente
let xRaqueteOponente = larguraTela - larguraRaquete - 5;
let yRaqueteOponente = yRaquete;
let primeiraJogada = 0;
let numAleatorio = 0;
let taxaErro = 0;
//placar do jogo
let meusPontos = 0;
let pontosOponente = 0;
let meuPlacar = larguraTela / 4;
let placarOponente = larguraTela - larguraTela / 4;
//sons do jogo
let raquetada;
let ponto;
let trilha;
function preload(){
trilha = loadSound("trilha.mp3");
ponto = loadSound("ponto.mp3");
raquetada = loadSound("raquetada.mp3");
}
function setup() {
createCanvas(larguraTela, alturaTela);
trilha.loop();
}
function draw() {
background(0);
mostraBolinha();
validaPrimeiraJogada();
movimentaBolinha();
verificaBorda();
mostraRaquete(xMinhaRaquete, yMinhaRaquete);
mostraRaquete(xRaqueteOponente, yRaqueteOponente);
moveMinhaRaquete();
moveOponenteRaquete();
colisaoRaquete();
validaPontos();
placar(meuPlacar - 20, 7);
placar(placarOponente - 20, 7);
incluiPlacar(meusPontos, meuPlacar, 26);
incluiPlacar(pontosOponente, placarOponente, 26);
}
function mostraBolinha(){
circle(xBolinha, yBolinha, diametro);
}
function validaPrimeiraJogada(){
if(primeiraJogada == 0){
ladoPrimeiraJogada();
primeiraJogada = 1;
}
}
function ladoPrimeiraJogada(){
numAleatorio = gerarNumAleatorio(2);
if(numAleatorio == 0){
velxBolinha *= -1;
}
numAleatorio = gerarNumAleatorio(2);
if(numAleatorio == 0){
velyBolinha *= -1;
}
}
function movimentaBolinha(){
xBolinha += velxBolinha;
yBolinha += velyBolinha;
}
function verificaBorda(){
if(xBolinha + raio > width || xBolinha - raio < 0){
velxBolinha *= -1;
}
if(yBolinha + raio > height || yBolinha - raio < 0){
velyBolinha *= -1;
}
}
function mostraRaquete(x, y){
rect(x, y, larguraRaquete, alturaRaquete);
}
function moveMinhaRaquete(){
if(keyIsDown(UP_ARROW)){
yMinhaRaquete -= 6;
}
if(keyIsDown(DOWN_ARROW)){
yMinhaRaquete += 6;
}
}
function moveOponenteRaquete(){
yRaqueteOponente = yBolinha - (alturaRaquete / 2) + taxaErro;
}
// Fazendo com biblioteca pronta
function colisaoRaquete(){
//minha raquete colisão
colisao = collideRectCircle(xMinhaRaquete, yMinhaRaquete, larguraRaquete, alturaRaquete, xBolinha, yBolinha, raio);
if(colisao){
velxBolinha *= -1;
raquetada.play();
}
//raquete oponente colisão
colisao = collideRectCircle(xRaqueteOponente, yRaqueteOponente, larguraRaquete, alturaRaquete, xBolinha, yBolinha, raio);
if(colisao){
velxBolinha *= -1;
raquetada.play();
atualizaTaxaErro();
}
}
function gerarNumAleatorio(finalInt){
let num = Math.floor(Math.random() * finalInt);
return num;
}
function zeraTaxaErro(){
setTimeout(function(){
taxaErro = 0;
},800);
}
function atualizaTaxaErro(){
setTimeout(function(){
numAleatorio = gerarNumAleatorio(3);
if(numAleatorio == 0){
zeraTaxaErro();
} else if(numAleatorio == 1){
numAleatorio = gerarNumAleatorio(55);
taxaErro = numAleatorio;
} else {
numAleatorio = gerarNumAleatorio(55);
taxaErro = -numAleatorio;
}
},800);
}
function validaPontos(){
if(xBolinha - raio < 0){
pontosOponente += 1;
ponto.play();
atualizaTaxaErro();
}
if(xBolinha + raio > width){
meusPontos += 1;
ponto.play();
zeraTaxaErro();
}
}
function placar(x, y){
fill("#ffa500");
stroke(255);
rect(x, y, 40, 25);
}
function incluiPlacar(pontos, x, y){
textAlign(CENTER);
textSize(20)
fill(255);
text(pontos, x, y);
}