The Art and Science of JavaScript

Defining the Floor Plan

The essence of our maze script lies in our ability to create a three-dimensional perspective from a two-dimensional map. But before we can make sense of how the perspective works, we must look at the map -- or, as I'll refer to it from now on, the floor plan.

The floor plan is a matrix that defines a grid with rows and columns. Each square in the floor plan contains a four-digit value that describes the space around that square -- whether it has a wall or floor on each of its four sides. As we'll see in a moment, we'll use a 1 or a 0 for each of the four digits.

Understanding clip
clip totally confuses me -- every time I use it, I have to think about how it works all over again. To help jog your memory, the figure below illustrates what the values in that clipping rectangle mean.

The main element in this example (indicated by the dotted line) is 100px wide and 50px high. The four values in the clipping rectangle are (in order): top offset, right offset, bottom offset, and left offset. Each of these values defines the offset of that edge from the main element's origin (its top-left corner).

These values are specified in the same order (top, right, bottom, left) as they are for other CSS properties, such as border, padding, and margin. Thinking of the word trouble (TRBL) should help you remember the correct order.

The figure below shows how each of these squares is constructed.

The figure below shows a simple floor plan that uses four of these squares.

In the image above:

• A dark gray block represents a square of solid wall.
• The borders at the edge of the diagram also represent solid wall.
• A light gray block represents a square of open floor.

For each square in the diagram:

• The digit 0 means "there's solid wall in this direction." Think of the number 0 as being shaped like a big brick, which means "Nope, you can't walk here."
• The digit 1 means "there's open floor space in this direction." Think of the number 1, being a positive value, as "Yes, you may walk on this square."
• Each of the four digits in a square represents a direction when the floor plan is viewed from above. The numbers should be read left-to-right, top-to-bottom, and they should appear in the same clockwise order as CSS values: top, right, bottom, left (or, when considered from the point of view of someone within the maze: forward, right, backwards, left).

A square like the one in the top-right of the image above therefore represents the following information:

• The four-digit number represented is 0010.
• There are solid walls above, to the right, and to the left of the square.
• There is open floor space below the square.

As you can see, the concept is rather similar to the classic Windows game, Minesweeper!

The floor plan in the figure above would be represented in JavaScript by the following matrix:

this.floorplan = [['0110','0010'], ['0100','1001']];

Note that these values are strings, not numbers; with numbers, leading zeros are not preserved, but in this case those leading zeros are an important part of the data.

So far, we've only seen very small examples of floor plan data. To make our maze really useful, we'll want something much larger -- the floor plan included in the code archive is 20 by 40 squares, and even that is comparatively small.

Just for kicks, the figure below shows what that floor plan looks like -- you can refer to this plan if you get lost wandering around! As before, the light squares represent floor space and the dark squares depict solid wall, while the red cross-marks show positions where the person navigating our maze (from here on referred to as the player) can stand.

I don't expect you to be able to read those numbers! But later on, when we talk about the floor plan designer that goes with the game, you can look at this plan in its original context. The floor plan designer is also included in the code archive.

There are Many Ways to Skin a Cat!
There are, of course, numerous ways to approach a problem like this, each with its own pros and cons. For example, instead of binary digits, we could have used letters like WFFW to indicate wall and floor space. We could have made use of nested arrays, like [[[0,1,1,0],[0,0,1,0]]]. We could even have represented each square using only a single digit, which would certainly have made creating and modifying a floor plan easier.

The reason I chose to use four digits is because, this way, each square is able to represent what's around it, rather than what the square itself is. If we had a floor plan that used single digits, and we wanted to represent the view from the middle square, we'd need not only that square's data, but also the data from the four squares that surrounded it.

With the approach I've taken, we only need the data from the middle square to know what those surrounding squares are. Granted, we end up with some duplicate data in our floor plan. However, in terms of pure computational efficiency, the two are equivalent, and using four digits makes more sense to me as each square is much more self-contained.