Dungeon.css: Dungeon Generator

I've been writing about Random Dungeon Generators over at wiki.secretGeek.net, and as a consequence, ended up putting a new random dungeon generator online.

Dungeon.css: Dungeon Generator

dungeon example

The layout of the maps is generated by a C# library, Karcero, by Oded Welgreen. A very nice library if you need to generate dungeons or mazes. (And why wouldn't you need that, hmm?)

The idea of the page I've put up is that you can choose a theme, and customize the background colors. Themes are entirely based on css. The maze is just a HTML table, with classes and styles.

Each theme is a style sheet, a pair of default colors, and a few gray scale pngs (with transparent backgrounds).

It's very easy to add a new style, or to improve an existing style.

Rock for Dungeon theme Door for Dungeon theme Wall for Dungeon theme Rock for Castle theme Door for Castle theme Wall for Castle theme Rock for Forest theme Floor for Forest theme Wall for Forest theme Rock for SpaceBase theme Floor for SpaceBase theme Door for SpaceBase theme

If I was really serious, I could've gone with SVG. Then *all* aspects of the color and scaling could be configurable through css. But it would also be trickier to author the pictures, for someone like me (with my MVP in "MS Paint").

The Cicada Principle

In the SpaceBase and Dungeon themes, I want a few randomly selected background tiles to use a different image, to give the rocks or space base a more natural feel. CSS doesn't currently include any kind of random function, so I used 'the cicada principle', whereby a set of nth-child rules with varying prime numbers will select a random-looking set of tiles. To wit:

tr:nth-child(13n)    td:nth-child(11n-10).rock { background-image:url(image/rock_geo2.png)}
tr:nth-child(7n-3)   td:nth-child(17n-12).rock { background-image:url(image/rock_geo2.png)}
tr:nth-child(17n)    td:nth-child(23n).rock { background-image:url(image/rock_geo2.png)}
tr:nth-child(7n)     td:nth-child(13n).rock { background-image:url(image/rock_geo2.png);}
tr:nth-child(19n-12) td:nth-child(21n).rock { background-image:url(image/rock_rare.png);}
tr:nth-child(5n)     td:nth-child(7n).rock { background-image:url(image/rock_geo.png);}
tr:nth-child(7n)     td:nth-child(5n).rock { background-image:url(image/rock_geo2.png);}
tr:nth-child(10n)    td:nth-child(10n).rock { background-image:url(image/rock.png);}

Finally

Note that depending on the parameters you choose, you can also generate complex, unthemed mazes.

complex_maze.png

Anyhow, the online dungeon generator is here, and the source code is available here.

 

I'm currently writing a book about how to build your first product. If you want to build your first product, please sign up to be notified when the book is available.

(By the way, I read every comment and often respond.)

Your comment, please?

Your Name
Your Url (optional)
Note: I may edit, reuse or delete your comment. Don't be mean.