The Maze
HTML
<canvas id='cv' width=400 height=400></canvas>
JavaScript
// -------------------------------
// Parameters
// how deep do we go ?
var maxDepth = 8;
// minimum size of a room.
var minWidth = 50;
var minHeight = 50;
// maximum ratio between width and height.
var maxAreaRatio = 2.2; // ( around 2 seems good )
// ratio between room size and wall size.
var wallSizeRatio = 25 / 800;
var constantMargin = 2;
// -------------------------------
// boilerplate
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
//
// size of the first room = canvas's size.
var width = cv.width;
var height = cv.height;
// defining two symbols for the two axes.
var xAxis = new String('x');
var yAxis = null;
// class Area, defining a screen area.
// It might be splitted, if so children != null
// , and ( splitAxis == xAxis) tells
// if this area was splitted on x or y
function Area(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.depth = -1;
this.maxDepth = -1;
this.splitAxis = null;
this.children = null;
}
//
var __invOfMaxAreaRatio = 1 / maxAreaRatio;
// a few colors
var shades = [];
for (var i = 0; i < maxDepth; i++) {
var v = Math.floor(30 + 40 * i / maxDepth);
shades.push(ctx.fillStyle = 'hsl(200, ' + v + '%,' + (v + 30) + '%)');
}
// methods of the Area class
Area.prototype = {
// split this area with a maximum depth of maxDepth.
split: function (maxDepth) {
this._split(0, maxDepth, 0);
},
_split: function (currDepth, maxDepth, wallSize) {
//
this.depth = currDepth;
this.maxDepth = maxDepth;
//
this._addMargin(wallSize+constantMargin);
// end of recursion ??
if (currDepth == maxDepth) return;
// skip if this obviously won't work
if (this.w < 2 * minWidth || this.h < 2 * minHeight) return;
// try to split
// do several random attempts
var splitAttempts = 0;
var maxSplitAttempt = 6;
var currentAxis = null;
do...