p5.js 矩形圆碰撞，似乎无法检测到

Question

有人可以帮助我吗，我似乎无法在球阵列和矩形对象之间进行碰撞检测。

var balls = [];
var obstacle;

function setup() {
  createCanvas(windowWidth, windowHeight);
  obstacle = new Obstacle();
}

function draw() {
  background(75);
  obstacle.display();
  for(var i = 0; i < balls.length; i++) {
    balls[i].display();
    balls[i].update();
    balls[i].edges();
   }
}

function mousePressed() {
   balls.push(new Ball(mouseX, mouseY));
 }

function Ball(x, y) {
  this.x = x;
  this.y = y;
  this.r = 15;
  this.gravity = 0.5;
  this.velocity = 0;
   this.display = function() {
     fill(255, 0 , 100);
     stroke(255);
     ellipse(this.x, this.y, this.r*2);
  }
    this.update = function() {
    this.velocity += this.gravity;
    this.y += this.velocity;
  }
  this.edges = function() {
    if (this.y >= windowHeight - this.r*2) {
       this.y = windowHeight - this.r*2;
      this.velocity = this.velocity* -1;
      this.gravity = this.gravity * 1.1;
    }
  }
}

function Obstacle() {
  this.x = windowWidth - windowWidth;
  this.y = windowHeight / 2;
  this.w = 200;
  this.h = 25;

  this.display = function() {
    fill(0);
    stroke(255);
    rect(this.x, this.y, this.w, this.h);
  }
}

function RectCircleColliding(Ball, Obstacle) {
     var distX = Math.abs(Ball.x - Obstacle.x - Obstacle.w / 2);
     var distY = Math.abs(Ball.y - Obstacle.y - Obstacle.h / 2);
    if (distX > (Obstacle.w / 2 + Ball.r)) {
        return false;
         console.log("no hit");
     }
    if (distY > (Obstacle.h / 2 + Ball.r)) {
         return false;
        console.log("no hit");
    }

    if (distX <= (Obstacle.w / 2)) {
         return true;
         console.log("hit");
    }
    if (distY <= (Obstacle.h / 2)) {
        return true;
        console.log("hit");
    }

    var dx = distX - Obstacle.w / 2;
    var dy = distY - Obstacle.h / 2;
     return (dx * dx + dy * dy <= (Ball.r * Ball.r));
}

我似乎无法让它检测到任何东西，我将不胜感激任何帮助。我正在使用 p5.js 库。我似乎无法让它检测到任何东西。

Answer 1

在您提供的代码中，从未调用过检查碰撞的函数，即使调用了，也不起作用。

这是我的尝试。更改了 RectCircleColliding 方法并在 draw 中调用它。

var balls = [];
var obstacle;

function setup() {
  createCanvas(windowWidth, windowHeight);
  obstacle = new Obstacle();
}

function draw() {
  background(75);
  obstacle.display();
  for(var i = 0; i < balls.length; i++) {
    balls[i].display();
    balls[i].update();
    balls[i].edges();
    console.log(RectCircleColliding(balls[i], obstacle));
   }
}

function mousePressed() {
   balls.push(new Ball(mouseX, mouseY));
 }

function Ball(x, y) {
  this.x = x;
  this.y = y;
  this.r = 15;
  this.gravity = 0.5;
  this.velocity = 0;
   this.display = function() {
     fill(255, 0 , 100);
     stroke(255);
     ellipse(this.x, this.y, this.r*2);
  }
    this.update = function() {
    this.velocity += this.gravity;
    this.y += this.velocity;
  }
  this.edges = function() {
    if (this.y >= windowHeight - this.r*2) {
       this.y = windowHeight - this.r*2;
      this.velocity = this.velocity* -1;
      this.gravity = this.gravity * 1.1;
    }
  }
}

function Obstacle() {
  this.x = windowWidth - windowWidth;
  this.y = windowHeight / 2;
  this.w = 200;
  this.h = 25;

  this.display = function() {
    fill(0);
    stroke(255);
    rect(this.x, this.y, this.w, this.h);
  }
}

function RectCircleColliding(Ball, Obstacle) {
    // define obstacle borders
    var bRight = Obstacle.x + Obstacle.w;
    var bLeft = Obstacle.x;
    var bTop = Obstacle.y;
    var bBottom = Obstacle.y + Obstacle.h;

    //compare ball's position (acounting for radius) with the obstacle's border
    if(Ball.x + Ball.r > bLeft)
        if(Ball.x - Ball.r < bRight)
            if(Ball.y + Ball.r > bTop)
                if(Ball.y - Ball.r < bBottom)
                    return(true);
    return false;
}

p5.js 矩形圆碰撞，似乎无法检测到

p5.js rect circle collision, cant seem to get it to detect

javascript

geometry

collision-detection

collision

p5.js