javascript – Automatic cell grid filling

Question:

There is a field of pixels and a code for selecting a pixel that changes color:

$(".pixel").click(function() {
  $(this).toggleClass("white");
  $(this).toggleClass("black");
})
var delta;
var isCall = false;
if (!isCall) {
  var zoom = 1;
  isCall = true;
}
#art {
  width: 101px;
  height: 101px;
  display: table;
  border-spacing: 1px;
  background-color: #d8d8d8;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="art">
  <div class="row">
    <div class="pixel white" id="1-1"></div>
    <div class="pixel white" id="1-2"></div>
    <div class="pixel white" id="1-3"></div>
    <div class="pixel white" id="1-4"></div>
    <div class="pixel white" id="1-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="2-1"></div>
    <div class="pixel white" id="2-2"></div>
    <div class="pixel white" id="2-3"></div>
    <div class="pixel white" id="2-4"></div>
    <div class="pixel white" id="2-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="3-1"></div>
    <div class="pixel white" id="3-2"></div>
    <div class="pixel white" id="3-3"></div>
    <div class="pixel white" id="3-4"></div>
    <div class="pixel white" id="3-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="4-1"></div>
    <div class="pixel white" id="4-2"></div>
    <div class="pixel white" id="4-3"></div>
    <div class="pixel white" id="4-4"></div>
    <div class="pixel white" id="4-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="5-1"></div>
    <div class="pixel white" id="5-2"></div>
    <div class="pixel white" id="5-3"></div>
    <div class="pixel white" id="5-4"></div>
    <div class="pixel white" id="5-5"></div>
  </div>
</div>

But there was a need to automatically fill in the entire field, let's say I click on some cell and random neighboring cells are filled with slight delays (like dominoes fall in all directions) and so on until the entire field is filled. Is this even possible to implement? I was hinted that a similar algorithm is in the KAMI game, but I have not yet figured out how this can be done, so I hope for your advice.

Answer:

var size = 20;
for (var i = 0; i < size; i++) {
  var row = $('<div class="row"></div>');
  $("#art").append(row);
  for (var j = 0; j < size; j++) {
    row.append('<div class="pixel white"></div>');
  }
}


var timerFind = null;
var convert = [];
$(".pixel").click(function() {
  $(this).removeClass("white");
  $(this).addClass("black");
  if (timerFind)
    return;      

  function FindPixels() {
    var matrix = [];
    $(".row").each(function(iRow, row){
      matrix[iRow] = [];
      $(row).find(".pixel").each(function(iPix, pix){
        matrix[iRow].push($(pix));
      });
    });
  
    var blacks = [];
    for (var iRow = 0; iRow < matrix.length; iRow++) {
      for (var iPix = 0; iPix < matrix[iRow].length; iPix++) {
        if (matrix[iRow][iPix].hasClass("black"))
          blacks.push({ row: iRow, col: iPix });
      }  
    }

    for (var iB = 0; iB < blacks.length; iB++) {
      for (var i = Math.max(0, blacks[iB].row-1); 
          i <= Math.min(matrix.length-1, blacks[iB].row+1); i++) {
        for (var j = Math.max(0, blacks[iB].col-1); 
            j <= Math.min(matrix[0].length-1, blacks[iB].col+1); j++) {
          if ((i == blacks[iB].row || j == blacks[iB].col) && 
              matrix[i][j].hasClass("white") && 
              convert.indexOf(matrix[i][j]) == -1) {
            convert.push(matrix[i][j]);
            $("#convert").text(convert.length);
          }
        }
      }
    }

    if (convert.length > 0) {
          var index = Math.floor(Math.random() * convert.length)
          convert[index].removeClass("white");
          convert[index].addClass("black");
          convert = [];
          $("#convert").text(convert.length);
    }

    if ($(".pixel.white").length == 0) {
      console.log("done");
    } else {
      timerFind = setTimeout(FindPixels, 100);
    }
  } // FindPixels

  timerFind = setTimeout(FindPixels, 100);
});

$(".row").last().find(".pixel").last().click();
#art {
  width: 181px;
  height: 181px;
  display: table;
  border-spacing: 1px;
  background-color: #d8d8d8;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="convert">0</span>
<div id="art">
</div>
Post Views: 14
Scroll to Top