Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Bug na colisão sem o uso de biblioteca

Poderiam me ajudar? Tentei aplicar sem o uso da biblioteca a colisão, na racket1 funcionou, quando apliquei a na 2 usando a aplicação na função do eixo (x,y) a bolinha trava no meio da tela e so se movimenta no eixo y.

Abaixo o código:

//variables ball
let xBall = 300;
let yBall = 200;
let diameter = 25;
let ligthning = diameter / 2;

//variables speed
let xBallspeed = 2;
let yBallspeed = 2;
let yRacket2speed = 2;

//variables racket1
let xRacket1 = 5;
let yRacket1 = 150;

//variables racket2
let xRacket2 = 585;
let yRacket2 = 150;

//variables racket size
let wRacket = 10;
let hRacket = 100;

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

function draw() {
  background(0);
  showBall();
  rollBall();
  limitBall();
  showRacket1(xRacket1, yRacket1);
  moveRacket1();
  collision(xRacket1, yRacket1);
  showRacket2(xRacket2, yRacket2);
  moveRacket2();
  collision(xRacket2, yRacket2);
}

//function ball
function showBall() {
  circle(xBall, yBall, diameter);
}

function rollBall() {
  xBall += xBallspeed;
  yBall += yBallspeed;
}

function limitBall() {
   if (xBall + ligthning > width || xBall - ligthning < 0) {
    xBallspeed *= -1;
  }

  if (yBall + ligthning > height || yBall - ligthning <0) {
    yBallspeed *= -1;
  }
}

//function racket
function showRacket1 (x,y) {
  rect(x, y, wRacket, hRacket, 10, 10);
}

function showRacket2 (x,y) {
  rect(x, y, wRacket, hRacket, 10, 10);
}

function moveRacket1() {
  if (keyIsDown(UP_ARROW)) {
    yRacket1 -= 10;
  }

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

function moveRacket2() {
  yRacket2speed = yBall - yRacket2 - wRacket / 2 - 50;
  yRacket2 += yRacket2speed;
}

function collision(x,y) {
  if (xBall - ligthning < x + wRacket && yBall - ligthning < y + hRacket && yBall + ligthning > y) {
    xBallspeed *= -1;
  }
}

function collision(x,y) {
  if (xBall - ligthning < x + wRacket && yBall - ligthning < y + hRacket && yBall + ligthning > y) {
    xBallspeed *= -1;
  }
}
1 resposta
solução!

Oi, Erikclis. Tudo bom?

Fiz algumas alterações no seu código e acho que consegui resolver seu problema.

Como não importou o arquivo, você tem que chamar o prototype para dentro do seu código.

No final dele, coloquei o código que faz a verificação da colisão entre circulo e retângulo.

Aproveitei para fazer alguns ajustes.

Criei uma variável colisao com valor inicial de falso, para verificar quando houver o contato entre o circulo e o retângulo.

Na function collision, eu ajustei os parâmentros informados. Coloquei a variavel colisao recebendo o prototype que verifica a colisão das formas.

Vou colocar o código aqui como ficou. Espero ter ajudado.

//variables ball
let xBall = 300;
let yBall = 200;
let diameter = 25;
let ligthning = diameter / 2;

//variables speed
let xBallspeed = 2;
let yBallspeed = 2;
let yRacket2speed = 2;

//variables racket1
let xRacket1 = 5;
let yRacket1 = 150;

//variables racket2
let xRacket2 = 585;
let yRacket2 = 150;

//variables racket size
let wRacket = 10;
let hRacket = 100;

let colisao = false;

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

function draw() {
  background(0);
  showBall();
  rollBall();
  limitBall();
  showRacket1(xRacket1, yRacket1);
  moveRacket1();
  collision(xRacket1, yRacket1);
  showRacket2(xRacket2, yRacket2);
  moveRacket2();
  collision(xRacket2, yRacket2);
}

//function ball
function showBall() {
  circle(xBall, yBall, diameter);
}

function rollBall() {
  xBall += xBallspeed;
  yBall += yBallspeed;
}

function limitBall() {
   if (xBall + ligthning > width || xBall - ligthning < 0) {
    xBallspeed *= -1;
  }

  if (yBall + ligthning > height || yBall - ligthning <0) {
    yBallspeed *= -1;
  }
}

//function racket
function showRacket1 (x,y) {
  rect(x, y, wRacket, hRacket, 10, 10);
}

function showRacket2 (x,y) {
  rect(x, y, wRacket, hRacket, 10, 10);
}

function moveRacket1() {
  if (keyIsDown(UP_ARROW)) {
    yRacket1 -= 10;
  }

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

function moveRacket2() {
  yRacket2speed = yBall - yRacket2 - wRacket / 2 - 50;
  yRacket2 += yRacket2speed;
}

function collision(x,y) {
  colisao = collideRectCircle (x, y, wRacket, hRacket, xBall, yBall, ligthning)

  if (colisao) {
    xBallspeed *= -1;
  }
}


p5.prototype.collideRectCircle = function (rx, ry, rw, rh, cx, cy, diameter) {
  //2d
  // temporary variables to set edges for testing
  var testX = cx;
  var testY = cy;

  // which edge is closest?
  if (cx < rx){         testX = rx       // left edge
  }else if (cx > rx+rw){ testX = rx+rw  }   // right edge

  if (cy < ry){         testY = ry       // top edge
  }else if (cy > ry+rh){ testY = ry+rh }   // bottom edge

  // // get distance from closest edges
  var distance = this.dist(cx,cy,testX,testY)

  // if the distance is less than the radius, collision!
  if (distance <= diameter/2) {
    return true;
  }
  return false;
};