JSFiddle - React, Tailwind, and code Playground

by kukicvladimir

CSS

.cell{
    height: 50px;
    width: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background: red;
    position: absolute;
}

JavaScript

function initGame() {

  var mapSize = 10; // create a field of 10x10
  var cellsPerRow = 10; // 10 cells per row

  for (var x = 0; x < mapSize; x++) {
    for (var y = 0; y < mapSize; y++) {
      createCell(x, y); // create a cell on index x (horizontal) and y (vertical)
    }
  }
}

function createCell(x, y) {

  // store this cell position to a data class

  var cellDiv = $("<div></div>"); // create the cell div
  cellDiv.addClass("cell"); // add some css
  cellDiv.css({
    left: Math.floor(x*50),
    top: Math.floor(y*50)
  });
  $(document.body).append(cellDiv); // add the cell div to the parent
}

initGame()