The Art & Science Of JavaScript214
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 po-
sition 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 youre 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 filethe 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 rep-
resentation 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 youll 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, Id like to take a couple of moments to discuss some general possibil-
ities for further development of the maze. More specifically, well look at the callback facility thats
available for hooking additional code into each view change.
Using the Callback
Have a look in init.js and youll notice that, in addition to the floor plan, start position, and language
parameters, theres 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 youll see, the callback accepts the following arguments:
x the current x position of the player
y the current y position of the player

Get The Art & Science of JavaScript now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.