如何检查 x 和 y 上 2 个正方形对象之间的碰撞？ (p5.js)

Question

如何测试两个正方形物体之间的碰撞？我有一个播放器和一个块对象，我想检查它们是否相互碰撞。

我试过使用很多碰撞检测算法，但它们似乎在我的项目中不起作用，或者我没有正确编码它们。

这是我的玩家碰撞函数，一开始它定义了 x,y 位置和一个固定变量。

this.testCollisions = function(other){
    if (this.x+20 < other.x || this.x > other.x+other.w ||
        this.y+20 < other.y || this.y > other.y+other.h) {
      print("collision")
      this.grounded = true;
    } else {
      this.grounded = false;
    }
  }

它认为物体在下面的某个地方，而且它的x轴是无限大的？碰撞块对象中的重要变量是：

this.x = x; // float
this.y = y;
this.h = 40;
this.w = 40;

它也会在开始时开始下降，即使我已将它设置为在开始时处于阻塞状态。谢谢你的时间。

Here is my full code ( each function NAME(){} is a new file)

function Player(){
    this.x = width/2+10;
    this.y = height/2-20;
    this.grounded = true;
    this.show = function(){
        fill(255);
        square(this.x,this.y,20);
    }
    this.testCollisions = function(other){
        if (this.x+20 < other.x || this.x > other.x+other.w ||
            this.y+20 < other.y || this.y > other.y+other.h) {
              print("collision")
              this.grounded = true;
        } else {  
              this.grounded = false;
        }
    }
    this.affectGravity = function(){
        if (!this.grounded)
            this.y+=1;
    }
}
 
function Block(x,y,grassed){
    this.grassed = grassed; // bool
    this.x = x; // float
    this.y = y;
    this.h = 40;
    this.w = 40;
    this.gh = 15;
    this.gw = 40;
    this.render = function(){
        if (this.grassed){
            fill("#AF7250");
            rect(this.x,this.y,this.w,this.h);
            fill("#869336");
            rect(this.x,this.y,this.gw,this.gh);
        }
    }
}
 
var block;
var player;
var grounded = true;
function setup() {
    createCanvas(400, 400);
    block = new Block(height/2,width/2,true);
    player = new Player();
}
 
function draw() {
    background(120);
    block.render();
    player.show();
    if (keyIsDown(LEFT_ARROW)){
        player.x --;
    } else if (keyIsDown(RIGHT_ARROW)){
        player.x ++;
    }
    strokeWeight(1);
    player.testCollisions(block);
    player.affectGravity();
    console.log(player.grounded);
}
function keyPressed(){
    if (player.grounded && keyCode === 32){
        for (let i = 0; i < 10; i++)
            player.y-=1;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

Answer 1

要检查矩形的碰撞，您必须检查矩形在两个维度上是否重叠。

对于每个维度，有以下可能的情况（维度 x 的示例）：

不重叠：

x1      x1+w1
  +----+
            +----+
          x2      x2+w2

           x1      x1+w1
             +----+
  +----+
x2      x2+w2

重叠

x1                x1+w1
  +--------------+
       +----+
     x2      x2+w2

     x1      x1+w1
       +----+
  +---------------+
x2                 x2+w2

x1           x1+w1
  +---------+
       +----------+
     x2            x2+w2

     x1            x1+w1
       +----------+
  +----------+
x2            x2+w2

这意味着，范围重叠如果

x1 < x2+w2 AND x2 < x1+w1

这会导致以下情况：

this.testCollisions = function(other){
    if (this.x < other.x+other.w && other.x < this.x+20 &&
        this.y < other.y+other.h && other.y < this.y+20) {
          print("collision")
          this.grounded = true;
    } else {
          this.grounded = false;
    }
  }

function Player(){
    this.x = width/2+10;
    this.y = 10;
    this.grounded = true;
    this.show = function(){
        fill(255);
        square(this.x,this.y,20);
    }
    this.testCollisions = function(other){
        if (this.x < other.x+other.w && other.x < this.x+20 &&
            this.y < other.y+other.h && other.y < this.y+20) {
              print("collision")
              this.grounded = true;
        } else {  
              this.grounded = false;
        }
    }
    this.affectGravity = function(){
        if (!this.grounded)
            this.y+=1;
    }
}
 
function Block(x,y,grassed){
    this.grassed = grassed; // bool
    this.x = x; // float
    this.y = y;
    this.h = 40;
    this.w = 40;
    this.gh = 15;
    this.gw = 40;
    this.render = function(){
        if (this.grassed){
            fill("#AF7250");
            rect(this.x,this.y,this.w,this.h);
            fill("#869336");
            rect(this.x,this.y,this.gw,this.gh);
        }
    }
}
 
var block;
var player;
var grounded = true;
function setup() {
    createCanvas(400, 200);
    block = new Block(width/2,height-40,true);
    player = new Player();
}
 
function draw() {
    background(120);
    block.render();
    player.show();
    if (keyIsDown(LEFT_ARROW)){
        player.x --;
    } else if (keyIsDown(RIGHT_ARROW)){
        player.x ++;
    }
    strokeWeight(1);
    player.testCollisions(block);
    player.affectGravity();
    console.log(player.grounded);
}
function keyPressed(){
    if (player.grounded && keyCode === 32){
        for (let i = 0; i < 10; i++)
            player.y-=1;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

如何检查 x 和 y 上 2 个正方形对象之间的碰撞？ (p5.js)

How do I check collision between 2 square objects on x and y? (p5.js)

processing

collision-detection

p5.js