JSFiddle - React, Tailwind, and code Playground

by fairmutex

HTML

<body>
    <div id="content">
        <div id="settings">
            <label for="xAxis">Width</label>
            <input id="xAxis" type="text" value="20" />
            <label for="yAxis">Height</label>
            <input id="yAxis" type="text" value="20" />
            <label for="speed">Speed</label>
            <input id="speed" type="text" value="500" />
            <label for="snakeLength">Snake Length</label>
            <input id="snakeLength" type="text" value="6" />
            <input id="generateGameBtn" type="button" value="Generate" />
        </div>
        <div id="container"></div>
    </div>
    <div id="debug"></div>
</body>

CSS

* {
    margin:0;
    padding:0;
    -border:0;
}
#content {
    display:table;
    margin 0 100%;
}
.cell {
    vertical-align: top;
    display:inline-block;
    width:20px;
    height:20px;
    border:1px solid red;
}
.s {
    background-color:black;
}
.loot {
    background-color:red;
}

JavaScript

document.getElementById('generateGameBtn').addEventListener('click', function () {
    // Get Length and breadth of grid
    var xAxis = document.getElementById('xAxis').value;
    var yAxis = document.getElementById('yAxis').value;
    // Limit Presets
    if (xAxis < 5 || yAxis < 5) {
        alert("Grid size too small!");
        return;
    }

    // container for grid
    var container = document.getElementById('container');
    while (container.firstChild) {
        container.removeChild(container.firstChild);
    }

    var cells = new Array(yAxis);

    // Create grid
    for (var i = 0; i < yAxis; i++) {
        cells[i] = new Array(xAxis);
        for (var j = 0; j < xAxis; j++) {
            cells[i][j] = document.createElement('div');
            cells[i][j].setAttribute('y', String(i));
            cells[i][j].setAttribute('x', String(j));
            cells[i][j].classList.add('cell');
            container.appendChild(cells[i][j]);
        }
        var br = document.createElement('br');
        container.appendChild(br);
    }

    // interval speed
    var speed = document.getElementById('speed').value;
    // initial worm length
    var snakeLength = document.getElementById('snakeLength').value;
    var snake = [];

    for (var k = 0; k < snakeLength; k++) {
        snake.push([1, snakeLength - k]);
        cells[snake[k][0]][snake[k][1]].classList.add('s');
    }
    // Default direction
    var direction = 'R';
    var lootFlag = false;
    var lootX;
    var lootY;
    var handle = setInterval(start, speed);

    function start() {
        console.log('Function start');
        console.log(snake);

        if (lootFlag === false) {
            do {
                lootX = Math.floor(Math.random() * xAxis);
                lootY = Math.floor(Math.random() * yAxis);
            } while (cells[lootY][lootX].classList.contains("s"));
            cells[lootY][lootX].classList.toggle('loot');
            lootFlag = true;
        }

        var...