var labyrinth = ( function () { var labyrinth = {}; var N = 1, S = 2, E = 4, W = 8; //# directions translated into bitnums Object.defineProperty( labyrinth, 'init', { value: function( sizeX, sizeY, cellWidth, cellHeight, canvas, lineWidth, color ) { //init canvas this._canvas = {}; //get canvas, set and clear it this._canvas = canvas.getContext("2d"); this._canvas.clearRect( 0, 0, this._canvas.width + 1, this._canvas.height + 1 ); canvas.width = sizeX * cellWidth + 2; canvas.height = sizeY * cellHeight + 2; this._canvas.lineWidth = lineWidth; this._canvas.strokeStyle = color.toString(); //init size of the labyrinth this._size = {}; this._size.x = sizeX; this._size.y = sizeY; //init cellSize; this._cellSize = {}; this._cellSize.x = cellWidth; this._cellSize.y = cellHeight; //# dictionary with directions translated to digging moves this._goDir = []; this._goDir[N] = {x: 0, y: -1}; this._goDir[S] = {x: 0, y: 1}; this._goDir[E] = {x: 1, y: 0}; this._goDir[W] = {x: -1, y: 0}; //init map this._map = []; this.initMap(); //init stack this._stack = []; //init path this._path = []; return this; } }); Object.defineProperty( labyrinth, 'initMap', { value: function() { //fill the map with zeroes for (var i = 0; i < this.labSize.y * 2 + 1; i += 1 ) { this._map[i] = []; for (var j = 0; j < this.labSize.x * 2 + 1; j += 1 ) { this._map[i][j] = 0; } } //# create the grid for ( var x = 0; x < this.labSize.x * 2 + 1; x += 1 ) { for (var y = 0; y < this.labSize.y + 1; y += 1) { this._map[y * 2][x] = 1; } } for ( var y = 0; y < this.labSize.y * 2 + 1; y += 1 ) { for ( var x = 0; x < this.labSize.x + 1; x += 1 ) { this._map[y][x * 2] = 1; } } } }); Object.defineProperty( labyrinth, 'labSize', { enumerable: true, get: function() { return this._size; } }); Object.defineProperty( labyrinth, 'map', { enumerable: true, get : function () { return this._map.slice(); } }); Object.defineProperty( labyrinth, 'drawLabyrinth', { enumerable: true, value: function( removeWalls ) { //clear canvas this._canvas.clearRect( 0, 0, this._canvas.width + 1, this._canvas.height + 1 ); //draw all cells for (var x = 0; x < this.labSize.x; x += 1 ) { for (var y = 0; y < this.labSize.y; y += 1) { this.drawCell( x, y, removeWalls ); } } } }); Object.defineProperty( labyrinth, 'generateMap', { enumerable: true, value: function( startX, startY ) { //clear the map this.initMap(); this.path.push( {x: startX, y:startY }); //start digging this.dig( startX, startY ); //clear the visited markers for (var x = 0; x < this.labSize.x; x += 1 ) { for (var y = 0; y < this.labSize.y; y += 1) { this._map[y * 2 + 1][x * 2 + 1] = 0; } } } }); Object.defineProperty( labyrinth, 'drawCell', { value: function ( x ,y, removeWalls ) { var canvas = this._canvas; canvas.strokeStyle = this._color; function line( x1, y1, x2, y2, dx, dy ) { canvas.beginPath(); canvas.moveTo( x1 * dx + 1, y1 * dy + 1); canvas.lineTo( x2 * dx + 1, y2 * dy + 1); canvas.stroke(); } //if removeWalls is false a full box will be drawn var cx = x * 2 + 1; var cy = y * 2 + 1; //North if ( ( this._map[ cy - 1 ][ cx ] == 1 ) || !removeWalls ) { line( x, y, x + 1, y, this._cellSize.x, this._cellSize.y ); } //East if ( ( this._map[ cy ][ cx + 1 ] == 1 ) || !removeWalls ) { line( x + 1, y, x + 1, y + 1, this._cellSize.x, this._cellSize.y ); } //South if ( ( this._map[ cy + 1 ][ cx ] == 1 ) || !removeWalls ) { line( x + 1, y + 1, x, y + 1, this._cellSize.x, this._cellSize.y ); } //West if ( ( this._map[ cy ][ cx - 1 ] == 1 ) || !removeWalls ) { line( x, y + 1, x, y, this._cellSize.x, this._cellSize.y ); } } }); Object.defineProperty( labyrinth, 'dig', { value: function ( x, y ) { function allVisited (lab){ var cnt = lab.labSize.x * lab.labSize.y * 8; for ( var y = 0; y < lab.labSize.y; y += 1 ) { for ( var x = 0; x < lab.labSize.x; x += 1 ) { cnt -= lab._map[ y * 2 + 1 ][ x * 2 + 1 ]; } } return cnt == 0; } //Implementation of the Recursive backtrack algorythm found at //https://en.wikipedia.org/wiki/Maze_generation_algorithm //Make the initial cell the current cell and mark it as visited this._map[ y * 2 + 1 ][ x * 2 + 1] = 8; //If the current cell has any neighbours which have not been visited var neighbours = []; var dirs = [ N, E, S, W ]; for (var d = 0; d < dirs.length; d += 1 ) { var newX = x + this._goDir[dirs[d]].x; var newY = y + this._goDir[dirs[d]].y; if ( ( 0 <= newX ) && ( newX < this.labSize.x ) && ( 0 <= newY ) && ( newY < this.labSize.y ) && ( this._map[ newY * 2 + 1 ][ newX * 2 + 1 ] == 0 )) { neighbours.push( { x: newX , y: newY, d: this._goDir[dirs[d]] } ) } } //While there are unvisited cells if (!allVisited( this )) { var next = {}; if (neighbours.length) { //Choose randomly one of the unvisited neighbours next = neighbours[ Math.floor( Math.random() * neighbours.length ) ]; //Remove the wall between the current cell and the chosen cell this._map[ y * 2 + 1 + next.d.y ][ x * 2 + 1 + next.d.x ] = 0; //Push the current cell to the stack this._stack.push( {x: x, y: y}); //record the path this._path.push( { x: next.x, y: next.y } ); //Make the chosen cell the current cell this.dig( next.x, next.y ); } else { //Else if stack is not empty if (this._stack.length) { //Pop a cell from the stack next = this._stack.pop(); //record the path this._path.push( next ); //Make it the current cell this.dig( next.x, next.y ); } } } } }); Object.defineProperty( labyrinth, 'path', { enumerable: true, get: function() { return this._path.slice().reverse(); } }) Object.defineProperty( labyrinth, 'getCoordinates', { enumerable: true, value: function ( x, y ) { return { x: Math.floor( x / this._cellSize.x ), y: Math.floor( y / this._cellSize.y ) }; } }) return labyrinth; }()); var digger = ( function() { var digger = {}; Object.defineProperty( digger, 'init', { value : function ( labyrinth, startX, startY, diggerSize, pathColor, diggerColor ) { this._lab = labyrinth; //dig the labyrinth this._lab.generateMap( startX, startY ); //get the dig path this._path = this._lab.path; this._path.push( { x: startX, y: startY } ); //set directions this._dirs = []; for ( var i = 0; i < this._path.length - 1; i += 1 ) { this._dirs.push( { x: this._path[ i ].x - this._path[ i + 1 ].x, y: this._path[ i ].y - this._path[ i + 1 ].y }) } this._path.pop(); //init properties this._color = diggerColor; this._size = Math.floor( diggerSize / 2 ); this._pathColor = pathColor; //init position holders this._current = { x: startX, y: startY }; this._current.x = this._current.x * this._lab._cellSize.x + Math.floor( ( this._lab._cellSize.x + this._size ) / 2 ); this._current.y = this._current.y * this._lab._cellSize.y + Math.floor( ( this._lab._cellSize.y + this._size ) / 2 ); this._target = { x: 0, y: 0, d: { x: 0, y: 0 } }; this.getNextTarget(); this.drawDigger( this._color ); return this; } }); Object.defineProperty( digger, 'drawDigger', { enumerable: true, value: function ( color ) { this._lab._canvas.beginPath(); this._lab._canvas.arc( this._current.x, this._current.y, this._size, 0, Math.PI * 2 ); this._lab._canvas.fillStyle = color; this._lab._canvas.fill(); } }); Object.defineProperty( digger, 'getNextTarget', { enumerable: true, value: function ( clearFunc ) { //if more targets exists if (this._path.length != 0) { this._target = this._path.pop(); this._target.x = this._target.x * this._lab._cellSize.x + Math.floor(( this._lab._cellSize.x + this._size ) / 2); this._target.y = this._target.y * this._lab._cellSize.y + Math.floor(( this._lab._cellSize.y + this._size ) / 2); this._target.d = this._dirs.pop(); //otherwise stop the animation } else { clearFunc(); } } }); Object.defineProperty( digger, 'moveDigger', { enumerable: true, value: function ( digger, clearFunc ) { //if target not reached move to next position if ( ( digger._current.x != digger._target.x ) || ( digger._current.y != digger._target.y ) ) { //digger.drawDigger( 'white' ); digger.drawDigger( this._pathColor ); digger._current.x += digger._target.d.x; digger._current.y += digger._target.d.y; digger.drawDigger( digger._color ); //otherwise get next target } else { digger.getNextTarget( clearFunc ); } } }) return digger; })(); function btnClick () { if (document._digger) { delete( document._digger ); } var labX = document.getElementById( "labWidth" ).value; var labY = document.getElementById( "labHeight" ).value; var cellX = document.getElementById( "cellWidth").value; var cellY = document.getElementById( "cellHeight").value; console.log( ); console.log( ); document.getElementById('resultContainer').style.display = 'block'; document.getElementById('instructions').innerHTML = 'Click on the labyrinth to start digging.' document.getElementById('canvasContainer').style.width = labX * cellX + 2 + 'px'; document.getElementById('canvasContainer').style.height = labY * cellY + 2 + 'px'; document._labyrinth = labyrinth.init( labX | 0, labY | 0 , cellX | 0, cellY | 0, document.getElementById('labyrinthCanvas'), 1, 'black'); document._labyrinth.drawLabyrinth( false ); } function canvasClick(event) { if (!document._digger) { //get starting position var rect = document.getElementById('labyrinthCanvas').getBoundingClientRect(); var start = document._labyrinth.getCoordinates(event.clientX - rect.left, event.clientY - rect.top); document.getElementById('instructions').innerHTML = 'Digging from position' + ' x: ' + start.x + ', y: ' + start.y; //start digging document._digger = digger.init(document._labyrinth, start.x, start.y, 6, 'blue', 'red'); var animate = window.setInterval(function () { digger.moveDigger(digger, clearFunc) }, 10); var clearFunc = function () { window.clearInterval(animate); document.getElementById('instructions').innerHTML = 'Done. Click Generate again.' } } }

Labyrinth generator