JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div>
<button id="buildField">buildField</button>
</div>
<canvas id="c" width="600" height="400"></canvas>
<div>
Show color: #55bbb7<br />
Final correct: #66d52d<br />
Wrong: #f25419
</div>

JavaScript

var canvas = new fabric.StaticCanvas('c');
var colors = {
	dashColor: 'rgba(0,0,0,.3)',
  cellClosed: '#714a44',
  cellOpened: '#55bbb7'
};
canvas.backgroundColor = 'rgba(122,91,80,0.3)';
var sSize = 50;
var levels = [
	[3,4,1],
  [4,4,2]
];
var curLevel = 1;
var rects = [];

function buildField() {
	rects = [];
	var fieldSize = levels[curLevel];
  for(var i =0; i < fieldSize[1]; i++) {
  	for(var j =0; j < fieldSize[0]; j++) {
      var rect = new fabric.Rect({
  			left: j*sSize + (j>0 ? j*3 : 0),
  			top: i*sSize + (i>0 ? i*3 : 0),
  			fill: colors.cellClosed,
  			width: sSize,
  			height: sSize
			});
    	rects.push({
      	i: i,
        j: j,
      	obj:rect,
        selected: false
      });
      canvas.add(rect);
    }
  }
  genSelected();
  // close cells
  setTimeout(function() {
  	for(var i = 0; i < rects.length; i++) {
    	if(rects[i].selected) {
      	changeColor(rects[i].obj, colors.cellClosed);
      }
    }
  }, 1000);
}
function genSelected() {
	var selectedCount = levels[curLevel][2];
  rects.sort(function() { return Math.random() * 2 - 1});
  for(var i = 0; i < selectedCount; i++) {
  	rects[i].selected = true;
    changeColor(rects[i].obj, colors.cellOpened);
  }
}
function changeColor(obj, color) {
var dur = 200;
obj.animate('top', '+='+sSize/2, { onChange: canvas.renderAll.bind(canvas),duration: dur});
    obj.animate('height', '0', { onChange: canvas.renderAll.bind(canvas),duration: dur});
    setTimeout(function() {
    	obj.set({fill: color});
      obj.animate('top', '-='+sSize/2, { onChange: canvas.renderAll.bind(canvas),duration: dur});
    obj.animate('height', sSize, { onChange: canvas.renderAll.bind(canvas),duration: dur});
    }, dur);
}

document.getElementById('buildField').onclick = buildField;