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

Question

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.

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;
    }
  }

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.

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

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

For each dimension there are the following possible cases (example for dimension x):

Not overlapping:

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

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

Overlapping

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 leads to the following condition:

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>