Tile collision with sliding along walls

Question

I've got a ball that I can move around on a map consisting of equally sized tiles. The player should not be able to walk over the tiles that are darker and have a black border. I've got a multidimensional array of the tiles that I use to check which tiles are solid.

I would like the player to slide against the wall if he is moving both horizontally and vertically into it. The problem is that if he does that he sticks to the wall. I managed to get it working perfectly on each axis, but separately. Here is my code for the horizontal collision checking:

if (vx < 0) {
    // checks for solid tiles left of the player
    if (level.isBlocked(i, j) || level.isBlocked(i, jj)) {
        x = side * (i + 1); // moves player to left side of tile
        vx = 0;
    }
} else if (vx > 0) {
    // checks for solid tiles right of the player
    if (level.isBlocked(ii, j) || level.isBlocked(ii, jj)) {
        x = (ii * side) - getWidth(); // moves player to right side of tile
        vx = 0;
    }
}

The level.isBlocked() method checks if that index of the array is occupied by a solid tile. The i and j variables is which index in the array the player's top right corner is located on. The ii and jj variables is which index in the array the player's bottom right corner is located on.

This works fine, but then if I add the same chunk of code beneath but replacing x with y, vx with vy and so on the problem occurs. So I can add either the horizontal or vertical collision handling and it works, but not at the same time. I've seen a few articles explaining I have to separate them or something, but I didn't understand much of them. How can I check collision on both axes and keep the sliding effect?

Answer 1

I finally got it to work. Angelatlarge's answer was helpful in understanding the problem, but I decided to start from scratch. I ended up first calculating the new x and y position and storing them in separate variables. Then I checked the tile under the middle left of the player and the same with the middle right. I then set a boolean to true if the player was standing on a tile because of his horizontal speed. If there was no collision I set the real x variable to the new one I calculated earlier. I then repeated the same thing for the vertical collision.

This is for the horizontal checking:

float newX = x + vx * delta;
boolean xCollision = false;
if (vx < 0) {
    int i = level.toIndex(x);
    int j = level.toIndex(y + getHeight() / 2);
    xCollision = level.isBlocked(i, j);
} else if (vx > 0) {
    int i = level.toIndex(x + getWidth());
    int j = level.toIndex(y + getHeight() / 2);
    xCollision = level.isBlocked(i, j);
}
if (!xCollision) x = newX;