Depth First Search Maze
How do I make an depth first search maze?
Implementation of something like this http://www.mazeworks.com/mazegen/mazetut/http://rosettacode.org/wiki/Maze_generation. What is a depth first search maze? How do you make a depth first search maze? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.
Depth First Search Maze - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Depth First Search Maze</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas" width="400" height="300"></canvas> <script src="js/index.js"></script>
</body>
</html>
Depth First Search Maze - Script Codes CSS Codes
html,
body { height: 100%;
}
body { text-align: center;
}
body::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em;
}
canvas { vertical-align: middle; display: inline-block;
}
Depth First Search Maze - Script Codes JS Codes
var canvas = document.querySelector('#canvas'), ctx = canvas.getContext('2d'), width = 30, height = 20, cellSize = 16, mazeMap = [], cellStack = [], currentCell, visitedCells = 0, totalCells = width*height;
var Cell = function(x, y) { this.x = x; this.y = y; //e s w n this.walls = [1,1,1,1];
}
Cell.prototype = { getNeighbours: function() { var neighbours = [], x = this.x, y = this.y; if( x > 0 && mazeMap[x-1][y].allWallsIntact() ) neighbours.push( mazeMap[x-1][y] ); if( x < width-1 && mazeMap[x+1][y].allWallsIntact() ) neighbours.push( mazeMap[x+1][y] ); if( y > 0 && mazeMap[x][y-1].allWallsIntact() ) neighbours.push( mazeMap[x][y-1] ); if( y < height-1 && mazeMap[x][y+1].allWallsIntact() ) neighbours.push( mazeMap[x][y+1] ); return neighbours; }, allWallsIntact: function() { return (this.walls.join('') === '1111'); }, knockdownWallTo: function( cell ) { var xDiff = cell.x - this.x, yDiff = cell.y - this.y, wall; if( xDiff === 1 ) wall = 0; if( yDiff === 1 ) wall = 1; if( xDiff === -1 ) wall = 2; if( yDiff === -1 ) wall = 3; this.walls[ wall ] = 0; }, draw: function() { var px = this.x*cellSize, py = this.y*cellSize; ctx.beginPath(); if( this.walls[0] ) { ctx.moveTo(px + cellSize, py); ctx.lineTo(px + cellSize, py + cellSize); } if( this.walls[1] ) { ctx.moveTo(px, py + cellSize); ctx.lineTo(px + cellSize, py + cellSize); } if( this.walls[2] ) { ctx.moveTo(px, py); ctx.lineTo(px, py + cellSize); } if( this.walls[3] ) { ctx.moveTo(px, py); ctx.lineTo(px + cellSize, py); } ctx.closePath(); ctx.strokeStyle = 'black'; ctx.stroke(); }
}
function init() { canvas.width = width*cellSize; canvas.height = height*cellSize; setup();
}
function setup() { for( var x=0; x<width; x++) { for( var y=0; y<height; y++) { if( !mazeMap[x] ) mazeMap[x] = []; mazeMap[x][y] = new Cell(x, y); } } currentCell = mazeMap[ Math.floor(Math.random() * width) ][ Math.floor(Math.random() * height) ]; visitedCells = 1; loop();
}
function loop() { if( visitedCells === totalCells ) { window.setTimeout(function() { setup(); }, 2500); return; } var neighbours = currentCell.getNeighbours(), nextCell; if( neighbours.length ) { nextCell = neighbours[ Math.floor(Math.random() * neighbours.length) ]; currentCell.knockdownWallTo(nextCell); nextCell.knockdownWallTo(currentCell); cellStack.push( nextCell ); visitedCells += 1; previousCell = currentCell; currentCell = nextCell; window.requestAnimationFrame(loop); } else { currentCell = cellStack.pop(); loop(); } draw();
}
function draw() { ctx.fillStyle = 'white'; ctx.fillRect(0,0, canvas.width, canvas.height); for( var x=0; x<width; x++ ) { for( var y=0; y<height; y++ ) { mazeMap[x][y].draw(); } }
}
init();
Developer | Timo Hausmann |
Username | timohausmann |
Uploaded | October 16, 2022 |
Rating | 3.5 |
Size | 2,693 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Single Element Spinner | 2,540 Kb |
The final countup | 3,054 Kb |
Valentines Day | 3,118 Kb |
Spring Physics | 3,272 Kb |
Vector Based Movement | 2,568 Kb |
CSS3 Butterfly | 3,430 Kb |
Bloody Thursday | 3,081 Kb |
Triangle Split Plane | 3,263 Kb |
Stream of Cables | 2,488 Kb |
Color Wheel. Literally. | 6,392 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Whyutils | LeYvan | 3,752 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!