The Room Adventure: Additional Features

Add Diagonal Directions to the Random Room Layout Generator

Difficulty: ★☆☆☆☆

Requirement: randomizeRoomLayout

In our advanced feature, Randomize Layout, we take all the available rooms and mix up how they're connected. We kept this process pretty simple, connecting rooms east and west and sometimes north and south.

What if we want some diagonal (northeast or southwest) types of connections? Let's add those in.

What we need to do

We need to see if a diagonal connection is possible.
If so, let's randomly choose the connection direction: | / \ (north-south, northeast-southwest, northwest-southeast)

Step 1: Go into your randomizeRoomLayout function

This is a pretty simple tweak to our rather complicated function. Find the section inside randomizeRoomLayout where the for loop makes the north-south connections.

I'm showing you the whole double-nested for here for reference.

//connect north and south at random along each row pair
for (var i = 0; i < rows.length - 1; i++)
{
- for (var j = 0; j < connections; j++)
- {
  - var index = Math.floor(Math.random() * minRoomsPerRow);
  - //new code will go here
  - //this part's already here too, but we're going to wrap it in an else statement soon
  - //rows[i] is top room, rows[i + 1] is bottom room
  - rows[i][index].exits.south = rows[i + 1][index].name;
  - rows[i + 1][index].exits.north = rows[i][index].name;
- }
}

Step 2: Create variables for southwest and southeast

To make the code easier to deal with, we're going to create temporary variables to help us out. One's easy. The other needs a little work. I'll explain after the code.

This goes in right after the index variable is created.

var southeast = rows[i + 1][index + 1];
var southwest;
if (index > 0)
{
- southwest = rows[i + 1][index - 1];
}

Remember, we're using a two-dimension array in this section. The rows variable holds each row and within that each column. So it's like rows[row][column].

Let's say we are on row 1 and column 4. That would be rows[1][4]. Ok so far? If we want to go southwest from there, we would go down one row, to row 2 and to the left one column, to column 3, therefore to row[2][3]. Remember that the lower the number, the closer to the top-left corner we get, so bigger numbers go down and to the right.

This is all fine and good, but what happens if we are in column 0, the far left side? If we look to the southwest, we'd be trying to see if there is an index -1. That would cause an error. So we need to check for that when we make the southwest variable.

We don't run into the same problem with southeast because in an array, if we pick an index that's too big, we just get undefined without an error. Normally, we would have to check for the rows[i + 1] part of the code to make sure there is a row there before trying to find the column. But we don't have to because of the way the outer loop is set up. The outer loop (the i loop) stops one row before the end, so it can always go to row i + 1. It was designed to work that way and that's why we don't have to check for it.

Step 3: Randomly decide which type of connection we're going to create.

You can choose anything you want here. I'm having the computer pick from 0 to 4. If it's a 0 and if southwest is a possible room, then we'll connect it. Otherwise, if the computer picked a 1 and southeast is possible, then we'll connect that instead. If none of that works, then we stick with our north-south connection as a backup.

It's important here to use the AND && operator. If the computer picks 0, we need to make sure we have a southwest room, or else we'll connect up an undefined exit.

//get a random number to choose the type of direction to connect
var connection = Math.floor(Math.random() * 5);
if (connection === 0 && southwest)
{
//yes, then set it
- rows[i][index].exits.southwest = southwest.name;
- southwest.exits.northeast = rows[i][index].name;
}
else if (connection === 1 && southeast)
{
- rows[i][index].exits.southeast = southeast.name;
- southeast.exits.northwest = rows[i][index].name;
}
else
{ //this brace is new!!!
- //these three lines were already there
- //rows[i] is the top room, rows[i + 1] is the bottom room
- rows[i][index].exits.south = rows[i + 1][index].name;
- rows[i + 1][index].exits.north = rows[i][index].name;
} //this brace is new!!!
//two other braces follow this to end the j and i loops.

You should notice that we're keeping the original north-south code the way it was, but now we're wrapping it in an else statement.

And that's a wrap.