arrays - How do I create bounds of a 2darray tilemap in Javascript?

Question

I am creating a 2d Ascii game. Currently I have the world (leveldata) stored in a 2d array. Example:

"test2": [
        ["╔","═","═","═","═","═","═","═","═","═","╗","′","′","′","′","`","′","′","′","′","′"],
        ["║","▓","▓","▓","▓","▓","▓","▓","▓","▓","║","′","`","`","′","`","′","′","`","′","′"],
        ["║","▓","▓","▓","▓","▓","▓","▓","▓","▓","║","′","′","′","′","`","′","′","′","′","′"],
        ["║","▓","▓","▓","▓","▓","▓","▓","▓","▓","║","′","`","′","′","′","′","′","`","′","′"],
        ["╚","═","═","▓","▓","▓","▓","═","═","═","╝","′","′","′","′","′","`","′","′","′","′"],
        ["′","′","′","′","′","`","′","′","′","′","`","′","′","`","′","′","`","′","′","′","′"],
        ["′","′","`","′","′","′","′","′","′","╔","╗","′","′","′","′","′","′","′","`","′","′"],
        ["′","′","′","′","′","′","′","′","`","║","║","′","`","′","′","`","′","′","`","`","′"],
        ["′","′","′","′","′","′","′","`","′","║","║","′","′","′","′","`","′","`","`","′","′"],
        ["′","′","`","′","′","′","′","′","′","║","║","′","′","`","′","′","`","`","′","′","′"],
        ["′","′","′","′","′","′","`","′","`","║","║","`","′","′","′","′","`","′","′","`","′"]
    ]

I take this data, replace the tile where the player is and then paste it to the screen, like so:

What I want to do is take this array that I paste to the screen, and crop it around the player with variable bounds. Essentially remove any tiles that are a certain distance from a box around the player, so that the camera "follows" the player. The problem is, tiles aren't removing the way I want them to and I am stuck on what I am supposed to do. Here is all I have so far, it takes in map data, bounds, and player position, and dumps out a custom array. I am trying just the upper bounds so far...

// Cropping the game screen using a camera.
function crop(width=5, height=5, x=1, y=1, map=[]) {
    let topBound = y-height;
    let bottomBound = y + height;

    let rowsRemoved = [];

    // Loop through and remove rows that are above or below the max.
    for (let row = 0; row < map.length; row++) {
        if (row < topBound) {
            rowsRemoved.push(row);
        }
    }
    for (let i = 0; i < rowsRemoved.length; i++) {
        console.log(rowsRemoved[i]);
        map.splice(rowsRemoved[i], 1);
    }

    console.log(rowsRemoved)

    // Loop through and remove columns that are above or below the max.
    // for (let row = 0; row < map.length; row++) {
    //     for (let column = 0; column < map[row].length; column++) {
    //         if (column < x-width || column > x+width) {
    //             map[row].splice(map[row].indexOf(map[row][column]), 1);
    //         }
    //     }
    // }
    console.log("----")
    return map;
}

question from:https://stackoverflow.com/questions/65661220/how-do-i-create-bounds-of-a-2darray-tilemap-in-javascript

Answer 1

For anyone who needs the solution, turns out it was to slice the array instead of splice it, and take a totally different approach.

// Cropping the game screen using a camera.
function crop(width=5, height=5, x=1, y=1, map=[]) {
    // Get the bounds and make sure they stay within the map's bounds.
    let topBound = y - height;
    if (topBound < 0) {
        topBound = 0;
    }
    let bottomBound = y + height + 1;
    let leftBound = x - width;
    if (leftBound < 0) {
        leftBound = 0;
    }
    let rightBound = x + width + 1;

    let rowsRemoved = [];

    // Remove rows that are above or below the max.
    map = map.slice(topBound, bottomBound);
    console.log(map)

    // Remove columns that are above or below the max.
    for (let row = 0; row < map.length; row++) {
        map[row] = map[row].slice(leftBound, rightBound);
    }

    console.log("----");
    return map;
}