JSFiddle - React, Tailwind, and code Playground

by Jackit Shot

HTML

<div class="stat">steps: <span id="step">0</span> complete: <span id="complete">0</span></div>
<canvas id="canvas" style="background:#eee"></canvas>

JavaScript

(function mapGen(b, c, e, a, m, q) {
    b = q(b);
	var d = b.getContext("2d");
    function character(a, b) {
        var h = d.getImageData(13 * f + 7 + 6 * a, 13 * g + 7 + 6 * b, 1, 1);
        0 == h.data[0] && 0 == h.data[1] && 0 == h.data[2] && 255 == h.data[3] ? a = b = 0 : q("#step").innerHTML++;
        d.clearRect(13 * f + 3, 13 * g + 3, 10, 10), f += a, g += b, d.fillRect(3 + 13 * f, 3 + 13 * g, 10, 10);
        f >= c && mapGen("#canvas", c, e, 0, m + 1)}
    q("#step").innerHTML = a, q("#complete").innerHTML = m;
    d.fillStyle = "black", d.fillRect(0, 0, b.width = 13 * c + 3, b.height = 13 * e + 3), a = [c], b = [c];
    for (var cr_l = 0,k = [c], qq = 1,i,j; cr_l < e; cr_l++) {
        for (i = 0; i < c; i++) 0 == cr_l && (a[i] = 0), d.clearRect(13 * i + 3, 13 * cr_l + 3, 10, 10), k[i] = 0, 1 == b[i] && (b[i] = a[i] = 0), 0 == a[i] && (a[i] = qq++);
        for (i = 0; i < c; i++) {
            k[i] = 0|(2 * Math.random()), b[i] = 0|(2 * Math.random());
            if ((0 == k[i] || cr_l == e - 1) && i != c - 1 && a[i + 1] != a[i]) {
                var l = a[i + 1];
                for (j = 0; j < c; j++) a[j] == l && (a[j] = a[i]);
                d.clearRect(13 * i + 3, 13 * cr_l + 3, 15, 10) }
            cr_l != e - 1 && 0 == b[i] && d.clearRect(13 * i + 3, 13 * cr_l + 3, 10, 15) }
        for (i = l = 0, p = 0; i < c; i++) {
            for (j = 0; j < c; j++)
				a[i] == a[j] && 0 == b[j] ? p++ : l++;
            0 == p && (b[i] = 0, d.clearRect(13 * i + 3, 13 * cr_l + 3, 10, 15)) } }
    d.clearRect(13 * c, 3, 15, 10);
    var f = 0, g = 0;
    d.fillStyle = "red", character(-1, -1);
    document.body.onkeydown = function (a) {
        36 < a.keyCode && 41 > a.keyCode && character((a.keyCode - 38) % 2, (a.keyCode - 39) % 2) }
})("#canvas", 25, 30, 0, 0, function(x){return document.querySelector(x)});