casarock/jsbin.OdicaKuM.html

## jsbin.OdicaKuM.html
<html>
<head>
<title>Maze</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="mazegenerator.js"></script>
<style type="text/css">
#maze {
    border-collapse: collapse;
}

#maze td {
    width: 20px;
    height: 20px;
}
</style>
</head>
<body>

<table id="maze">
<tbody></tbody>
</table>

<script>
    function newMaze(x, y) {

    // Establish variables and starting grid
    var totalCells = x*y;
    var cells = new Array();
    var unvis = new Array();
    for (var i = 0; i < y; i++) {
        cells[i] = new Array();
        unvis[i] = new Array();
        for (var j = 0; j < x; j++) {
            cells[i][j] = [0,0,0,0];
            unvis[i][j] = true;
        }
    }

    // Set a random position to start from
    var currentCell = [Math.floor(Math.random()*y), Math.floor(Math.random()*x)];
    var path = [currentCell];
    unvis[currentCell[0]][currentCell[1]] = false;
    var visited = 1;

    // Loop through all available cell positions
    while (visited < totalCells) {
        // Determine neighboring cells
        var pot = [[currentCell[0]-1, currentCell[1], 0, 2],
                [currentCell[0], currentCell[1]+1, 1, 3],
                [currentCell[0]+1, currentCell[1], 2, 0],
                [currentCell[0], currentCell[1]-1, 3, 1]];
        var neighbors = new Array();

        // Determine if each neighboring cell is in game grid, and whether it has already been checked
        for (var l = 0; l < 4; l++) {
            if (pot[l][0] > -1 && pot[l][0] < y && pot[l][1] > -1 && pot[l][1] < x && unvis[pot[l][0]][pot[l][1]]) { neighbors.push(pot[l]); }
        }

        // If at least one active neighboring cell has been found
        if (neighbors.length) {
            // Choose one of the neighbors at random
            next = neighbors[Math.floor(Math.random()*neighbors.length)];

            // Remove the wall between the current cell and the chosen neighboring cell
            cells[currentCell[0]][currentCell[1]][next[2]] = 1;
            cells[next[0]][next[1]][next[3]] = 1;

            // Mark the neighbor as visited, and set it as the current cell
            unvis[next[0]][next[1]] = false;
            visited++;
            currentCell = [next[0], next[1]];
            path.push(currentCell);
        }
        // Otherwise go back up a step and keep going
        else {
            currentCell = path.pop();
        }
    }
    return cells;
}

    function tilemap(mazeCells) {
        var h = mazeCells.length,
            w = mazeCells[0].length,
            tilemap = this.getInitialTilemap(w, h),
            m = 1;

        for (var i = 0; i < h; i++) {
            var n = 1;

            for (var j = 0; j < w; j++) {
                var mapr = i + m,
                    mapc = j + n;

                tilemap[mapr-1][mapc] = mazeCells[i][j][0] ? '1' : '0';
                tilemap[mapr][mapc+1] = mazeCells[i][j][1] ? '1' : '0';
                tilemap[mapr+1][mapc] = mazeCells[i][j][2] ? '1' : '0';
                tilemap[mapr][mapc-1] = mazeCells[i][j][3] ? '1' : '0';

                n++;
            }

            m++;
        }

        return tilemap;

    }

   function getInitialTilemap(w, h) {
        var tilemapWidth = w * 2 + 1,
            tilemapHeight = h * 2 + 1,
            tilemap = [];

        for (var i = 0; i < tilemapHeight; i++) {
            tilemap[i] = [];

            for (var j = 0; j < tilemapWidth; j++) {
                if (j % 2 === 0 || i % 2 === 0) {
                    tilemap[i][j] = "1";
                } else {
                    tilemap[i][j] = "0";
                }
            }

        }

        return tilemap;
    }

    function debugMap(tilemap) {
        var tilemapHeight = tilemap.length,
            tilemapString = '';

        for (var i = 0; i < tilemapHeight; i++) {
            tilemapString += tilemap[i].join('') + '\n';
        }

        return tilemapString;
    }
    var disp = newMaze(5,5);
    var tm = tilemap(disp);
console.log(debugMap(tm));
    for (var i = 0; i < disp.length; i++) {
        $('#maze > tbody').append("<tr>");
        for (var j = 0; j < disp[i].length; j++) {
            var selector = i+"-"+j;
            console.log(i, j, disp[i][j]);
            $('#maze > tbody').append("<td id='"+selector+"'>&nbsp;</td>");
            if (disp[i][j][0] == 0) { $('#'+selector).css('border-top', '2px solid black'); }
            if (disp[i][j][1] == 0) { $('#'+selector).css('border-right', '2px solid black'); }
            if (disp[i][j][2] == 0) { $('#'+selector).css('border-bottom', '2px solid black'); }
            if (disp[i][j][3] == 0) { $('#'+selector).css('border-left', '2px solid black'); }
        }
        $('#maze > tbody').append("</tr>");
    }
