How to Make a JavaScript Roguelike Scroll

Nevin Katz

Follow

7 min read

·

Jun 8, 2022

90

1

Listen

Share

Press enter or click to view image in full size

Dungeons are more interesting when you don’t know what’s around the corner. In this tutorial, we will add scrolling to a type of game known as a roguelike, which has machine-generated levels. Below is an animation of the initial game, which displays the full dungeon map.

And below is an animation of the finished version with a smaller display that scrolls.

We will add our scrolling logic in three phases.

• 1) make the game scroll at all times.
• 2) make the game scroll only when the player is far enough from the center.
• 3) make the game only show part of the map.

Getting Started

To build this feature, download the project zip from Github. Upon extracting it, you’ll find a project directory to…