The Art and Science of JavaScript

Designing a Floor Plan

In the code archive for this book, you'll find a floor plan designer, which is a separate JavaScript application that generates the floorplan matrix used by this game. It's a table of squares, and you can click a square to toggle it between floor and wall. The script will work out the numbers for each square that relate to that view, using the TRBL syntax I introduced earlier in the chapter to denote whether a square has wall or floor on each of its four sides.

Hovering over a square in the floor plan designer will also display a tooltip containing the x,y position of that square in the grid. This information is useful for defining a start position (the first two values of the start array in init.js).

To use the floor plan designer, first create your plan by clicking on the squares. When you're happy with your maze, click the Generate output matrix button and a floorplan matrix will be generated for you. You can then copy and paste this data directly into your init.js file -- the next time you run the maze application, your new floor plan data will be passed to the script.

Alternatively, you can begin your floor plan editing session by pasting existing floor plan data into the textarea field. Click Display input matrix, and the floor plan designer will display the map representation of the data that you pasted into the field, which you can then edit further as required. Try pasting in the original floorplan matrix from init.js, and you'll see the plan that I showed you near the start of this chapter, in all its glory!

Simple as it is, without this tool, making the maze floor plan would be a very painful process! In fact, I created this tool before I wrote the main script.

Further Developments

Before we close this chapter, I'd like to take a couple of moments to discuss some general possibilities for further development of the maze. More specifically, we'll look at the callback facility that's available for hooking additional code into each view change.

Using the Callback

Have a look in init.js and you'll notice that, in addition to the floor plan, start position, and language parameters, there's an optional fourth argument specifying a viewchange callback function. This function will be called every time a new view is drawn, and can be used to add logic to the game.

The viewchange function referred to in this example can be found in the script called demogame.js, which is located in the addons directory of the code archive. This script and its associated style sheet are both included in underground.html, at the very end of the head section (after the core style sheets and scripts).

As you'll see, the callback accepts the following arguments:

• x - the current x position of the player
• y - the current y position of the player
• dir - the direction that the player is currently facing
• inst - a reference to this instance of the DungeonView object

By defining conditions based on the first three arguments, you could add logic that applies only at specific locations in the maze. And because the callback function will always be called when the player begins navigating the maze at the start position, you could also use the callback function for initialization code. For example, a flag could be set to indicate that a location-specific action has occurred, so that it occurs only once.

The fourth argument, inst, is a reference to this instance of DungeonView, and can be used for tasks like adding a new element to the view (such as objects for the player to find), or modifying the configuration properties (in order to change the wall color in certain areas of the maze).

In the demo game example, I've made use of the callback function at one specific position in the floor plan -- at this point in the maze you can see a simple object in front of you, and at another position you're standing directly above that object (that is, picking it up). That's all there is to the demo game -- there's nothing ground-breaking -- but at least it adds an end purpose to an otherwise aimless meander through the maze! It should also serve to illustrate the principle of extending the maze, and will hopefully inspire you to try something more ambitious and creative.

At sitepoint.com, you can find a more sophisticated example in which a hidden surprise is located within a larger maze, and your mission is to find it.

Blue-sky Possibilities

It would be quite simple to use Ajax to relay a player's position to a server -- other players could read that data, thus facilitating the creation of an online multiplayer environment. It should also be possible to implement a server-side program that generates floor plan data and sends it back to the game, effectively creating multiple "levels" in the maze. Taking this idea one step further, players could potentially receive and transmit floor plan data between themselves, thereby allowing individuals to host maze levels.

However, it would be quite tricky to represent other players in the view?we would need a graphic for every additional player, as well as versions of that graphic at each of eight different distances, facing in four directions. Short of generating the players as simple shapes, there's no pure-CSS way to create these graphics. They would have to be a collection of specially drawn images, and I don't have the artistry to design those characters!

But if you do, be my guest. If you had those images, adding them to the game would be most simply achieved with absolutely positioned overlays?placing the image so that its center is in the center of the maze. Then, for each view, it would be a case of working out which was the correct image to show, based on the locations of that player relative to the main player. This might also be quite tricky, especially when you had three or more players sharing the same corridor, but I have no doubt that it's doable.

Who knows -- maybe you could add combat too!

Summary

In this chapter, we took the languages of CSS and JavaScript well beyond the tasks for which they were intended -- the presentation and basic behavior of HTML documents -- and used them to create an interactive 3D maze.

First, we looked at the basic principles by which triangles can be displayed using only CSS. We then extended that concept to render a perspective view, creating the illusion of three dimensions. Next, we established a convention for specifying floor plan data, and for dynamically translating that data into a perspective view. By adding listeners for user events, we successfully created an interactive maze that can be completely customized and extended. To top things off, we added some usability aids, such as a top-down map, and accessibility aids including keyboard navigation and captions.

While I haven't delved into the details of every method that comprises the game script (there are plenty of comments, so I'll leave that for you to pursue in your own time), I hope this chapter has convinced you to look at JavaScript in a new light. The possibilities really are only limited by your imagination! Don't forget to download this chapter (plus the chapter Fun With Tables) for future reference -- and be sure to check out the rest of the techniques we've covered in The Art & Science of JavaScript.