Land a character on a block after he jumps on it in p5.js game

Question

I'm just trying to create a small 2d game where we control a character that can place block on the "map" with the mouse and jump on it to climb etc. It's just a test to practice.

I've achieved to make the character stops when he walk into blocks.

But, i'm facing a problem when I want my character to jump on a block, i'm not able to make him land on it. I can't find the condition to. Can someone helps me on it ? The code that handle the collision between the character and blocks is in the draw function and in the for.

Controls

• Left: Q
• Right: D
• Jump: Space Bar
• Place a block: Mouse Click
• Remove a block: Mouse Click

Edit: You might have ask yourself why i'm using some variables that are not declared anywhere. It's because they are given by P5.js. (ex: width)

function Man() {
    this.w = 20;
    this.h = 40;
    this.x = width/2;
    this.y = height - this.h;
    this.canJump = true;

    this.velocity = 0;

    this.show = function(){
        fill(255);
        rect(this.x, this.y, this.w, this.h);
    }

    this.update = function(){
        this.velocity += gravity;
        this.y += this.velocity;

        if(this.y + this.h  > height) {
            this.y = height - this.h ;
            this.velocity = 0;
            this.canJump = true;
        }

        if(this.x <= 0) {
            this.x = 0;
        }

        if(this.x + this.w >= width) {
            this.x = width - this.w;
        }
    }

    this.jump = function(){
        if(this.canJump) {
            man.velocity -= 6;
            this.canJump = false;
        }
    }
}


var man;
var ground;

var gravity = 0.4;

function setup(){
    frameRate(60);
    createCanvas(640, 480);

    man = new Man();
}

var tilesSize = 20;
var tiles = [];

for(var i = 0; i < 640; i+= tilesSize) {
    for(var j = 0; j < 480; j+= tilesSize) {
        tiles.push({x:i, y:j, empty: true});
    }
}

function draw(){
    background(0);
    noStroke();

    push();
    for(var i = 0; i < tiles.length; i++) {
        if(!tiles[i].empty) {
            fill(150);
            rect(tiles[i].x, tiles[i].y, tilesSize, tilesSize);
        }
        if(mouseX >= tiles[i].x && mouseX < tiles[i].x + tilesSize && mouseY >= tiles[i].y && mouseY < tiles[i].y + tilesSize) {
            if(tiles[i].empty) {
                fill(50);
                rect(tiles[i].x, tiles[i].y, tilesSize, tilesSize);
            }else {
                fill(255,0,0);
                rect(tiles[i].x, tiles[i].y, tilesSize, tilesSize);
            }
        }

        // HERE IS CONDITIONS FOR COLLISION WITH BLOCK
        if(!tiles[i].empty) { 

            if(tiles[i].x + tilesSize >= man.x && tiles[i].x < man.x && tiles[i].y < man.y + man.h ) {      
                man.x = tiles[i].x + tilesSize;    
            }
            if(man.x + man.w >= tiles[i].x && man.x <= tiles[i].x && tiles[i].y < man.y + man.h) {
                man.x = tiles[i].x - man.w;
            }
        }
    }
    pop();

    man.show();
    man.update();
    
    moveMan(); 
}

function moveMan(){
    if(keyIsDown(81)) {
        man.x -= 2;
    }
    if(keyIsDown(68)) {
        man.x += 2;
    }
}

function keyPressed() {
    if(keyIsDown(32)) {
       man.jump();
    }
}

function mouseClicked() {
    for(var i = 0; i < tiles.length; i++) {
        if(mouseX >= tiles[i].x && mouseX < tiles[i].x + tilesSize && mouseY >= tiles[i].y && mouseY < tiles[i].y + tilesSize) {
            if(tiles[i].empty) {
                tiles[i].empty = false;
            }else {
                tiles[i].empty = true;
            }
        }
    }
}

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