JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<script src="https://raw.githack.com/dstromberg2/maze-generator/master/mazegenerator.js"></script>
<label for="mazeSize">Maze size</label>
<input type="number" id="mazeSize" value="5"/>
<div id="it" style="margin-left: 20px; display: inline-block"></div>
<br>
<label for="mode">Display solving</label>
<input type="checkbox" id="mode" checked/>
<br>
<button onclick="generateMaze()">
Regenerate maze
</button>
<button onclick="startMaze()">
Start
</button>

<canvas style="display: block" width="510px" height="510px" id="canvas"></canvas>

JavaScript

var ctx = document.getElementById("canvas").getContext("2d");
var sizeInput = document.getElementById("mazeSize");
var solveInput = document.getElementById("mode");
var iter = document.getElementById("it");
var mazeSize;
var cellSize;
var mazeArray;

var iterations;

var defX, lastX, lastY, defY;

function generateMaze(){
	defX = lastX = lastY = defY = 5;
	ctx.clearRect(0,0,510,510);
	mazeSize = +sizeInput.value;
  cellSize = 500 / mazeSize;
  
  ctx.fillStyle = "#00FF00";
  ctx.fillRect( 500, 500, -cellSize + 10, -cellSize + 10 );
  ctx.fillStyle = "#0000FF";
  ctx.fillRect( 10, 10, cellSize - 10, cellSize - 10 );
  
	mazeArray = newMaze( mazeSize, mazeSize );
	for ( var i = 0; i < mazeSize; ++i ){
		for ( var j = 0; j < mazeSize; ++j ){
  		var cell = mazeArray[i][j];
    	ctx.strokeWeight = 5;
    	ctx.beginPath();
    	if ( cell[0] == 0 ){
    		ctx.moveTo( lastX, lastY );
    		ctx.lineTo( lastX + cellSize, lastY );
    	}
    
  		if ( cell[1] == 0 ){
    		ctx.moveTo( lastX + cellSize, lastY )
    		ctx.lineTo( lastX + cellSize, lastY + cellSize );
    	}
    
    	if ( cell[2] == 0 ){
    		ctx.moveTo( lastX, lastY + cellSize );
    		ctx.lineTo( lastX + cellSize, lastY + cellSize );
    	}
    	if ( cell[3] == 0 ){
    		ctx.moveTo( lastX, lastY );
    		ctx.lineTo( lastX, lastY + cellSize );
    	}
    
    	ctx.stroke();
    	lastX += cellSize;
  	}	
  	lastY += cellSize;
  	lastX = 5;
	}
}
generateMaze();

function startMaze(){
	iterations = 0;
	var startX = 0, startY = 0;
	var padding = 5;

	ctx.fillStyle = "#FF0000";
	ctx.fillRect( defX + padding + cellSize * startX,
    						defY + padding + cellSize * startY,
              	cellSize - padding - defX,
              	cellSize - padding - defY );
                
  function step(){
		function getTrueDir(cb){
  		var dirInx = Math.floor(Math.random()*4);
  	  if (mazeArray[startY][startX][dirInx] == 0 )
  	  	getTrueDir(cb);
  	  else
  	  	return cb(dirInx);
  	}
	
  
  	return getTrueDir(...