amazejs
Version:
a simple maze generator
59 lines (52 loc) • 1.78 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>A maze</title>
<script src="bundle.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<p>
<canvas id="maze" style="background-color: black;"></canvas>
</p>
<p>
<button id="generate" onclick="doGenerate();">Generate</button>
<button id="solve" onclick="doSolve();">Solve</button>
</p>
<script>
var sz = 4;
var maze = require('maze');
var m = new maze.Backtracker(513, 1025);
function doGenerate() {
var c = document.getElementById('maze');
c.width = m.width * sz;
c.height = m.height * sz;
var ctx = c.getContext('2d');
ctx.fillStyle = '#FFFFFF';
m.reset();
m.generate();
for (var r = 0; r < m.height; r++) {
for (var c = 0; c < m.width; c++) {
if (m.get(r, c)) {
ctx.fillRect(c * sz, r * sz, sz, sz);
}
}
}
};
function doSolve() {
var c = document.getElementById('maze');
var sln = m.solve([1, 1], [m.height - 2, m.width - 2]);
var ctx = c.getContext('2d');
ctx.fillStyle = 'cornflowerblue';
for (var i = 0; i < sln.length; i++) {
ctx.fillRect(sln[i][1] * sz, sln[i][0] * sz, sz, sz);
}
ctx.fillStyle = '#00FF00';
ctx.fillRect(sz, sz, sz, sz);
ctx.fillStyle = '#FF0000';
ctx.fillRect(sz * (m.width - 2), sz * (m.height - 2), sz, sz);
};
doGenerate();
</script>
</body>
</html>