Как проверить столкновение между двумя квадратными объектами по x и y?(p5.js) - PullRequest
Новая
       30

Как проверить столкновение между двумя квадратными объектами по x и y?(p5.js)

1 голос
/ 10 июня 2019

Как я могу проверить столкновения между двумя квадратными объектами?У меня есть плеер и блочный объект, и я хочу проверить, не сталкиваются ли они друг с другом.

Я пытался использовать много алгоритмов обнаружения столкновений, но, похоже, они не работают в моемпроект, или я просто не правильно их кодировал.

Это моя функция столкновения игрока, в начале она определила 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;
    }
  }

Itсчитает, что объект находится где-то внизу, а также имеет бесконечную ось х?Важные переменные в объекте блока для столкновения: 

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

Он также начинает снижаться в начале, даже если я установил его в блоке в начале.Спасибо за ваше время.

Вот мой полный код (каждая функция 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>

1 Ответ

0 голосов
/ 10 июня 2019

Чтобы проверить столкновение с прямоугольниками, необходимо проверить, перекрываются ли прямоугольники в обоих измерениях.

Для каждого измерения существуют следующие возможные случаи (пример для измерения 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>
...