I am making a simple in-browser maze game using HTML and Javascript (Canvas), and am trying to make a function which will return true if the player's hitbox intersects with one of the maze walls. t is the player hitbox, r is one of the maze walls (they all get passed into this function one by one). For both rectangles, x1 and y1 represent the top left corner, and x4 and y4 represent the bottom right corner (x+width and y+height). This function returns true even when the player hitbox is clearly not intersecting with anything. What can I fix here?

function detectCollision(t,r) {
        intersection = true;
        
        //check if no horizontal overlap
        if ((t.x1 > r.x4) || (r.x1 > t.x4)) {
            intersection = false;
            }
        //vertical overlap
        if ((t.y1 > r.y4) || (r.y1 > t.y4)) {
            intersection = false;
            }