Maze Runner

by Julien Roche

HTML

<canvas></canvas>

CSS

html, body {
                border: none;
                height: 100%;
                margin: 0px 0px 0px 0px;
                overflow: hidden;
                padding: 0px 0px 0px 0px;
                width: 100%;
            }

Babel + JSX

class Maze {
    static draw({ x, y, rows, columns }, canvasElement) {
        let context = canvasElement.getContext('2d');
        let cellWidth = Math.floor(canvasElement.width / (y + 2));
        let cellHeight = Math.floor(canvasElement.height / (x + 2));

        context.fillStyle = 'black';
        context.strokeStyle = 'white';
        context.fillRect(0, 0, canvasElement.width, canvasElement.height);

        for (let j = 0; j <= x; j++) {
            for (let k = 0; k <= y; k++) {
                if (k < y && !(j > 0 && rows[j - 1][k])) {
                    if (!(k === 0 && j === 0)) {
                        context.beginPath();
                        context.moveTo(cellWidth * (k + 1), cellHeight * (j + 1));
                        context.lineTo(cellWidth * (k + 2), cellHeight * (j + 1));
                        context.closePath();
                        context.stroke();
                    }
                }

                if (j < x && !(k > 0 && columns[j][k - 1])) {
                    if (!(j === x - 1 && k === y)) {
                        context.beginPath();
                        context.moveTo(cellWidth * (k + 1), cellHeight * (j + 1));
                        context.lineTo(cellWidth * (k + 1), cellHeight * (j + 2));
                        context.closePath();
                        context.stroke();
                    }
                }
            }
        }
    }

    static generate(x = 1, y = 1) {
        let n = x * y - 1;
        let position = { 'x': Math.floor(Math.random() * x), 'y': Math.floor(Math.random() * y) };
        let path = [ position ];

        let unvisited = [];
        let columns = [];
        let rows = [];

        for (let j = 0; j < x; ++j) {
            columns[j] = Array(y).fill(false);
        }

        for (let j = 0; j < x; ++j) {
            rows[j] = Array(y).fill(false);
        }

        for (let j = 0; j <= x + 1; ++j) {
            unvisited[j] = [];

            for (let k = 0; k <=...