</script>

</body>
</html>
	<html>
	<head>
	<title>Maze</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="mazegenerator.js"></script>
	<style type="text/css">
	#maze {
	border-collapse: collapse;
	}

	#maze td {
	width: 20px;
	height: 20px;
	}
	</style>
	</head>
	<body>

	<table id="maze">
	<tbody></tbody>
	</table>

	<script>
	function newMaze(x, y) {

	// Establish variables and starting grid
	var totalCells = x*y;
	var cells = new Array();
	var unvis = new Array();
	for (var i = 0; i < y; i++) {
	cells[i] = new Array();
	unvis[i] = new Array();
	for (var j = 0; j < x; j++) {
	cells[i][j] = [0,0,0,0];
	unvis[i][j] = true;
	}
	}

	// Set a random position to start from
	var currentCell = [Math.floor(Math.random()y), Math.floor(Math.random()x)];
	var path = [currentCell];
	unvis[currentCell[0]][currentCell[1]] = false;
	var visited = 1;

	// Loop through all available cell positions
	while (visited < totalCells) {
	// Determine neighboring cells
	var pot = [[currentCell[0]-1, currentCell[1], 0, 2],
	[currentCell[0], currentCell[1]+1, 1, 3],
	[currentCell[0]+1, currentCell[1], 2, 0],
	[currentCell[0], currentCell[1]-1, 3, 1]];
	var neighbors = new Array();

	// Determine if each neighboring cell is in game grid, and whether it has already been checked
	for (var l = 0; l < 4; l++) {
	if (pot[l][0] > -1 && pot[l][0] < y && pot[l][1] > -1 && pot[l][1] < x && unvis[pot[l][0]][pot[l][1]]) { neighbors.push(pot[l]); }
	}

	// If at least one active neighboring cell has been found
	if (neighbors.length) {
	// Choose one of the neighbors at random
	next = neighbors[Math.floor(Math.random()*neighbors.length)];

	// Remove the wall between the current cell and the chosen neighboring cell
	cells[currentCell[0]][currentCell[1]][next[2]] = 1;
	cells[next[0]][next[1]][next[3]] = 1;

	// Mark the neighbor as visited, and set it as the current cell
	unvis[next[0]][next[1]] = false;
	visited++;
	currentCell = [next[0], next[1]];
	path.push(currentCell);
	}
	// Otherwise go back up a step and keep going
	else {
	currentCell = path.pop();
	}
	}
	return cells;
	}

	function tilemap(mazeCells) {
	var h = mazeCells.length,
	w = mazeCells[0].length,
	tilemap = this.getInitialTilemap(w, h),
	m = 1;

	for (var i = 0; i < h; i++) {
	var n = 1;

	for (var j = 0; j < w; j++) {
	var mapr = i + m,
	mapc = j + n;

	tilemap[mapr-1][mapc] = mazeCells[i][j][0] ? '1' : '0';
	tilemap[mapr][mapc+1] = mazeCells[i][j][1] ? '1' : '0';
	tilemap[mapr+1][mapc] = mazeCells[i][j][2] ? '1' : '0';
	tilemap[mapr][mapc-1] = mazeCells[i][j][3] ? '1' : '0';

	n++;
	}

	m++;
	}

	return tilemap;

	}

	function getInitialTilemap(w, h) {
	var tilemapWidth = w * 2 + 1,
	tilemapHeight = h * 2 + 1,
	tilemap = [];

	for (var i = 0; i < tilemapHeight; i++) {
	tilemap[i] = [];

	for (var j = 0; j < tilemapWidth; j++) {
	if (j % 2 === 0 \|\| i % 2 === 0) {
	tilemap[i][j] = "1";
	} else {
	tilemap[i][j] = "0";
	}
	}

	}

	return tilemap;
	}

	function debugMap(tilemap) {
	var tilemapHeight = tilemap.length,
	tilemapString = '';

	for (var i = 0; i < tilemapHeight; i++) {
	tilemapString += tilemap[i].join('') + '\n';
	}

	return tilemapString;
	}
	var disp = newMaze(5,5);
	var tm = tilemap(disp);
	console.log(debugMap(tm));
	for (var i = 0; i < disp.length; i++) {
	$('#maze > tbody').append("<tr>");
	for (var j = 0; j < disp[i].length; j++) {
	var selector = i+"-"+j;
	console.log(i, j, disp[i][j]);
	$('#maze > tbody').append("<td id='"+selector+"'> </td>");
	if (disp[i][j][0] == 0) { $('#'+selector).css('border-top', '2px solid black'); }
	if (disp[i][j][1] == 0) { $('#'+selector).css('border-right', '2px solid black'); }
	if (disp[i][j][2] == 0) { $('#'+selector).css('border-bottom', '2px solid black'); }
	if (disp[i][j][3] == 0) { $('#'+selector).css('border-left', '2px solid black'); }
	}
	$('#maze > tbody').append("</tr>");
	}
	</script>

	</body>
	</html>