let e = document.body,
    t = "Space: start/reset. Arrows: Move<div><canvas id=a><style>#a{border:solid}*{background:tan}</style>",
    r = 40,
    n = 400,
    o, d = [
        [4, 3]
    ],
    s = d[0],
    c = "#000",
    p = (e = "red", t = n, a = 0, l = a) => {
        C[f = "fillStyle"] = e, C.fillRect(a * r, l * r, t, t)
    },
    h = (e, t = n / 2, a = t, l = "center") => {
        C[f] = c, C.textAlign = l, C.fillText(e, t, a)
    };
e.innerHTML = t, C = a.getContext`2d`, a.height = a.width = n, C.font = "30px f", e.onkeyup = ({
    which: e
}) => {
    36 < e && e < 41 ? H = e - 38 : 32 != e || o || (o = 1, d = [
        [4, 3]
    ], H = 2, S = 0)
}, setInterval(i => {
    if (o) {
        let [e, t] = d[0], a = e + H % 2, l = t + (H - 1) % 2, n = ([e, t]) => e == a && t == l;
        if (d.pop(), a < 0 || 9 < a || l < 0 || 9 < l || d.some(n)) return o = 0, p(), h`:(`;
        d = [
            [a, l], ...d
        ], n(s) && (d[++S] = d[S - 1], s = [(D = new Date) % 10, D * S % 10]), p`tan`, d.map(e => p(c, r, ...e)), p(i, r, ...s), h(S, 9, 30, "left")
    }
}, n);