Bolinha passa direto da raquete do oponente

Olá, Priscilla. Espero que esteja tudo bem com você :)

O link que você enviou é apenas para visualização do jogo e não consigo conferir seu código.

Você poderia copiar o link do navegador (como aparece na imagem) e colar aqui no fórum

Até breve e bons estudos!

Desculpa Camila.

https://editor.p5js.org/priscillafumaux/sketches/FPKOrNAiA

Olá, Priscilla! Boa tarde!

Nossa, eu bati cabeça com essa e sabe o que era? Apenas faltou um "f" na função verificaColisaoRaquete() :D

Separei alguns pontos de atenção no seu código e vou explicar um pouco mais detalhadamente:

-

1. Definição da função verificaColisaoRaquete()

• O P5 mostrava esse erro no console:

p5.js says: There's an error due to "verificaColisaoRaquete" not being defined in the current scope (on line 136 in about:srcdoc [about:srcdoc:136:2]).

Isso significa que a função não havia sido definida no seu projeto, então fiquei procurando e não encontrava nada errado, era apenas o f, olha só como estava:

function vericaColisaoRaquete(x, y){ //bem aqui, VERICA no lugar de VERIFICA
  colidiu = 
collideRectCircle(x, y,raqueteComprimento,raqueteAltura,
xBolinha,yBolinha,raio);
  if (colidiu){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

• Como resolver?

Basta corrigirmos o nome da função e deixarmos igual ao que você chamou na função draw()

function verificaColisaoRaquete(x, y)
{
  colidiu = collideRectCircle(x, y,raqueteComprimento,raqueteAltura,
xBolinha,yBolinha,raio);
  if (colidiu){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

Foi apenas a falta do "f" que causou todo esse problema. Isso pode parecer algo pequeno mas é bem comum (além disso, esse comportamento da linguagem é super importante para mantermos o padrão e evitarmos conflitos no código). Vou enviar um tópico em que explico melhor sobre declaração de variáveis e funções para você entender melhor: https://cursos.alura.com.br/forum/topico-erro-ao-colidir-com-a-raquete-160324

2.Biblioteca Collide

Percebi que falta você importar a biblioteca Collide para o seu projeto. Para fazer isso, basta realizar o download na página do P5 para sua máquina e depois importar para seu projeto.

• Como resolver?

Vou deixar o link com a aula em que o instrutor direciona todos os passos: https://cursos.alura.com.br/course/pong-javascript/task/56101

-

3.Função draw()

Como podemos observar, nomes iguais ou repetidos geram conflitos no código. Como você possui duas funções verificaColisaoRaquete() , onde uma está a solução sem a biblioteca e a outra está com o collide, o p5 irá apresentar um erro (seria até interessante se você testasse chamando as duas para ver o que acontece, o que acha? :D).

• Qual a solução?

Precisamos comentar a primeira função verificaColisaoRaquete() para eliminar os conflitos. Vou deixar o código da draw() para você observar.

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  //verificaColisaoRaquete(); Essa função deve ser comentada pois o
  //nome duplicado irá gerar um conflito
  verificaColisaoRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
}

-

Caso você ainda possua alguma dúvida ou precise de mais esclarecimento, só falar que estamos por aqui!

Um abraço, Priscilla!

Bons estudos!

https://editor.p5js.org/priscillafumaux/sketches/FPKOrNAiA Oi Camila. Então, fiz os ajustes, inclui a biblioteca (que eu não sei ainda que merda eu tinha feito pra ela sumir kkkkk). Funcionou, porém os pontos estão marcando de três em três. Daí eu incluí a variavel para o oponente ter chance de errar. Agora, além de os pontos estarem indo de três em três, a raquete do oponente sumiu. kkkkk (rindo de nervoso)

Engraçado que eu já fiz o outro joguinho para a vaquinha atravessar a rua e foi bemmmmm mais simples e não deu nenhum erro. Sacanagem esse pong comigo. O meu da vaquinha https://editor.p5js.org/priscillafumaux/sketches/fmNUEZFbD

Olá, Priscilla!

Corrigi seu código, a única coisa que faltava era atribuir o valor 0 para a variável chanceDeErrar. No seu código você estava apenas declarando a variável mas não informava o valor, e isso gerou o conflito.

Modifique também o valor da sensibilidade da colisão da bolinha com a borda do oponente e o valor da velocidade da bolinha (muito lento gera um bug terrível hahaha).

Vou deixar o código para você aqui

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 16;
let raio = diametro / 2 ;

//velocidade da bolinha
let velocidadeXBolinha = 6; // aumentei a velocidade
let velocidadeYBolinha = 6;

//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

let colidiu = false;

//variáveis da raquete do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

//placar do jogo
let meusPontos = 0;
let pontosDoOponente = 0;

//sons do jogo
let ponto;
let raquetada;
let trilha;

//chance de errar
let chanceDeErrar = 0; //declarei que o valor inicial da variável chanceDeErrar é = 0

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

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);  
  movimentaMinhaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
}

function mostraBolinha(){
  circle(xBolinha, yBolinha, diametro);
}

function movimentaBolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

function verificaColisaoBorda(){
  if (xBolinha + raio > width ||
     xBolinha - raio < 0){
    velocidadeXBolinha *= -1;
  }
  if (yBolinha + raio > height ||
     yBolinha - raio < 0){
    velocidadeYBolinha *= -1;
  }
}

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

function movimentaMinhaRaquete(){
  if (keyIsDown(UP_ARROW)){
    yRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yRaquete += 10;
  }
}

function verificaColisaoRaquete(){
  if (xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

function verificaColisaoRaquete(x, y){
  colidiu = collideRectCircle(x, y,raqueteComprimento,raqueteAltura,
xBolinha,yBolinha,raio);
  if (colidiu){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

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

function calculaChanceDeErrar() {
  if (pontosDoOponente >= meusPontos) {
    chanceDeErrar += 1
    if (chanceDeErrar >= 39){
    chanceDeErrar = 40

    }
  } else {
    chanceDeErrar -= 1
    if (chanceDeErrar <= 35){
    chanceDeErrar = 35
    }
  }
}

function incluiPlacar(){
  stroke(255);
  textAlign(CENTER);
  textSize(16);
  fill(color(255, 140, 0));
  rect(150, 10, 40, 20);
  fill(255);
  text(meusPontos, 170, 26);
  fill(color(255, 140, 0));
  rect(450, 10, 40, 20);
  fill(255);
  text(pontosDoOponente, 470, 26);
}

function marcaPonto(){
  if (xBolinha > 590){
    meusPontos += 1;
    ponto.play();
  }
  if (xBolinha < 8){  //aumentei a sensibilidade da colisão diminuindo o valor na condição
    pontosDoOponente += 1;
    ponto.play();
  }
}

Ah, o jogo da vaquinha ficou show, viu!!!! Suas customizações ficaram ótimas e estou muito feliz que você já se sinta segura para deixar seu jogo da forma que mais lhe agrada, isso é uma constatação que você vem evoluindo cada vez mais! Parabéns mesmo!

Um grande abraço e continue compartilhando suas dúvidas e soluções conosco ! :)