Mazes 101

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:

Maze Puzzle

August 2017

Code
nmanumr/maze@cb5b561
Stack
JavaScript
JQuery

Purpose and Goal

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.

Problems Faced

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.

Lessons Learnt

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.

Maze Puzzle in Java

November 2019

Code
ameerhmzx/maze-puzzle
Stack
Java
JavaFX
Collabrators
Ameer Hamza Naveed

Purpose and Goal

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.

Problems Faced

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.

Lessons Learnt

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.

Maze Puzzle v2

March 2021

Code
nmanumr/maze
Live
View Site
Stack
TypeScript
TailwindCSS
RxJs

Purpose and Goal

The purpose of this attempt was to apply everything I learned about mazes till now to write an improved version.

Problems Faced

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.

Lessons Learnt

Although the end result seems quite simple I learned a lot during this project, like SVGs paths, event-driven development, JSX, and a lot about javascript bundlers.

Mazes101

May 2021

Code
nmanumr/mazes101
Live
View Docs
Stack
TypeScript
NodeJs
Deno
Sementic Release

Source: https://nmanumr.github.io/mazes101/playground

Purpose and Goal

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.

Problems Faced

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 h function. For example, if users want the renderer output as react component they can pass React.createElement as 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.

Lessons Learnt

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.

Future Thoughts

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:

Inspirations / Related Works


Any question, any idea or got interested? Contact Me