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.

See below for a technical outline of how this web application works.

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 which can then be hosted in any standard cloud services application such as AWS or Heroku.

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