JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<div id="field" class="field">
</div>
<style>
.field {
border: 2px solid #aaa;
padding: 2px;
display: inline-block;
float: left;
}
.row {
float: left;
clear: both;
}
.cell {
border: 1px solid #000;
background-color: #00f;
margin: 1px;
width: 14px;
height: 14px;
float: left;
}
.cell.active {
background-color: #0f0;
}
</style>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"
></script>
<script>
var width = 10, height = 20;
var x, y;
// init html
var $field = $('#field');
var html;
for (y = 0; y < height; y++) {
html = '';
html += '<div class="row">';
for (x = 0; x < width; x++) {
html += '<div class="cell"></div>';
}
html += '</div>';
$field.append(html);
}
// init field
var field = [];
for (y = 0; y < height; y++) {
var row = [];
for (x = 0; x < width; x++) {
row.push(0);
}
field.push(row);
}
console.log(field);
field[0][4] = 1;
field[1][4] = 1;
field[2][4] = 1;
field[3][4] = 1;
// render field
renderField(field);
function renderField(field)
{
for (y = 0; y < field.length; y++) {
for (x =...