My collision detection code is wrong and idk where is the problem and how to fix it?

Question

I know how to put where my collision function is now but as you can see my function is wrong and I would like some help, please.

Here's my collison function

this.cd = function(){ ctx.clearRect(x,y1,width,y1 - y2); if (myPlayer.x >= myObstacles.x || myPlayer.x <= myObstacles.x + myObstacles.width || myPlayer.y >= 0 || myPlayer.y <= myObstacles.yStart){ alert('GAME OVER'); clearInterval(interval); }else if (myRectangle.x >= myObstacles.x || myPlayer.x <= myObstacles.x + myObstacles.width || myPlayer.y >= myObstacles.yEnd || myPlayer.y <= myObstacles.height){ alert('GAME OVER'); clearInterval(interval); }else{ } }

And here's my full code

    let b1 = document.getElementById('button1');
let c = document.getElementById('myCanvas');
let ctx = c.getContext('2d');


//Control movements of the player
// document.addEventListener('keydown', keyDownHandler, false);
// document.addEventListener('keyup', keyUpHandler, false);
// var rightPressed = false;
// var leftPressed = false;
// var upPressed = false;
// var downPressed = false;
// function keyDownHandler(e) {
//     //Right arrow key 
//     if(e.keyCode == 39) {
//         rightPressed = true;
//     }
//     //Left arrow key
//     else if(e.keyCode == 37) {
//         leftPressed = true;
//     }
//     //Down arrow key
//     if(e.keyCode == 40) {
//       downPressed = true;
//     }
//     //Up arrow key
//     else if(e.keyCode == 38) {
//       upPressed = true;
//     }
// }

//make a component for rectangle and obstacle
let myPlayer;
let timerID;
let H_gap = 250;
class Obstacles {
    constructor(x, y, width, height, color) {
        // vars
        this.x = x;
        this.y = y;
        this.width = width;
        this.color = color;
        this.gap = Math.floor(Math.random() * 30 + 1) + 50;            //50 - 150 random generated
        this.y1 = Math.floor(Math.random() * (c.height - 40 - 40 + 1)) + 40;   // prevent gap is too high or too low
        this.y2 = this.y1 + this.gap;                               // define y2 (start point of lower rect)
        // functions of obstacles
        this.draw = function () {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, 0, this.width, this.y1);
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y2, this.width, c.height);
        }
        this.move = function () {
            ctx.clearRect(this.x, 0, this.width, this.y1);
            ctx.clearRect(this.x, this.y2, this.width, c.height);
            this.x -= 10;
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, 0, this.width, this.y1);
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y2, this.width, c.height);
        }
        // this.cd = function(){
        //     ctx.clearRect(x,y1,width,y1 - y2);
        //         if (myPlayer.x >= myObstacles.x || myPlayer.x <= myObstacles.x + myObstacles.width || myPlayer.y >= 0 || myPlayer.y <= myObstacles.yStart){
        //             alert('GAME OVER');
        //             clearInterval(interval);
        //         }else if (myRectangle.x >= myObstacles.x || myPlayer.x <= myObstacles.x + myObstacles.width || myPlayer.y >= myObstacles.yEnd || myPlayer.y <= myObstacles.height){
        //             alert('GAME OVER');
        //             clearInterval(interval);
        //         }else{
        //         }
        // }

    }
}
class Player {
    constructor(x, y, width, height, color) {
        // vars
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;

        // functions of player
        this.draw = function () {
            // ctx.clearRect(0,0,480,320);
            //     if(rightPressed) {
            //         playerX += 5;
            //     }
            //     else if(leftPressed) {
            //         playerX -= 5;
            //     }
            //     if(downPressed) {
            //         playerY += 5;
            //     }
            //     else if(upPressed) {
            //         playerY -= 5;
            //     }
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.width, this.height);

        }
    }
}

b1.addEventListener('click', gameStart)

function gameStart() {

    // pre load stuffs onto the screen
    myPlayer = new Player(30, 240, 30, 30, "red")
    myPlayer.draw();
    myObstacles = [];
    myObstacles.push(new Obstacles(350, 0, 50, 320, "green"));
    myObstacles.push(new Obstacles(350 + H_gap, 0, 50, 320, "green"));
    myObstacles.push(new Obstacles(350 + 2 * H_gap, 0, 50, 320, "green"));
    myObstacles.push(new Obstacles(350 + 3 * H_gap, 0, 50, 320, "green"));

    for (let i = 0; i < myObstacles.length; i++) {
        myObstacles[i].draw();
    }
    clearInterval(updateGame);
    timerID = setInterval(updateGame, 100) // set updategame timer
}


function updateGame() {
    // update the rect
    for (let i = 0; i < myObstacles.length; i++) {
        myObstacles[i].move();
    }
    // check if obstacles outside of canvas
    if (myObstacles[0].x < -50) {
        myObstacles.shift();
        n_x = myObstacles[myObstacles.length - 1].x
        myObstacles.push(new Obstacles(n_x + H_gap, 0, 50, 320, "green"));
    }
}