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="obstacles">Obstacles</label>
            <input id="obstacles" type="text" value="500" />
            <label for="radius">Radius</label>
            <input id="radius" type="text" value="6" />
            <input id="generateGameBtn" type="button" value="Generate" />
        </div>
        <div id="container"></div>
    </div>
</body>

CSS

body {
}

* {
    margin: 0;
    padding: 0;
}

#settings {
    padding: 10px;
}

#content {
    display: block;
    margin: 0 auto;
}

#container {
    display: table;
    margin: 0 auto;
    border: 5px solid #F51B1B;
    border: 5px solid #E2E2E2;
    box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 8px hsl(0, 0%, 90%);
}

.cell {
    vertical-align: top;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid red;
}

.s {
    background-color: black;
}

.current {
    background-color: red;
}

JavaScript

document.getElementById('generateGameBtn').addEventListener('click', function () {

    
     // Get Length and breadth of grid
    var xAxis = Number(document.getElementById('xAxis').value);
    var yAxis = Number(document.getElementById('yAxis').value);
    
    
    /*
    var snakeLength =        
        Number(document.getElementById('snakeLength').value);
    // Limit size of grid

    if (xAxis <= snakeLength || yAxis <= snakeLength) {
        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);
    
   
    var br = document.createElement('br');
    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);
    }
    
    currentX = Math.floor(Math.random() * xAxis);
    currentY = Math.floor(Math.random() * yAxis);
    cells[currentY][currentX].classList.toggle('current');
    
});