Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Colisão da biblioteca collide2d

Olá, sobre a biblioteca collide2d mostrada na aula, fiz um teste aumentando a largura da raquete e centralizando-a no meio da tela para verificar se colisões nas partes de cima e em baixo eram detectadas. As detecções dos dois lados são ok, porém as parte de cima e de baixo não apresentam colisão. A bola "entra" e colide nas paredes interiores... Será que tem algo errado com meu código? Acredito que o criador da biblioteca tenha levado em consideração as colisões no topo e em baixo do retângulo... https://editor.p5js.org/lemos/present/kEF5PLUJV

https://editor.p5js.org/lemos/sketches/kEF5PLUJV


// Variáveis da Bola
let bola_x = 300;
let bola_y = 200;
let bola_diametro = 30;
let bola_raio = bola_diametro / 2;


// Velocidade da Bola
let bola_velocidade_x = 6;
let bola_velocidade_y = 1;

// Variáveis da quadra
let borda_oponente = 600;
let borda_jogador = 0;
let limite_superior = 0;
let limite_inferior = 400;

// Variáveis da Raquete
let raquete_x = 200;
let raquete_y = 150;
let raquete_largura = 100;
let raquete_altura = 100;

let colidiu = false;

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

function draw() {
  background(0);
  mostraBola();
  movimentaBola();
  verificaColisaoParede();
  mostraRaquete();
  movimentaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoNovo();
}


function mostraBola() {
  circle(bola_x, bola_y, bola_diametro);
}


function movimentaBola() {
  bola_x += bola_velocidade_x;
  bola_y += bola_velocidade_y;
}


function verificaColisaoParede() {
  if ((bola_x + bola_raio > borda_oponente) ||
     (bola_x - bola_raio < borda_jogador)){
    bola_velocidade_x *= -1;  
  }

  if ((bola_y - bola_raio < limite_superior) ||
     (bola_y + bola_raio > limite_inferior)){

    bola_velocidade_y *= -1;

  }
}

function mostraRaquete() {
  rect(raquete_x, raquete_y, raquete_largura, raquete_altura);
}


function movimentaRaquete() {
  if(keyIsDown(UP_ARROW)) {
    raquete_y -= 10;
  }

  if (keyIsDown(DOWN_ARROW)) {
    raquete_y += 10;  
  }
}

function verificaColisaoRaquete() {
  if (bola_x - bola_raio < raquete_x + raquete_largura &&
     bola_y - bola_raio < raquete_y + raquete_altura &&
     bola_y + bola_raio > raquete_y) {
    bola_velocidade_x *= -1;

  }
}


function verificaColisaoNovo(){

  colidiu = collideRectCircle(raquete_x, raquete_y, raquete_largura, raquete_altura, bola_x, bola_y, bola_raio)

  if(colidiu){
    bola_velocidade_x *= -1;
  }

}
2 respostas
solução!

Fala Bruno, tudo bem?

Antes de mais nada, Parabéns pelo seu projeto.

Em relação a forma que a função collideRectCircle que reconhece as colisões, ao passarmos os parâmetros da raquete e do círculo, qualquer ponto entre essas duas formas geométricas que houver colisão serão reconhecidas.

: )

Olá, Desculpe, quando mandei o link era da versão com o teste que eu mencionei (colocando a raquete no meio da tela e aumentando a largura). Acabei concluindo o projeto e esqueci que esses links atualizariam também.

O problema que eu tive era que caso se alterasse a largura da raquete e a posicionasse, por exemplo, no meio da tela, haveria um comportamento indesejado da bola não colidir com as partes de cima e de baixo da raquete (a bola "entrava" por essas partes).

Experimente o seguinte código:

// Variáveis da Bola
let bola_x = 300;
let bola_y = 200;
let bola_diametro = 30;
let bola_raio = bola_diametro / 2;

// Velocidade da Bola
let bola_velocidade_x = 6;
let bola_velocidade_y = 6;

