2d 游戏中的相机

Question

澄清
我找到了一个正是我想要做的视频。我标记了 youtuber 谈论它的确切时间，所以除非你想观看整件事，否则不要跳过或重新开始视频。 https://youtu.be/9V3BnBeFmLs?t=299

目标：我有一个二维数组。考虑到我有以下格式的数组：

&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&.&&&&
&&&&&&..&&&&&.&&&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&

我将如何制作一个相机，它会根据它的 2d Position (x, y) 输出：

&&&&&&&&&&&&&&&&&&
&&&&&|---|&&&.&&&&
&&&&&|..&|&&&.&&&&
&&&&&|---|&&&&&&&&
&&&&&&&&&&&&&&&&&&

管道用于表示相机输出的边缘 我尝试了 2 种不同的方法。 #1 是我使用 2 个嵌套的 for 循环来搜索相机范围内二维数组上的每个字符，从左上角开始。 这似乎是一个有效的解决方案，但它对我不起作用。 （见2d Array finding values from target position）

#2 对值进行硬编码。出于某种原因，nodejs 不喜欢这样，而且复制起来也很糟糕，如果一个数组返回“undefined”，那么……整个事情就坏了。

对于代码，您可以访问链接。至于策略#2，你明白了。 （只是一长串数组访问）

注意事项：

• 数组的结构与此类似（除了更大）：

[["&", "&"],
["&", "&"]]

已编辑。 输入是巨大的数组和相机的 (x, y) 位置。 根据相机的 (x, y) 位置，输出是较小的数组。 示例：

//big array (.join(""))
         111111111
123456789012345678
&&&&&&&&&&&&&&&&&& 1
&&&&&&&&&&&&&.&&&& 2
&&&&&&..&&&&&.&&&& 3
&&&&&&&&&&&&&&&&&& 4
&&&&&&&&&&&&&&&&&& 5

所以输入是那里的数组，以及相机的位置： 假设 (14[x], 2[y]) 宽度为 1，高度为 1，我们将得到以下输出：

111
345
&&& 1
&.& 2
&.& 3

Answer 1

这是我的方法。

• 设置要放置相机左上角顶点的位置

    let xVertex = 5;
    let yVertex = 1;
  

• 现在，您应该根据这些坐标转换您的数组：

    array[yVertex].splice(xVertex - 1, 5, "|", "-", "-", "-", "|");    //top edge
    array[yVertex + 1][xVertex] = "|";                                 //left edge
    array[yVertex + 1][xVertex + 4] = "|";                             //right edge
    array[yVertex + 2].splice(xVertex - 1, 5, "|", "-", "-", "-", "|");//bottom edge
  

• splice() 函数在这里非常有用。您可以用一条指令替换许多项目。这里有更多关于https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice的信息

编辑：你需要放置一个if语句来验证相机的边缘是否在数组内部而不是外部以避免错误。

---

• 为了获取相机内部的值，只需从左上​​角的顶点开始迭代：

    let camera = [];
    for (let y = yVertex + 1; y < yVertex + 4; y++) {
        camera[y - (yVertex + 1)] = [];     //create nested array
        for (let x = xVertex + 1; x < xVertex + 4; x++) {
            camera[y - (yVertex + 1)].push(array[y][x]);   //push camera data
        }
    }
  

Answer 2

这就是我的做法。

// This is the input. Notice how I have escaped the backslash characters in the 2nd and 6th rows.
const input = [
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','/','-','\\','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','|',':','|','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','|',':','|','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','|',':','|','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','\\','_','/','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
];

/**
This function takes 4 arguments, the starting x,y for the 'zoomed' camera viewport, and w, h which define how 'tall' and 'wide' the viewport will be.

The output is a new array like the input, but constrained within the viewport options.
*/
function view(x = 11, y = 1, w = 3, h = 5) {
    const rows = [];
    for (let dy = 0; dy < h; dy += 1) {
        const row = [];
        for (let dx = 0; dx < w; dx += 1) {
            row.push(input[y + dy][x + dx]);
        }
        rows.push(row);
    }

    return rows;
}

document.querySelector('#output').innerHTML = view().map((row) => row.join(' ')).join('\n');

#output {
  font-family: "Courier New", Courier;
  white-space: pre;
}

<div id="output"></div>

输出应该是一个包含所需字符的 3x5 表格：

[
  [ '/', '-', '\\' ],
  [ '|', ':', '|' ],
  [ '|', ':', '|' ],
  [ '|', ':', '|' ],
  [ '\\', '_', '/' ]
]