javascript - Camera in a 2d game

Question

FOR CLARIFICATION
I've found a video that is exactly what I'm trying to do. I marked the exact time where the youtuber talks about it, so don't skip ahead or restart the video unless you want to watch the whole thing. https://youtu.be/9V3BnBeFmLs?t=299

Goal: I have a 2d Array. Consider that I have this array in the following format:

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

how would I make a camera, that, based off its 2d Position (x, y) it will output:

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

pipes are used to represent edges of the camera output I've tried 2 different approaches. #1 is I used 2 nested for loops to search each character on the 2d array within the camera's scope, starting in the upper-left hand corner. this seems like a valid solution but it wasn't working for me. (see 2d Array finding values from target position)

#2 is hard-coding the values. for some reason nodejs didn't like this, and also it was heck to replicate, and if a array returns "undefined" then... the whole entire thing breaks.

For code, you can visit the link. As for strategy #2, you get the point. (just a long list of array accesses)

Notes:

• the array is structured similar to this (except much bigger):

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

Edited. The inputs are the huge array and the camera's (x, y) position. The output is smaller array based on the camera's (x, y) position. Example:

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

so the input is that array up there, and the camera's position: lets say (14[x], 2[y]) and with a width of 1 and a height of 1 we would get the following output:

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

Answer 1

This is how I would do it.

// 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('
');

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

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