JSFiddle - React, Tailwind, and code Playground

HTML

<div>Sorry, this doesn't work in your browser.</div>
<div style="display:none">
<table>
<tr><td class="start"/><td/><td/><td/><td/><td/><td/><td/></tr>
<tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
<tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
<tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
<tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
<tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
<tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
<tr><td/><td/><td/><td/><td/><td/><td/><td class="end"/></tr>
</table>
<button>Test</button>
</div>

CSS

table { -moz-user-select: none; border-collapse: collapse; }
td { background: white; border: thin solid gray; width: 25px; height: 25px; }
td.filled { background: black; }
td:not(.start):not(.end):hover { background: #0ff; }
td.filled:not(.start):not(.end):hover { background: #088; }
td:not(.start):not(.end) { cursor: pointer; }
button { font-size: 20px; margin: 5px 80px; }

JavaScript 1.7

// From http://codegolf.stackexchange.com/questions/38467/your-car-only-turns-right/38485#38485

F=a=>(D=(x,y,d)=>!D[i=[x,y,d]]&&(D[i]=1,x-=~d%2,y-=~-~d%2,x*y==49||!((x|y)&8||a[y][x])&&(D(x,y,d)||D(x,y,~-d%4))),D(-1,0))

// Field

var field = [[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0]];

document.querySelector("div:first-child").style.display = "none";
document.querySelector("div:last-child").style.display = "block";

window.addEventListener("click", function(e) {
    var target = e.target;
    switch (target.tagName) {
    case "TD":
        var classList = target.classList;
        if (!classList.contains("start") && !classList.contains("end")) {
            var x = target.cellIndex;
            var y = target.parentNode.rowIndex;
            field[y][x] ^= 1;
            classList.toggle("filled");
        }
        break;
    case "BUTTON":
        alert(F(field));
        break;
    }
}
);