JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="snake-container">
    <div class="row r1">
        <div class="cell c1"></div>
        <div class="cell c2"></div>
        <div class="cell c3"></div>
        <div class="cell c4"></div>
        <div class="cell c5"></div>
        <div class="cell c6"></div>
        <div class="cell c7"></div>
        <div class="cell c8"></div>
        <div class="cell c9"></div>
        <div class="cell c10"></div>
    </div>
    <div class="row r2">
        <div class="cell c1"></div>
        <div class="cell c2"></div>
        <div class="cell c3"></div>
        <div class="cell c4"></div>
        <div class="cell c5"></div>
        <div class="cell c6"></div>
        <div class="cell c7"></div>
        <div class="cell c8"></div>
        <div class="cell c9"></div>
        <div class="cell c10"></div>
    </div>
    <div class="row r3">
        <div class="cell c1"></div>
        <div class="cell c2"></div>
        <div class="cell c3"></div>
        <div class="cell c4"></div>
        <div class="cell c5"></div>
        <div class="cell c6"></div>
        <div class="cell c7"></div>
        <div class="cell c8"></div>
        <div class="cell c9"></div>
        <div class="cell c10"></div>
    </div>
    <div class="row r4">
        <div class="cell c1"></div>
        <div class="cell c2"></div>
        <div class="cell c3"></div>
        <div class="cell c4"></div>
        <div class="cell c5"></div>
        <div class="cell c6"></div>
        <div class="cell c7"></div>
        <div class="cell c8"></div>
        <div class="cell c9"></div>
        <div class="cell c10"></div>
    </div>
    <div class="row r5">
        <div class="cell c1"></div>
        <div class="cell c2"></div>
        <div class="cell c3"></div>
        <div class="cell c4 active"></div>
        <div class="cell c5 active"></div>
        <div class="cell c6 active"></div>
        <div class="cell c7"></div>
        <div class="cell c8"></div>
        <div class="cell c9"></div>
       ...

CSS

.cell {
    width: 20px;
    height: 20px;
    border: 1px solid black;
    display: inline-block;
}
.cell.active,
.food{
    background: black;
}

JavaScript

function move() {
			var last, first, newCell;
			if (pressedCode && (nxC[pressedCode - 33] != currCode - 37)) { currCode = pressedCode; }
			first = sC[sC.length - 1];
			newCell = [first[0] + nxC[currCode - 37][0], first[1] + nxC[currCode - 37][1]];
			if ( (sC.join('|').indexOf('' + newCell[0] + ',' + newCell[1]) > -1) 
				|| (!newCell[0] || !newCell[1] || newCell[0] > sideWidth || newCell[1] > sideWidth) ) {
				clearInterval(start); 
				return;
			}
			if (newCell[0] == nxC[nxC.length-1][0] && newCell[1] == nxC[nxC.length-1][1]) {
				sC.push(nxC.pop());
				addFoodCell();
			} else {
				last = sC.shift();
				$('.r' + last[1] + ' .c' + last[0]).removeClass('active');
				sC.push(newCell);
				$('.r' + newCell[1] + ' .c' + newCell[0]).addClass('active');
			}	
		};
		function addFoodCell() {
			function getRandom(max) { return Math.round(Math.random() * (max - 1) + 1) };
			while (1) {
				x = getRandom(sideWidth), y = getRandom(sideWidth);
				if (sC.join('|').indexOf('' + x + ',' + y) == -1) {
					nextCoords.push([x,y]);
					$('.r' + y + ' .c' + x).addClass('active'); break;
				}
			}
		}
		var currCode = 39, pressedCode = 0, sideWidth = 10, x, y, start,
			snakeCoords = [ [4, 5], [5, 5], [6, 5] ], sC = snakeCoords,
			nextCoords = [ [-1, 0], [0, -1], [1, 0], [0, 1], 2, 3, 0, 1], nxC = nextCoords;
		addFoodCell();
		$(document).on('keydown', function (e) { pressedCode = e.keyCode; });
		start = setInterval(move, 300);