Maze Generator Functional Demo

by Robb Priestley
©️ 2017 Digital Wizardry Software Solutions Ltd.

Generate Maze!

How It Works

Click the "Generate Maze!" button above and the server will compute a unique maze layout. The web application running in your browser will then render the maze layout in the space to the right of this text using graphical tiles.

Full source code used to build and deploy this project is posted on my GitHub account at the following address: https://github.com/robbpriestley/MazeGenerator. Detailed documentation relating to the underlying maze generation algorithm is also provided in the project's README.md file.

Scroll down for a technical outline of how this web application works. For contact information or business inquiries, please visit my website: www.digitalwizardry.ca

Thanks for visiting!

Technical Outline

This web application was built using ASP.NET Core MVC. The maze generation algorithm is part of a custom-built library that the web application uses to produce maze data. The maze data model is packaged up and delivered to the view by a controller which responds to an AJAX request from the index page when it loads, or when the above button is clicked.

Supporting JavaScript for the web application is transpiled into runnable code from a TypeScript source file. The script accepts the maze data in JSON format, deserializes it into an object, and assigns CSS references to <div> elements in the grid area above in order to place graphical tiles in the proper order to render the maze visually. The PNG graphics are part of a sprite sheet for faster rendering.

The entire web application is packaged into a Docker container and is hosted on the web server, where it is assigned to port 5000. The web server is an Amazon Web Services EC2 instance running Ubuntu Linux, which also simultaneously runs Apache and the WordPress installation corresponding to my website.

All of this was accomplished using Visual Studio Code and basic supporting tools on a Mac.