Blazor Maze Simple

C# | Blazor | CSS-Grid

Hacky little maze generator in 80 lines of C# / Blazor. Using CSS-Grid to hold the maze status. Press the button below 👇 to generate a maze...

Sidewinder, and other shortcuts

The code is using the Sidewinder algorithm to generate the maze. This isn't the greatest (e.g. there's always a long corridor along the top of the maze), but it is the shortest!

Normally we would need to store the state of the maze grid in an array, then display it somehow. But if we use CSS Grid, then we can combine these two needs by binding the maze cell states as (Tailwind) CSS border classes on the grid elements. Then we can just let the browser handle the displaying of the grid.

Borderline result

The code sets top and left borders on each cell, then changes the borders to transparent if the maze generator feels that there should be a gap:

Tailwind classes

Setting up a square 20x20 CSS Grid is easily done with Tailwind. Then we need a couple of nested loops in Blazor to create all the cells and bind each of their display classes to an element in a 2D array of class names.

Next...

That's about all there is to it. The full code is here.

The hard part is taking the Blazor code and embedding it in your Astro blog ... which needs a separate article to explain...