JSFiddle - React, Tailwind, and code Playground

HTML

<body onKeyDown="pegadirecao(event.keyCode);">
    <div id="principal"></div>
    <div id="pontuacao"></div>
</body>

CSS

table {
    align:center;
    border:1px solid black;
}
td {
    border:1px solid black;
    width: 30px;
    height: 30px;
    background: #ffffff;
    transition: background 0.1s;
}
.aceso {
    background: #333333 !important;
}
.maca {
    background: #ff3333;
}

JavaScript

var tabuleiro = document.createElement('table');
var quadrados = {};
var infoPontos = document.getElementById('pontuacao');
for (x = 0; x < 10; x++) {
    var tr = document.createElement('tr');
    for (y = 0; y < 10; y++) {
        var td = document.createElement('td');
        quadrados[x + "_" + y] = td;
        tr.appendChild(td);
    }
    tabuleiro.appendChild(tr);
}
document.getElementById('principal').appendChild(tabuleiro);

cobra = [
    [5, 0]
];
direcao = 2;
vivo = true;

function desenhapedaco(x, y) {
    quadrados[x + '_' + y].classList.add('aceso');
}

function apagapedaco(x, y) {
    quadrados[x + '_' + y].classList.remove('aceso', 'maca');
}

function geramaca() {
    mx = parseInt(Math.random() * 10)
    my = parseInt(Math.random() * 10)
    quadrados[mx + '_' + my].classList.add('maca');
}

function pontuou() {
    infoPontos.innerHTML = 'Pontuação: \n' + (cobra.length - 1) + ' Maçãs!';
}

function anda() {
    apagapedaco(cobra[cobra.length - 1][0], cobra[cobra.length - 1][1]);
    if (mx == cobra[0][0] && my == cobra[0][1]) {
        geramaca();
        cobra[cobra.length] = [10, 10];
        pontuou();
    }
    for (x = cobra.length - 1; x > 0; x--) {
        cobra[x][0] = cobra[x - 1][0];
        cobra[x][1] = cobra[x - 1][1];
    }
    if (direcao == 0) cobra[0][1]--;
    if (direcao == 1) cobra[0][0]--;
    if (direcao == 2) cobra[0][1]++;
    if (direcao == 3) cobra[0][0]++;
    if (cobra[0][0] < 0 || cobra[0][1] < 0 || cobra[0][0] > 9 || cobra[0][1] > 9) {
        vivo = false;
    }
    for (x = 1; x < cobra.length; x++) {
        if (cobra[x][0] == cobra[0][0] && cobra[x][1] == cobra[0][1]) vivo = false;
    }
    if (vivo) {
        desenhapedaco(cobra[0][0], cobra[0][1]);
        setTimeout(anda, 300);
    } else {
        alert('Você perdeu, seu otario.\nVocê pegou ' + (cobra.length - 1) + ' maçãs');
    }
}
pontuou();
geramaca();
anda();

function pegadirecao(tecla) { //alert(tecla);
    if (tecla == 37) direcao = 0;
    if...