I am pretty new to JavaScript and PIXI. I am making a little game that requires the player to navigate and grab a key (move onto the same space as the key). This takes them to the next level. My problem is that whenever a new level is generated, it somehow uses the x and y coordinates for the key of the previous level to skew the logic. Because of this, the first level works fine, but every level afterwards is messed up.

The levels get skewed up and to the left by the respective values of the previous key. I have a 2d array in the background which holds values of where and where not the player can (holds values for things like walls, turrets, and the key). I randomly generate the key coordinates and for example set grid[9][12] = 3; for the key space. The next level visually looks perfect, with the walls and key generating, and the player being in the top left. However because of the skew, the top left of the visuals is really at [max_X - 9][max_Y - 12] and the player can go off screen to invisibly access the rest of the maze. So I can then phase through walls because the logic has the walls in a different place than the visuals, and the actual key space usually ends up off screen.

Here is my code that generates a new goal (key) object

function createGoal(scene) {
    while (true) {
        let x = getRandomInt(APP_WIDTH);
        let y = getRandomInt(APP_HEIGHT);
        //if space is not already occupied, populate
        if (grid[x][y] == 0) {
            console.log(x);
            console.log(y);
            goal = null;
            goal = new Goal(TILE_WIDTH, x, y);
            scene.addChild(goal);
            grid[x][y] = 3;
            break;
        }
    }
}

And here is the grid initialization:

const grid = new Array(APP_WIDTH);

for (let i = 0; i < APP_WIDTH; i++) {
    grid[i] = new Array(APP_HEIGHT);
    for (let j = 0; j < APP_HEIGHT; j++) {
        grid[i][j] = 0;
    }
}

Any help would be greatly appreciated.