如何检查x和y上2个正方形对象之间的碰撞?(p5.js) [英] How do I check collision between 2 square objects on x and y? (p5.js)

问题描述

如何测试2个方形对象之间的碰撞?我有一个播放器，还有一个障碍物，我想检查一下它们是否相互碰撞.

How do I test collisions between 2 square objects? I have a player, and a block object, and i want to check if they are colliding whit each other.

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

I've tried to use a lot of collision detections algos, but they seem to not work in my project, or i just didnt't code them right.

这是我的玩家碰撞功能，一开始它已经定义了x，y位置和一个接地变量.

This is my player collision function, at the start it has defined x,y positions and a grounded variable.

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轴?块对象中发生碰撞的重要变量是:

It thinks that the object is somewhere down, and also it has infinite x axis? the important variables in the block object for collision are:

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

它也从一开始就开始下降，即使我已将其设置为在一开始就在块上.谢谢您的宝贵时间.

It also starts going down at the start, even tho i have set it to be on the block at the start. Thank you for your time.

这是我的完整代码(每个函数NAME(){}是一个新文件)

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>

推荐答案

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

To check for a collision of to rectangles, you've to check if the rectangles are overlapping in both dimensions.

对于每个维度，都有以下几种可能的情况(例如x维度):

For each dimension there are the following possible cases (example for dimension 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

这意味着，如果范围重叠，则

This mean, that the ranges are overlapping if

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)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！