Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Bolinha não COLIDE na Raquete do OPonente

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript

por Rafael Paulino Alves Xavier
| 13.4k xp | 3 posts

Boa tarde, Fiz todo o passo a passo, conferí o código e não encontrei o erro, segue o meu código:

//VARIAVEIS DA BOLINHA
let xBolinha = 300;
let yBolinha = 200;
let diametro = 18;
let raio = diametro / 2 ;

//VELOCIDADE DA BOLINHA
let velocidadeXBolinha = 2;
let velocidadeYBolinha = 2;

//VARIAVEIS DA RAQUETE
let raqueteComprimento = 10;
let raqueteAltura = 90;
let xRaquete = 5;
let yRaquete = 150;

//VARIAVEIS DO OPONENTE
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

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


let colidiu = false

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  verificaColisaoRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente,yRaqueteOponente);
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
}
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 + raqueteAltura){
    velocidadeXBolinha *= -1;
    raquetada.play();
      }
}

function verificaColisaoRaqueteOponente(){
  if (xBolinha + raio > xRaqueteOponente && yBolinha + raio < yRaqueteOponente + raqueteAltura && yBolinha - raio > yRaqueteOponente - raqueteAltura){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

function movimentaRaqueteOponente(){
 velocidadeYOponente = yBolinha -yRaqueteOponente - raqueteComprimento /2 -30;
  yRaqueteOponente += velocidadeYOponente
}
3 respostas
por Rafael Paulino Alves Xavier
| 13.4k xp | 3 posts

https://editor.p5js.org/ravidsetty/sketches/cmRMjueba

solução!
por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Rafael, tudo bem contigo?

Analisei seu código e fiz algumas alterações para fazer a bolinha colidir com a raquete do oponente. Veja abaixo o código modificado:

///VARIAVEIS DA BOLINHA
let xBolinha = 300;
let yBolinha = 200;
let diametro = 30;
let raio = diametro / 2 ;

//VELOCIDADE DA BOLINHA
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;
let raqueteComprimento = 10;
let raqueteAltura = 90;

//VARIAVEIS DA RAQUETE
let xRaquete = 5;
let yRaquete = 150;

//VARIAVEIS DO OPONENTE
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

let colidiu = false;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  colisaoMinhaRaqueteBiblioteca();
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();
  colisaoRaqueteOponenteBiblioteca(); // Adicionada a função de colisão com a raquete do oponente
}

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 colisaoMinhaRaqueteBiblioteca() {
  colidiu = collideRectCircle(
    xRaquete, yRaquete, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio
  ); 
  if (colidiu) {
    velocidadeXBolinha *= -1;
  }
}

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

function colisaoRaqueteOponenteBiblioteca() {
  colidiu = collideRectCircle(xRaqueteOponente, yRaqueteOponente, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio); 
  if (colidiu) {
    velocidadeXBolinha *= -1;
  }
}

Nesse código, adicionei a função colisaoRaqueteOponenteBiblioteca(), que verifica a colisão da bolinha com a raquete do oponente e reverte a direção da bolinha caso ocorra uma colisão. A função colisaoRaqueteOponenteBiblioteca() é chamada dentro do draw() para realizar a verificação a cada quadro.

Espero que isso resolva o problema!

Se tiver alguma dúvida ou precisar de mais ajuda, fique à vontade para perguntar.

Abraços e bons estudos.

por Rafael Paulino Alves Xavier
| 13.4k xp | 3 posts

Muito obrigado!