JS Canvas 随机生成正方形迷宫图

maze generator by js

h5, js, canvas, maze

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3539
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

'floor|random|round|abs|sqrt|PI|atan2|sin|cos|pow|max|min'
.split('|')
    .forEach(function(p) {
        window[p] = Math[p];
    });

var TAU = PI * 2;

function r(n) {
    return random() * n;
}

function rrng(lo, hi) {
    return lo + r(hi - lo);
}

function rint(lo, hi) {
    return lo + floor(r(hi - lo + 1));
}

function choose() {
    return arguments[rint(0, arguments.length - 1)];
}

function choose1(args) {
    return args[rint(0, args.length - 1)];
}

/*---------------------------------------------------------------------------*/

var W, H, frame, t0, time;
var DPR = devicePixelRatio || 1;

function dpr(n) {
    return n * DPR;
}

function resize() {
    var w = innerWidth;
    var h = innerHeight;

canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';

W = canvas.width = w * DPR;
    H = canvas.height = h * DPR;
}

function loop(t) {
    frame = requestAnimationFrame(loop);
    draw();
    time++;
}

function pause() {
    cancelAnimationFrame(frame);
    frame = frame ? null : requestAnimationFrame(loop);
}

function reset() {
    cancelAnimationFrame(frame);
    resize();
    ctx.clearRect(0, 0, W, H);
    init();
    time = 0;
    frame = requestAnimationFrame(loop);
}

/*---------------------------------------------------------------------------*/

var up = {
    x: 0,
    y: -1
};
var down = {
    x: 0,
    y: 1
};
var left = {
    x: -1,
    y: 0
};
var right = {
    x: 1,
    y: 0
};

var dirs = [up, down, left, right];

function Growth(grid) {
    var pos = grid.freeCell();
    this.x = pos.x;
    this.y = pos.y;
    this.grid = grid;
    grid.cells[pos.x][pos.y] = true;
    this.setNewDirection();
}

Growth.prototype.canMove = function(dir) {
    var x = this.x + dir.x;
    var y = this.y + dir.y;
    if (x < 0 || x >= this.grid.dim) return false;
    if (y < 0 || y >= this.grid.dim) return false;
    return !this.grid.cells[x][y];
};

Growth.prototype.possibleDirs = function() {
    return dirs.filter(this.canMove.bind(this));
};

Growth.prototype.setNewDirection = function() {
    var possibles = this.possibleDirs();
    if (!possibles.length) return this.dir = null;
    this.dir = choose1(possibles);
    this.grid.cells[this.x + this.dir.x][this.y + this.dir.y] = true;
};

Growth.prototype.update = function() {
    if (this.dead) return;

this.x += this.dir.x;
    this.y += this.dir.y;
    this.setNewDirection();
};

Growth.prototype.draw = function(t) {
    var dir = this.dead ? {
        x: 0,
        y: 0
    } : this.dir;
    var size = this.grid.size;

var x = this.grid.x + (this.x + dir.x * t) * size;
    var y = this.grid.y + (this.y + dir.y * t) * size;
    ctx.fillRect(x + PAD, y + PAD, size - PAD2, size - PAD2);
};

Object.defineProperty(Growth.prototype, 'dead', {
    get: function() {
        return !this.dir;
    }
});

Grid.prototype.freeCell = function() {
    var x, y;
    do {
        x = ~~r(this.dim);
        y = ~~r(this.dim);
    } while (this.cells[x][y] === true);
    return {
        x: x,
        y: y
    };
};

Grid.prototype.update = function() {
    this.growths.forEach(function(growth) {
        growth.update();
    });
};

Grid.prototype.draw = function(t) {
    this.growths.forEach(function(growth) {
        growth.draw(t);
    });
};

Object.defineProperty(Grid.prototype, 'dead', {
    get: function() {
        return this.growths.every(function(g) {
            return g.dead;
        });
    }
});

/*---------------------------------------------------------------------------*/

var PAD = dpr(2);
var PAD2 = 2 * PAD;
var STEP = 10;

var w = 5;
var h = 3;
var sz = dpr(10);
var dim = 7;
var spc = 2;

var grids;

function init() {
    grids = [];

var ww = (w * sz * dim) + (w - 1) * spc * sz;
    var hh = (h * sz * dim) + (h - 1) * spc * sz;
    var offsetX = ~~((W - ww) / 2);
    var offsetY = ~~((H - hh) / 2);
    for (var i = 0; i < w; i++) {
        for (var j = 0; j < h; j++) {
            var grid = new Grid(offsetX + (i * (dim + spc) * sz),
                offsetY + (j * (dim + spc) * sz),
                sz, dim);
            grids.push(grid);
        }
    }

ctx.fillStyle = 'rgb(34, 49, 63)';
    ctx.fillRect(0, 0, W, H);
    ctx.fillStyle = 'rgb(218, 223, 225)';
}

/*---------------------------------------------------------------------------*/

document.onclick = pause;
window.onresize = reset;

reset();

编译

CSS

HTML

maze generator by js

h5, js, canvas, maze

编辑器支持Emmet

快捷键

maze generator by js

h5, js, canvas, maze

HTML5 Canvas随机生成入侵者像素小怪物图标

HTML5 Canvas 3D六边形迷宫图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：