// Variáveis da quadra
let borda_oponente = 600;
let borda_jogador = 0;
let borda_superior = 0;
let borda_inferior = 400;

// Variáveis padrões das raquetes
let raquete_largura_padrao = 100;
let raquete_altura_padrao = 100;


// Variáveis do Jogador
let raquete_x_jogador = 200;
let raquete_y_jogador = 150;
let raquete_largura_jogador = raquete_largura_padrao;
let raquete_altura_jogador = raquete_altura_padrao;

// Variáveis do Oponente
let raquete_x_oponente = 580;
let raquete_y_oponente = 150;
let raquete_largura_oponente = raquete_largura_padrao;
let raquete_altura_oponente = raquete_altura_padrao;
let velocidade_y_oponente;

// Variáveis do placar
let pontos_jogador = 0;
let pontos_oponente = 0;

// Sons do Jogo
let raquetada;
let ponto;
let trilha;

let colidiu = false;

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


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

}

function draw() {
  background(0);
  mostraBola();
  movimentaBola();
  verificaColisaoParede();
  mostraRaquete(raquete_x_jogador, raquete_y_jogador);
  //mostraRaquete(raquete_x_oponente, raquete_y_oponente);
  movimentaRaqueteJogador();
  movimentaRaqueteOponente();
  verificaColisaoRaqueteBiblioteca(raquete_x_jogador, raquete_y_jogador);
  verificaColisaoRaqueteBiblioteca(raquete_x_oponente, raquete_y_oponente);
  incluiPlacar();
  marcaPonto();

}


function mostraBola() {
  circle(bola_x, bola_y, bola_diametro);
}

function movimentaBola() {
  bola_x += bola_velocidade_x;
  bola_y += bola_velocidade_y;
}

function verificaColisaoParede() {
  if ((bola_x + bola_raio > borda_oponente) ||
     (bola_x - bola_raio < borda_jogador)){
    bola_velocidade_x *= -1;  
  }

  if ((bola_y - bola_raio < borda_superior) ||
     (bola_y + bola_raio > borda_inferior)){

    bola_velocidade_y *= -1;


  }
}

function mostraRaquete(x, y) {
  rect(x, y, raquete_largura_jogador, raquete_altura_jogador);
}



function movimentaRaqueteJogador() {
  if(keyIsDown(UP_ARROW)) {
    raquete_y_jogador -= 10;
  }

  if (keyIsDown(DOWN_ARROW)) {
    raquete_y_jogador += 10;  
  }
}

function movimentaRaqueteOponente(){
  velocidade_y_oponente = bola_y - raquete_y_oponente - raquete_altura_oponente / 2 - 80;
  raquete_y_oponente += velocidade_y_oponente;
}


function verificaColisaoRaquete() {
  if (bola_x - bola_raio < raquete_x_jogador + raquete_largura_jogador &&
     bola_y - bola_raio < raquete_y_jogador + raquete_altura_jogador &&
     bola_y + bola_raio > raquete_y_jogador) {
    bola_velocidade_x *= -1;

  }
}

function verificaColisaoRaqueteBiblioteca(x, y){

  colidiu = collideRectCircle(x, y, raquete_largura_padrao, raquete_altura_padrao, bola_x, bola_y, bola_raio);

  if(colidiu){
    bola_velocidade_x *= -1;
    raquetada.play();
   }
 }

function incluiPlacar(){
  stroke(255);
  textAlign(CENTER);
  textSize(16);
  fill(color(255, 140, 0));
  rect(130, 10, 40, 20);
  fill(255)
  text(pontos_jogador, 150, 26);
  fill(color(255, 140, 0));
  rect(430, 10, 40, 20);
  fill(255)
  text(pontos_oponente, 450, 26);

}

function marcaPonto() {
  if(bola_x > 585) {
    pontos_jogador += 1;
    ponto.play();
  }

  if(bola_x < 15) {
    pontos_oponente += 1;
    ponto.play();
  }

}