This assignment creates a maze, and allows navigation the maze via the keyboard. Here is a good discussion of several additional maze algorithms and their implementation.
This and the other assignments are available on my website.
The controls are fairly minimal:
Two views are available; a Top View which shows the maze from above, and the usual view of the Inside of the maze. The Top View button toggles between the two.
The Top View also shows the User as a triangle, which is at the Eye coordinate in the inside view.
The maze is navigated using the cursor keys or the WASD keys. They work in either view.
The user starts just before the entrance to the maze, and can rest to that location using the Reset button.
New mazes can be made using the sliders and the New Maze button.
Resizing of the maze canvas is done by simply resizing the browser window.
To simulate desktop OpenGL, there is a Quit command, the Q key, which simply shows a message and jumps to the WebGL Conformance Test runner!
Patches: The maze was created using a scaled down version of NetLogo’s patches. This makes a natural model space for constructing the maze using the algorithm provided in the assignment.
Walls: Patches are basically 2D, so to create the walls of the maze, for each edge of a patch, a quad is created using a random color.
Object Orientation: This is the first implementation of the assignments using the “classical” JavaScript inheritance model. This is blended with more “prototypal” enumerators for arrays and dictionaries.
Events: The cursor keys present a slight problem: they are used by the browser to scroll the page. To overcome this, the “document.onkeydown” event handler uses the event bubbling feature which allows the canvas element to process the cursor keys, and by returning “false”, stop the further bubbling up of the events to the document page.
Navigation: The user navigation is constrained to 2D, at the y = .5 plane. Wall intersections are seen by asking the corresponding patches if there are walls between them. The outside walls and the entrance and exits are dealt with as special cases: the inside x,y locations return a Patch object, while the outside returns a null. Thus when a null-Patch transition occurs, a small extra computation is required.
HTML Integration: The prior integration of HTML and JavaScript was reused: all the maze code is contained in a single object exposing a simple interface to the HTML UI and event managers. This seems a winner and promotes a model/view/controller approach.