|
Home - Old Man Programmer
| Displaying demos/maze/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='ascii'>
<title> Maze </title>
<script>
var _maze, _mw, _mh;
var _wall = new Image();
var icon_size = 24;
function r(min, max)
{
var range = Math.abs(max-min)+1;
return Math.floor(Math.random()*range)+min;
}
function dim(x, y) {
var d = new Array(x);
for(var i = 0; i < x; i++) {
d[i] = new Array(y);
for(var j = 0; j < y; j++) {
d[i][j] = 0;
}
}
return d;
}
function genmaze() {
var cv = document.getElementById("maze");
var ctx = cv.getContext("2d");
console.log("Generating maze...\n");
_maze = dim(_mw, _mh);
makemaze(1,1);
for(var x = 0; x < _mw; x++) {
for(var y = 0; y < _mh; y++) {
if (_maze[x][y] == 0) ctx.drawImage(_wall, x*icon_size, y*icon_size)
}
}
}
var _dx = [1, 0, -1, 0];
var _dy = [0, -1, 0, 1];
function makemaze(x, y) {
var d = r(0,3);
for(var i = 0; i < 4; i++) {
var mx = x + _dx[d];
var my = y + _dy[d];
var nx = x + 2 * _dx[d];
var ny = y + 2 * _dy[d];
if (nx > 0 && nx < _mw && ny > 0 && ny < _mh) {
if ((_maze[mx][my] == 0) && (_maze[nx][ny] == 0)) {
_maze[mx][my] = _maze[nx][ny] = 1;
makemaze(nx, ny);
}
}
d = (d+1) % 4;
}
}
function resize() {
var cv = document.getElementById("maze");
var ctx = cv.getContext("2d");
cv.width = Math.floor((window.innerWidth - 40) / icon_size) * icon_size;
cv.height = Math.floor((window.innerHeight - 40) / icon_size) * icon_size;
_mw = cv.tw = Math.floor(cv.width / icon_size);
_mh = cv.th = Math.floor(cv.height / icon_size);
ctx.fillStyle = "white";
ctx.strokeStyle = "red";
ctx.fillRect(0, 0, cv.width, cv.height);
_wall.id = "_wall";
_wall.onload = genmaze;
_wall.src = "img/wall.png"
}
</script>
</head>
<body onload="resize();" onresize='resize()'>
<canvas id='maze' width='95%' height='95%'></canvas>
</body>
</html>
|