A Maze is a puzzle where the player has to find a path from the entrance to a goal without hitting the dead end. What’s so special about mazes for me as a computer science student was the algorithm that generates a maze with a guarantee that one and only one path between given any two points on board. My main source of motivation for mazes came from the book “Mazes for Programmers” by Jamis Buck.
I have been fascinated by mazes for a quite long time and hence attempted to do quite a lot of stuff with mazes and algorithms. Following are some of these attempts:
I was just exploring the algorithms to generate a pure maze (pure maze is a maze with one and only one path between given any two cells) and I stumbled across an algorithm named Recursive Backtrack the good thing about this algorithm is that it is easy to implement and generates relatively complex mazes.
The biggest hurdle for me at that time was a way to draw a maze along with player. Although I should have drawn it using SVGs but due to my limited of knowledge SVGs. Instead I drew the maze board with a div as a cell with the border as their wall. Which went well expect some caveats on the edges.
The greatest takeaway from this project was that CSS borders don’t have smooth edges. Which can be a blessing or curse especially if you don’t fully understand them. Overall, this project helped me better understand DOM manipulations, keyboard interactions and simple board game designs.
This version of the maze was developed as a semester project and we tried to explore different maze generation algorithms and animations, path finder algorithms. Another aim for this project was to get familiar with Java.
The biggest problem here was to draw a maze board and align player inside cells that is actually hovering independently on board. And, for some reason, we choose the same approach of div with the border as in the web version. There were a lot of other small goodies too which became quite hard to implement like multiple maze generation algorithms support, player animation.
This project helped us develop a better understanding of cross-platform GUI frameworks, object-oriented approaches, and Java. Also in the process, we developed a great respect for developers who work with strictly typed languages.
The purpose of this attempt was to apply everything I learned about mazes till now to write an improved version.
I wanted the final build to be as small as it can be so I didn’t want to include any frontend framework but at this time I was in love with JSX syntax so I created a custom JSX Factory Function. Instead of returning a virtual DOM this factory function returns an actual DOM Node which can be inserted into the DOM directly without any need of a framework.
But, this solution created another state management, for which I used RxJS and quickly fell in love with event-driven development. And in fact wrote a reactive wrapper around every browser APIs used like Keyboard, Touch.
The idea behind Mazes101 was to develop a generic framework that is extensible with a minimum bundle footprint. And thankfully I was able to achieve both, it is generic enough that it can handle any kind of maze board (Rectangular, Weave, Circular, Hexagonal, or triangular) and it is completely purgeable down to individual functions.
The first problem was to develop a generic board that can handle any of board and I was able to do that with a generic base board that describes the indiviual cells while the specific board acts as a view layer on top of that same base board. There could be as many board views as you want.
I also wanted to stay as low level as possible that will make porting this package to other languages much easier. For this I used a byte to represent a cell, this single byte can represent everything about a cell and all the primitive operations on cells are basically bit-wise operations. For now, Mazes101 supports EcmaScript, CommonJS & Deno Modules.
For better integration with frontend frameworks, all the renderers accept an
h function. These
renderers by default return an SVG String but users can customize that by providing a custom
function. For example, if users want the renderer output as react component they can pass
h function, or a custom
h function that can create a DOM node directly.
I wanted the maze generation algorithms to be visualized, for this there is a
movesRegister that can
register moves while the maze is being generated and these moves can be played back to provide a nice
visualization of maze generation.
This was the very first project where I played with SVGs and learned a lot of great stuff about them. As I worked closely with multiple module systems, I got a better understanding of how they work and their differences. I also published my first NPM package and used automated semantic releases, which helped me better understand the process behind developing and maintaining a package.
I would like to continue maintaining and improving the mazes101 package in the future. Here are few things I would like to do in this project:
Any question, any idea or got interested? Contact Me