如何在 Javascript 中创建 2darray tilemap 的边界？

Question

我正在创建一个 2D ASCII 游戏。目前我将世界（leveldata）存储在一个二维数组中。示例：

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

我获取此数据，替换玩家所在的图块，然后将其粘贴到屏幕上，如下所示：

我想把我粘贴到屏幕上的这个数组，并用变量在播放器周围裁剪它界限。从本质上移除与玩家周围的盒子有一定距离的任何瓷砖，以便相机“跟随”玩家。

问题是，图块并没有按我希望的方式移除，我被困在我应该做的事情上。到目前为止，这是我所拥有的一切，它接收地图数据、边界和玩家位置，并转储出一个自定义数组。到目前为止，我只是在尝试上限...

// 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;
}

Answer 1

原来是对数组进行切片而不是拼接，完全不同的做法

// 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;
}

如何在 Javascript 中创建 2darray tilemap 的边界？

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

javascript

arrays

ascii

multidimensional-array