Roguelike game: How to have a static view of gameboard?

Hi everyone,

I’m almost done with the Roguelike game. In the example project, the gameboard is larger than the “view”, i.e. as you walk around more of the board is revealed. You can’t scroll, you can only see more of the board by moving the player. See here: https://codepen.io/freeCodeCamp/full/PNJRyd

Can someone help me figure out how to do this? (I don’t even know what to Google to figure this out :))

Here’s my current version if you’re interested in checking it out: https://codepen.io/lieberscott/full/MVENQa/

I thought that this picture would help more than my words. This is one way to do this. You can have your “full map” that has the map in its entirety, then slice it up into tinier “screens” similar to the old The Legend Of Zelda games. Then, simply display one screen at a time, or update the screen as the player moves.

Another way to simulate this, is to zoom-in on the map in some way. For example, you could make the map absolutely-positioned so that it ignores the regular flow of the document. Then, give it a lower z-index than it’s static, “cover” element. You could then move the map around with javascript.

Think of two stacked sheets of paper, one with a hole in it. The one on top with the (in our case) rectangular hole. Imagine that the sheet beneath is the map (movable) and the sheet above is your “view-port”. Now you have a simulation of the game Quincy made.