JSFiddle - React, Tailwind, and code Playground

by lithium182

HTML

<table>
<tbody id="tabtab">
    
</tbody>
</table>
<div id="score"></div>

CSS

table {
    border-spacing: 0;
    border: 1px solid black;
}


td {
    border: 0px solid black;
    width: 15px;
    height: 15px;
    border-radius: 10px;
}

td.snake {
    background-color: black !important;
}

td.candy {
    background-color: red;   
}

JavaScript

var tab = document.getElementById("tabtab"),
    scoreDiv = document.getElementById("score"),
    score = 0,
    tableSizeX = 0,
    tableSizeY = 0,
    snakeSize = 3,
    snakeDirection = "r", //r=vpravo, l=vlevo, t=hore, b=dolu
    snakePosY = 1,
    snakePosX = snakeSize + 1,
    tick = snakeSize + 0,
    timeOut;

renderTable();
snakeFirstDraw();
updateScore();
setListeners();
setIterationMove();
drawNewCandy();

function drawSnake() {
    var newPlace = tab.querySelector("[data-y='" + snakePosY + "'][data-x='" + snakePosX + "']");
    if(!newPlace || newPlace.classList.contains("snake")) {
        crash();
        return;
    }
    
    newPlace.classList.add("snake");
    newPlace.setAttribute("data-tick", tick + "");
    if (newPlace.classList.contains("candy")) {
        newPlace.classList.remove("candy");
        snakeSize++;
        score++;
        updateScore();
        drawNewCandy();
    }
    else
        deleteTail();
}

function updateScore() {
    scoreDiv.textContent = "Score: " + score;;
}

function deleteTail() {
    var possibleTds = tab.querySelectorAll("td[data-tick]");
    var len = possibleTds.length;
    var least;
    for (var i = 0; i < len; i++) {
        var curr = +possibleTds.item(i).getAttribute("data-tick");
        if (i == 0 || least > curr)
            least = curr;
    }

    var tail = tab.querySelector("[data-tick='" + least + "']");
    tail.classList.remove("snake");
    tail.removeAttribute("data-tick");
}

function drawNewCandy() {
    var newPosX = randomIntFromInterval(0, --tableSizeX);
    var newPosY = randomIntFromInterval(0, --tableSizeY);
    var newPlace = tab.querySelector("[data-y='" + newPosY + "'][data-x='" + newPosX + "']");
    if (newPlace.classList.contains("snake"))
        drawNewCandy();
    else {
        newPlace.classList.add("candy");
    }
}

function snakeFirstDraw() {
    for (var i = 0; i < snakeSize; i++) {
        var posX = snakePosX - i;
        var td = tab.querySelector("[data-y='" +...