Adding A Map - ThePix/QuestJS GitHub Wiki

You have a number of options when it comes to adding a map to your Quest 6 game.

NOTE 1: An important audience for interactive fiction is the visually impaired, and authors should bear that in mind when designing games. Games should be playable without the map, and although it is possible to make the map interactive, you should ensure the same outcome can be achieved with the map turned off.

NOTE 2: These are not properly compatible with each other or with the ZONE template (which has its own mapping system). If you start with one system and later change your mind and decide you want to use the other, you will be pretty much starting from scratch.

Node-based Maps

The node-based map displays each location (or node) as a shape, with lines connecting them to show exits. This is conceptually the same as the Quest 5 map. If is functional, but may not be that aesthetic - it does not look like a real map.

If you have a "simple" game (as defined on that page), this is the easiest to set up - it may be as little as one line you copy-and-paste into the settings.js file. However, as your game gets more complicated that system will get more and more complex. The map above required some coding and knowledge of SVG. It does have the advantage that locations are defined relative to each, so if you later decide to insert a new locations in the middle of the map, there will be minimal disruption to the other locations.

See here.

Image-based Maps

This is a very different approach. You create a map in your preferred drawing package, and Quest will display it on the page, with a marker indicating the player position, and controls allowing the player to zoom and scroll. It looks like a real map, but it may not be as clear where the player can go (which might be a good thing).

This system requires some initial effort to set up, but thereafter is probably simpler, as each location just needs a set of coordinates. These are the absolute positions of the location on the map, which means it is important to get the map established at the start, as modifying it later can be quite a job.

You can have multiple maps, perhaps at different scales or for different regions. You can also flag points of interest, say when the player is given a quest.

See here.

Hex Maps

For a strategy game, you might like you have a hex map. The hex map gives you a grid based on hexagons, which means that each cell is next to the adjacent one in an equivalent manner - as opposed to square grid where diagonal movement is quite different to vertical and horizontal.

See here.

Custom Maps

Of course, you could just write your own map system. The image below shows one possibility, in which the map changes depending on the deck the player is on, with the current room highlighted in yellow.

This is complicated! You will need some skill in both JavaScript and SVG (or Canvas) to get it to work, but it looks good if you can.

You can see a working example here. There is no help page though!