I have this game I'm working on with a 2 dimensional array with coordinates and a generalized coordinate system (i.e. player x = 0 and y = 0, it's standing in the first item in the array). I'm trying to work out a solution to collision detection and resolving, but I'm having a really hard time. This is my code so far (detecting collisions but not resolving them correctly and I have just no clue how to fix thayut):

        let xOffset = 0;
    let yOffset = 0;
    let self = this;

    let a, b, c, d, e, f, g, h;

    // get the 4 colliding tiles from the layout array
    function reset() {
        a = Math.floor(self.x);
        b = Math.ceil(self.x);
        c = Math.floor(self.y);
        d = Math.ceil(self.y);

        e = (currentClassRoom.layout[c] || [])[a];
        f = (currentClassRoom.layout[c] || [])[b];
        g = (currentClassRoom.layout[d] || [])[a];
        h = (currentClassRoom.layout[d] || [])[b];
    }

    function X() {
        // x collisions
        // get the distance inside the block from corresponding direction

        if (Walkable.indexOf(f) < 0 || Walkable.indexOf(h) < 0) { xOffset += -(self.x - a) }
        if (Walkable.indexOf(e) < 0 || Walkable.indexOf(g) < 0) { xOffset += 1 - (self.x - a) }
    }

    function Y() {
        // y collisions
        // get the distance inside the block from corresponding direction

        if (Walkable.indexOf(e) < 0 || Walkable.indexOf(f) < 0) { yOffset += 1 - (self.y - c) };
        if (Walkable.indexOf(g) < 0 || Walkable.indexOf(h) < 0) { yOffset += -(self.y - c) };
    }

    // run and resolve

    reset();

    Y();
    this.y += yOffset;
    X();
    this.x += xOffset;

Is there something wrong with my code or is a generalized coordinate system a bad idea in my case? I haven't made anything like this and can't seem to find solutions online (which might be an indicator that the way I'm thinking about this is bad but I just don't know)