syul/gist:ae331f315540faeaa0db

## gistfile1.txt
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        .field-row {
            display: block;
            clear: both;
        }

        .field-row:last-child .empty-cell{
            border-bottom: 1px solid black;
        }

        .empty-cell:last-child {
            border-right: 1px solid black;
        }

        .empty-cell {
            float: left;
            width: 20px;
            height: 20px;
            border-left: 1px solid black;
            border-top: 1px solid black;
        }

        .empty-cell[state="blank"] {
            background-color: green;
        }

        .empty-cell[state="wall"] {
            background-color: black;
            color: red;
        }

    </style>


</head>
<body onload="init()">

    <button onclick="path.clearField()">Clear</button>
    <button onclick="testField()">Test</button>

    <div id="path">
    </div>

    <script>
        const WIDTH = 20;
        const HEIGHT = 20;
        const BLANK = -1;
        const WALL = -2;

        var Path = function(el) {

            this.field = [];

            var self = this;

            constructField();

            function constructField() {

                var fieldCanvas = document.createElement('div'),
                        index = 0;

                fieldCanvas.addEventListener('click', onFieldCanvasClick);

                el = el || document.body;

                for (var w = 0; w < WIDTH; w++) {

                    var row = document.createElement('div');
                    row.className = 'field-row';

                    for (var h = 0; h < HEIGHT; h++) {

                        index = w * HEIGHT + h;

                        self.field[index] = {
                            index: index,
                            el: document.createElement('div'),
                            state: BLANK,
                            xPos: h,
                            yPos: w,
                            pass: false
                        };

                        self.field[index].el.className = 'empty-cell';
                        self.field[index].el.setAttribute('cell-index', index);
                        self.field[index].el.setAttribute('state', 'blank');

                        row.appendChild(self.field[index].el);

                    }

                    fieldCanvas.appendChild(row);
                }

                el.appendChild(fieldCanvas);
            }

            function onFieldCanvasClick(event) {
                switch (event.target.className) {
                    case 'empty-cell':
                        changeCellState(parseInt(event.target.getAttribute('cell-index')));
                        break;
                }
            }

            function changeCellState(index) {
                switch (self.field[index].state) {
                    case BLANK:
                        self.field[index].el.setAttribute('state','wall');
                        self.field[index].state = WALL;
                        break;
                    case WALL:
                        self.field[index].el.setAttribute('state','blank');
                        self.field[index].state = BLANK;
                        self.changePassState(self.field[index], false);
                        break;
                }
            }
        };

        Path.prototype.clearField = function () {

            this.field.forEach(function (element) {
                element.state = BLANK;
                element.el.setAttribute('state','blank');
                this.changePassState(element, false);
            }, this)

        };

        Path.prototype.testField = function () {

            this.clearPass();

            for (var w = 0; w < WIDTH; w ++) {
                if (this.field[w * HEIGHT].state === WALL && !this.field[w * HEIGHT].pass && this.testLine(this.field[w * HEIGHT])) {
                    return false;
                }
            }

            return true;

        };

        Path.prototype.changePassState = function(element, PassState) {

            element.pass = PassState;
            element.el.innerHTML = PassState ? '*' : '';

        };

        Path.prototype.clearPass = function () {

            this.field.forEach(function (element) {
                this.changePassState(element, false);
            }, this);

        };

        Path.prototype.testLine = function (startPoint) {

            var currentPoint,
                offsetX = [1, -1, 0, 0],
                offsetY = [0, 0, 1, -1];

            if (startPoint.pass) {
                return false;
            }

            this.changePassState(startPoint, true);

            for (var i = 0; i < 4; i ++) {
                currentPoint = this.field[startPoint.yPos * HEIGHT + startPoint.xPos + offsetY[i] + HEIGHT * offsetX[i]];
                if(currentPoint && currentPoint.state === WALL && !currentPoint.pass && this.testLine(currentPoint)) {
                    return true;
                }
            }

            if (startPoint.xPos == HEIGHT - 1) {
                return true;
            }

        };

        var path;

        function init() {

            path = new Path(document.getElementById('path'));

        }

        function testField() {

            if(!path.testField()) {
                alert('Field does not have a path');
            } else {
                alert('Field has a path');
            }

        }

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
	.field-row {
	display: block;
	clear: both;
	}

	.field-row:last-child .empty-cell{
	border-bottom: 1px solid black;
	}

	.empty-cell:last-child {
	border-right: 1px solid black;
	}

	.empty-cell {
	float: left;
	width: 20px;
	height: 20px;
	border-left: 1px solid black;
	border-top: 1px solid black;
	}

	.empty-cell[state="blank"] {
	background-color: green;
	}

	.empty-cell[state="wall"] {
	background-color: black;
	color: red;
	}

	</style>


	</head>
	<body onload="init()">

	<button onclick="path.clearField()">Clear</button>
	<button onclick="testField()">Test</button>

	<div id="path">
	</div>

	<script>
	const WIDTH = 20;
	const HEIGHT = 20;
	const BLANK = -1;
	const WALL = -2;

	var Path = function(el) {

	this.field = [];

	var self = this;

	constructField();

	function constructField() {

	var fieldCanvas = document.createElement('div'),
	index = 0;

	fieldCanvas.addEventListener('click', onFieldCanvasClick);

	el = el \|\| document.body;

	for (var w = 0; w < WIDTH; w++) {

	var row = document.createElement('div');
	row.className = 'field-row';

	for (var h = 0; h < HEIGHT; h++) {

	index = w * HEIGHT + h;

	self.field[index] = {
	index: index,
	el: document.createElement('div'),
	state: BLANK,
	xPos: h,
	yPos: w,
	pass: false
	};

	self.field[index].el.className = 'empty-cell';
	self.field[index].el.setAttribute('cell-index', index);
	self.field[index].el.setAttribute('state', 'blank');

	row.appendChild(self.field[index].el);

	}

	fieldCanvas.appendChild(row);
	}

	el.appendChild(fieldCanvas);
	}

	function onFieldCanvasClick(event) {
	switch (event.target.className) {
	case 'empty-cell':
	changeCellState(parseInt(event.target.getAttribute('cell-index')));
	break;
	}
	}

	function changeCellState(index) {
	switch (self.field[index].state) {
	case BLANK:
	self.field[index].el.setAttribute('state','wall');
	self.field[index].state = WALL;
	break;
	case WALL:
	self.field[index].el.setAttribute('state','blank');
	self.field[index].state = BLANK;
	self.changePassState(self.field[index], false);
	break;
	}
	}
	};

	Path.prototype.clearField = function () {

	this.field.forEach(function (element) {
	element.state = BLANK;
	element.el.setAttribute('state','blank');
	this.changePassState(element, false);
	}, this)

	};

	Path.prototype.testField = function () {

	this.clearPass();

	for (var w = 0; w < WIDTH; w ++) {
	if (this.field[w * HEIGHT].state === WALL && !this.field[w * HEIGHT].pass && this.testLine(this.field[w * HEIGHT])) {
	return false;
	}
	}

	return true;

	};

	Path.prototype.changePassState = function(element, PassState) {

	element.pass = PassState;
	element.el.innerHTML = PassState ? '*' : '';

	};

	Path.prototype.clearPass = function () {

	this.field.forEach(function (element) {
	this.changePassState(element, false);
	}, this);

	};

	Path.prototype.testLine = function (startPoint) {

	var currentPoint,
	offsetX = [1, -1, 0, 0],
	offsetY = [0, 0, 1, -1];

	if (startPoint.pass) {
	return false;
	}

	this.changePassState(startPoint, true);

	for (var i = 0; i < 4; i ++) {
	currentPoint = this.field[startPoint.yPos * HEIGHT + startPoint.xPos + offsetY[i] + HEIGHT * offsetX[i]];
	if(currentPoint && currentPoint.state === WALL && !currentPoint.pass && this.testLine(currentPoint)) {
	return true;
	}
	}

	if (startPoint.xPos == HEIGHT - 1) {
	return true;
	}

	};

	var path;

	function init() {

	path = new Path(document.getElementById('path'));

	}

	function testField() {

	if(!path.testField()) {
	alert('Field does not have a path');
	} else {
	alert('Field has a path');
	}

	}

	</script>
	</body>
	</html>