Question

如何测试2个方形对象之间的碰撞？我有一个玩家，还有一个障碍物，我想检查一下它们是否彼此碰撞。

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

这是我的玩家碰撞功能，一开始它已经定义了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）

1 个答案:

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

1 个答案:

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